Accessibility
134 bites tagged Accessibility — interview questions with model answers, and 60-second explainers.
CSS `color-scheme`: Opting Into Browser UI Themes
The `color-scheme` property tells the browser your site supports light/dark modes, automatically styling UI like scrollbars and form controls to match the user's OS preference.
Dynamic Theme Switching with CSS
Let your app's theme automatically follow the user's OS setting. CSS's `prefers-color-scheme` media query lets you define styles for light and dark modes. The footgun is forgetting the 'no-preference' state, which can result in an unstyled default.
prefers-color-scheme: Respect User Theme Preferences
The `prefers-color-scheme` media query lets your CSS automatically adapt to a user's system-wide light or dark mode. It's used to create themes that respect user preferences.
VPAT vs. ACR: The Nutrition Label for Accessibility
An ACR is a standardized report card for a product's accessibility, based on a template called a VPAT. It's a nutrition label stating conformance facts, not a pass/fail grade.
Accessibility E2E Testing: Automating User Journeys
Accessibility E2E testing integrates automated checks into simulated user journeys, testing the rendered app as a user would. It's used in CI/CD to validate flows like sign-up or checkout.
Forced Colors Mode: When the User Overrides Your Palette
Forced Colors Mode is an accessibility feature where the browser overrides your site's colors with a user-defined, high-contrast palette. This ensures readability for users who depend on it. The footgun is disabling it and making your UI invisible.
Accessibility Linters: Automate Compliance in Your Design System
An accessibility linter is like a spellchecker for WCAG compliance, automatically flagging component errors like bad contrast or missing labels. It runs in CI/CD to catch bugs early, preventing them from propagating. The footgun: it can't catch everything.
Image Alt Text: What Screen Readers Say About Pictures
Alt text tells screen readers what to say when an image can't be seen. For a photo, describe the scene. For a button, describe its action ("Submit form"). For pure decoration, use an empty alt="" to tell screen readers to skip it.
Keyboard Focus Order: Navigating by Tab
Keyboard focus order is the path a user takes through your UI using only the Tab key. It must follow a logical sequence that preserves meaning, especially in forms and modals. The footgun is when CSS creates a visual layout that diverges from the HTML.
WCAG Conformance Levels: A, AA, and AAA
WCAG levels are a tiered rating for web accessibility. Level A is the minimum, AA is the widely accepted standard, and AAA is the highest. This helps teams set clear, testable goals. The footgun: don't require AAA for an entire site, as it's often impossible.
Writing Accessibility Docs for Your Components
Accessibility docs are the user manual for your component's a11y features. They guide consumers on correct usage, like required ARIA attributes or keyboard behavior.
Modal Dialogs: The Focus Trap Pattern
A modal dialog is a "focus trap" that overlays the UI, forcing a user to complete a task. It's used for critical confirmations or focused inputs, like a date picker. The main footgun is failing to trap keyboard focus, letting users tab into the inert.
WAI-ARIA: A Script for Custom UI Accessibility
WAI-ARIA gives custom UI a voice for assistive tech. It's the script telling a screen reader what a `<div>` acting as a button is and if it's "pressed." Use it for custom widgets when native HTML can't.
WCAG Color Contrast: The 4.5:1 Rule for Readability
WCAG contrast ratios ensure text is readable for people with low vision by measuring relative luminance, not just color. Standard text needs a 4.5:1 ratio against its background.
Data Sonification: Hearing Your Data's Story
Data sonification is data visualization for your ears, mapping data points to sound properties like pitch or volume. It helps find patterns in complex datasets, like network traffic, where visuals fail.
The Popover API: Native Tooltips and Menus
The Popover API creates tooltips and menus with just HTML, placing them in a top layer above all other content without `z-index` hacks. Use it for action menus or notifications.
The `inert` Attribute: Making UI Sections Unreachable
The `inert` attribute makes a part of the DOM non-interactive and inaccessible. It's like a glass pane over a UI section: you can see it, but can't click, focus, or use a screen reader on it. Use it for off-screen menus or inactive dialogs.
Automated Accessibility Testing: Your First Line of Defense
Think of it as a linter for usability, scanning your code for machine-detectable issues like missing alt text or poor color contrast. It's often run in CI pipelines to catch regressions. The footgun is relying on it exclusively, as it misses most issues.
The Accessibility Tree: The DOM for Assistive Tech
The accessibility tree is the DOM's sibling, built for assistive tech. Browsers derive it from your HTML, exposing each element's name, role (e.g., 'button'), and state (e.g., 'checked') to screen readers.
Focus Trapping: Guiding Keyboard Users, Not Caging Them
Focus trapping intentionally confines keyboard navigation to a component, like a modal. It's a feature, not a bug, when used to prevent users from interacting with the page behind an overlay.
ARIA Live Regions: Announcing Dynamic Content
ARIA live regions tell screen readers about content that changes without a page reload, like a notification banner. Use `aria-live="polite"` for most updates and `assertive` only for critical alerts.
WAI-ARIA Authoring Practices: The Cookbook for Accessible Components
Think of WAI-ARIA Authoring Practices as the official cookbook for accessible web components. It provides patterns for widgets like tabs or accordions, ensuring they work with assistive tech.
CSS :focus-visible: Smart Focus for Accessibility
:focus-visible is a smart focus ring that only appears when needed, like during keyboard navigation. This lets you style accessible focus indicators for keyboard users without showing an outline on every mouse click.
Accessible Name Computation: The UI Naming Algorithm
Browsers follow a strict algorithm to find a name for UI elements to announce to screen readers. It runs on every interactive element, creating the data source for assistive tech.
Get Accessibility bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.