React:
My useEventListener Hook
In this article, I introduce a typesafe custom Hook, useEventListener, designed to simplify the process of setting up and cleaning up DOM event listeners. By encapsulating common tasks such as attaching events and handling cleanup, this Hook allows me to focus on building engaging features while enhancing code readability and maintainability.
Read more...My useIsDarkMode Hook
Managing user preferences for light and dark themes is essential for a comfortable UI experience. This article presents a custom React hook, useIsDarkMode, which efficiently detects the user's preferred colour scheme using the window.matchMedia API. By returning a boolean value, it simplifies theme management across components while ensuring performance and type safety.
Read more...My Pub/Sub Hook
In this article, I’ll explore how to effectively manage rapidly changing information in event-driven applications like 3D rendering. I’ll introduce a pub/sub pattern using a custom Hook called useAppScene, which enables components to communicate seamlessly without tight coupling. This approach allows for real-time updates, enhancing performance and modularity while simplifying the management of dynamic data.
Read more...
Accessibility:
Tab Order & Focus
For users who primarily navigate web pages via keyboard, it’s essential that all interactive elements are accessible and logically ordered. This article explains the importance of "tab order," ensuring keyboard-only users can move smoothly through a page, and offers guidance on focus indicators to improve accessibility, including using CSS outlines without altering page layout.
Read more...Introduction
Following are slides I created for an introductory to accessibility presentation I have given to colleagues. This introductory presentation included a hands on practical session using the NVDA screen reader and exploration of WCAG.
Read more...HTML Landmarks
HTML5 semantic tags like <header>, <nav>, and <main> enhance webpage structure and assist screen reader navigation by defining clear landmarks. This article highlights how these elements improve SEO and accessibility, enabling users to navigate efficiently without redundant divs. Testing with screen readers ensures an organised, intuitive experience, making content accessible and easy to navigate for all users.
Read more...Heading Structure
HTML headings (<h1> to <h6>) are essential for structuring web content hierarchically, aiding readability and accessibility. Proper use of nested headings helps screen readers and search engines understand content flow, with a single <h1> per page as best practice. Avoid skipping heading levels, as this disrupts logical structure. Use CSS, not headings, to control visual presentation.
Read more...Techniques to describe page elements
When webpage elements lack descriptive text, like images without alt text or SVGs without labels, assistive technologies may struggle to convey their function to users. Solutions include using alt text for images, aria-label for direct labels, and aria-describedby for referencing external descriptions. Additionally, visually hidden text, placed off-screen with CSS, can improve accessibility without affecting visible layout.
Read more...
