Building Accessible Modals, Drawers, and Popovers in React
How to build accessible modals, drawers, and popovers in React, with focus management, portals, dismissal rules, and the semantics each pattern needs.
Articles
Accessibility
Accessibility is part of front‑end engineering, not a final audit before release. These articles deal with the implementation details that decide whether an interface is genuinely inclusive, as well as the team habits that stop the same barriers returning in the next component or redesign.
Building Accessible Modals, Drawers, and Popovers in React. 
Privacy by Design is Not a Cookie Banner. Privacy by Design is Not a Cookie Banner
Privacy by design means building safer data handling into platforms, analytics, CRM integrations, and workflows from the start, not relying on banners later.
Understanding the Difference Between <b> and <strong>. Understanding the Difference Between
<b>and<strong>The
<b>and<strong>tags both make text bold, but they serve very different purposes and convey different meaning. Here, I explain these differences.
Rethinking Carousels: Going Around in Circles. Rethinking Carousels: Going Around in Circles
I am not a fan of carousels, although I have built many in my career. Here, I discuss why they hinder UX and SEO, and explore alternatives for engaging content.
Common Accessibility Pitfalls in Web Development. Common Accessibility Pitfalls in Web Development
Accessibility issues often creep in through ordinary front‑end habits. This article covers common mistakes and the fixes that make sites easier to use.
Semantic HTML. Semantic HTML
Semantic HTML explained through meaningful elements, HTML5 structure, header, nav, footer, section, figure, accessibility, and more understandable markup.
Use Chrome's Developer Tools to Track Element Focus. Use Chrome's Developer Tools to Track Element Focus
Use Chrome Developer Tools to track focused elements, debug phantom keyboard focus, improve accessibility testing, and create a useful live expression.
CSS Visual Order is Not Document Order. CSS Visual Order is Not Document Order
See why CSS visual order can differ from document, reading, and focus order, with Flexbox and Grid examples plus a safer responsive structure to test.
Announcing Dynamic Updates with ARIA Live Regions. Announcing Dynamic Updates with ARIA Live Regions
Use ARIA live regions for dynamic status updates, choose polite or assertive announcements, handle repeated messages, and know when focus should move.
Ethical Web Development II: Accessibility and Inclusivity. Ethical Web Development II: Accessibility and Inclusivity
Ethical web development part two covers accessibility, inclusivity, WCAG, open source responsibility, and how developers can make safer web experiences.
Changing the Colour of Placeholder Text. Changing the Colour of Placeholder Text
Change placeholder text colour with CSS ::placeholder, including browser defaults, form styling, input states, and accessible use of placeholder copy.
Ethical Web Development I: Privacy, Consent, and Security. Ethical Web Development I: Privacy, Consent, and Security
Why web developers are responsible for protecting user privacy, rejecting manipulative consent patterns, and building secure, maintainable websites.
Intercepting Clipboard Events with JavaScript. Intercepting Clipboard Events with JavaScript
Browsers now support the copy event, which allows developers to intercept and modify content placed onto a clipboard, when copied from their site.
Accessibility in Reusable Front‑End Components. Accessibility in Reusable Front‑End Components
Build accessibility into reusable front‑end components with names, keyboard behaviour, focus states, form semantics, disabled states, and testing habits.
CSS Focus Styles for Keyboard Users Only. CSS Focus Styles for Keyboard Users Only
Keep CSS focus styles accessible without showing outlines after every mouse click, using keyboard‑only patterns, :focus‑visible thinking, and UX trade‑offs.
Reducing Image Brightness with CSS. Reducing Image Brightness with CSS
Reduce image brightness with CSS filters. This guide explains brightness() values, transitions and the trade‑offs when adjusting images for dark mode.
Creating a Discernible Name for Icon Links. Creating a Discernible Name for Icon Links
A common issue I come across when auditing sites with Lighthouse is the "Links do not have a discernible name" error where links don't contain text.
Hiding Empty Elements with CSS. Hiding Empty Elements with CSS
Hide empty elements with the CSS :empty pseudo‑class, including strict matching rules, whitespace caveats, supported selectors, and practical UI uses.