Tag: Accessibility

1. Thinking About Dark Mode and Accessibility Together

   Oct 20, 2025

   Dark mode is often treated as a pure taste question, but it is an accessibility topic with real tension built in: it relieves light-sensitive users while potentially worsening readability for users with astigmatism through the halation effect. Teams that recalculate contrast ratios correctly, respect prefers-color-scheme, and avoid pure black build a color scheme that genuinely works for both groups.

   Read more

2. Building Team Training for Accessibility

   Oct 16, 2025

   Accessibility knowledge that lives in a single team member is a quiet risk: vacation, illness or a job change can open a gap overnight. This article shows practical, low-cost ways that pairing sessions, screen reader demos and a shared checklist embed knowledge across the whole team, bringing new developers and designers along from day one.

   Read more

3. Building Accessible Alpine.js Components

   Sep 29, 2025

   Alpine.js components often look interactive and modern, yet remain unusable for screen reader and keyboard users whenever ARIA attributes are not reactively wired to component state. This article shows, hands on, how to correctly use x-bind:aria-expanded, x-on:keydown and clean focus management, then builds a fully accessible accordion and a dropdown menu from scratch, including keyboard navigation and screen reader support.

   Read more

4. ARIA Fundamentals: When to Use It and When Not To

   Sep 25, 2025

   ARIA never overrides appearance or behavior, it only overlays the accessibility tree with roles, states, and properties that screen readers and other assistive technologies read out. Developers who use ARIA without knowing the five ground rules often build interfaces that are less accessible, not more. This article uses a real tab component to show when ARIA is actually necessary and when a native HTML element remains the better choice.

   Read more

5. ARIA Live Regions for Announcing Dynamic Content

   Sep 21, 2025

   Updating dynamic content with JavaScript without informing screen reader users creates invisible errors and silent success messages. ARIA live regions with aria-live, aria-atomic and aria-relevant announce changes reliably without shifting focus, making cart updates, form validation and search results understandable for every user.

   Read more

6. Understanding and Debugging the Accessibility Tree

   Sep 9, 2025

   Screen readers and other assistive technologies never read HTML directly, they consume a parallel structure computed by the browser called the accessibility tree. Understanding how DOM, semantic HTML, and ARIA attributes shape this tree lets you track down and fix missing or wrong accessible names with the right tools, instead of testing accessibility by guesswork.

   Read more

7. Making Custom Widgets Accessible with ARIA

   Sep 6, 2025

   Building your own dropdown or combobox instead of using a native HTML element means taking full responsibility for keyboard handling, focus, and screen reader announcements. This article shows step by step how to build an accessible custom widget following the WAI-ARIA Authoring Practices, with correct role, aria-expanded, aria-activedescendant, and real screen reader testing before shipping.

   Read more

8. Screen Reader Testing with NVDA and VoiceOver

   Jul 25, 2025

   Automated accessibility checks only find a fraction of the real barriers, because they cannot hear what a page actually sounds like. Developers who operate NVDA on Windows and VoiceOver on macOS themselves discover missing announcements, broken focus order, and silent buttons before blind and low vision users hit them in production, while also learning the limits of their own testing.

   Read more

9. Writing Alt Text Correctly: More Than Just a Required Field

   Jul 16, 2025

   An alt text in a product catalog only becomes useful once it matches the context of the image without starting with image-of or photo-of. This article shows how alt text for product photos, infographics, and icons concretely differs, when empty alt attributes are correct, and how to audit existing catalog data for genuine quality instead of mere presence.

   Read more

10. Accessible Form Validation and Error Messages

    Jul 16, 2025

    A red-outlined input field is useless to screen reader users if the error is not programmatically linked to the field. This article shows how aria-invalid, aria-describedby, and live regions reliably announce validation errors, including a complete accessible checkout example for Magento and Hyvä.

    Read more