Accessibility
134 bites tagged Accessibility — interview questions with model answers, and 60-second explainers.
Making D3.js visualizations accessible to screen readers?
Dual-render strategy (viz + semantic table), ARIA live regions for dynamic updates, keyboard event handlers, focus management. holistic a11y thinking beyond static fallbacks.
Refactor a legacy UI for accessible DOM flow
Align DOM order with reading order, use semantic landmarks and headings, and ensure a sensible tab order with managed focus. deep accessibility beyond ARIA. relying on ARIA to patch a div soup with broken source order.
Make a complex component accessible by design
Define keyboard model and focus order, map to ARIA roles and states, and document interactions for engineers. designing accessibility for non-standard widgets, not just styling.
SVG icons versus icon fonts: technical trade-offs
SVG is vector markup, crisp, multicolor, accessible, and tree-shakeable; icon fonts ship as glyphs, risk anti-aliasing blur, accessibility hacks, and load-failure boxes. Advocate SVG for modern apps. Icon delivery trade-offs.
Designing and documenting focus order in Figma
Focus order is the sequence keyboard and screen-reader users traverse interactive elements; it should follow meaning and reading order, documented in Figma via layer order, numbered annotations… Accessibility of keyboard navigation.
Cross-platform Button API and implementation
Shared semantic props like variant, size, disabled, loading, onPress; web renders a button element with focus and CSS, native maps to platform touchables and accessibility traits. API parity vs platform-specific implementation.
Breaking token changes across multiple themes
A change is safe if every theme still satisfies the token's contract and contrast; dangerous if it breaks one theme, like a value that fails contrast in high-contrast mode. Token change safety under multi-theme.
Backporting a critical fix to an older major
Backport the fix to the supported older major as a patch, leveraging a documented support window and maintenance branches. Maintenance branch and backport strategy.
Contribution model for a multi-framework system
Web Components core with thin React and Vue wrappers, shared tokens and spec, contribution rules requiring core-plus-wrapper changes, conformance tests. Multi-framework architecture and process.
Automating design system standards enforcement
Custom ESLint and Stylelint rules for tokens and APIs, a11y testing with axe, editor and pre-commit hooks, blocking CI gates plus visual regression. Shift-left enforcement tooling.
Managing cross-framework parity in a design system
Shared token and spec source of truth, optional Web Components core, per-framework wrappers, a parity matrix, coordinated releases. Cross-framework parity strategy.
Architecting decoupled but linked Tabs components
A Tabs context provider holds active state, TabList and TabPanel consume it anywhere inside the provider. Compound components and shared state across the tree.
Responsive Tabs with one consistent API
One stable public API (items, value, onChange), internal swap of presentation by breakpoint, and shared selection state. adaptive component design. exposing two different APIs or duplicating state logic per mode.
Pixel-identical modals across platforms
Raise back-button and gesture behavior, safe areas and keyboard insets, native dismiss patterns, and accessibility differences. knowing platform UX conventions. agreeing to pixel-identical without flagging native expectations.
Shadow DOM accessibility: focus and cross-boundary ARIA
IDREF ARIA can't cross the shadow boundary, so aria-labelledby and aria-activedescendant break; delegatesFocus and ElementInternals/ARIAMixin help. Shadow DOM a11y limits. assuming ARIA id references work across shadow roots.
Adapting CSS for Forced Colors Mode
Use semantic HTML and system color keywords, the forced-colors media query, forced-color-adjust sparingly. supporting forced-colors accessibility. ignoring it, or assuming background images and box-shadows still convey state.
Accessible toasts with ARIA live regions
A persistent live region, polite vs assertive by urgency, role status or alert, content injected after mount. announcing dynamic content without moving focus. moving focus to the toast or creating the region at announce time.
Enforcing an accessible name on icon-only buttons
Require aria-label via the type system for icon-only variants, warn at runtime, decorate the icon as aria-hidden. API design that guarantees an accessible name. trusting developers to remember a label on icon buttons.
ARIA roles and keyboard nav for a Tabs component
Tablist, tab, tabpanel roles with aria-selected and aria-controls; arrow keys move tabs, Tab moves to the panel via roving tabindex. the tabs ARIA pattern. making every tab a Tab stop or omitting aria-selected.
Enforcing WCAG color contrast programmatically
Pre-validate token pairs, expose only safe semantic combos, lint and test contrast in CI. preventing failing color pairings by design. trusting developers to eyeball contrast manually.
Managing keyboard focus in an accessible Modal
Move focus in on open, trap Tab inside, close on Escape, restore focus to the trigger on close. focus management for dialogs. leaving focus behind the modal so Tab escapes to the page.
Designing a Modal with controlled open state
Parent owns isOpen and onClose, portal renders content with focus trap, children for static content, render prop when content needs modal state. controlled state plus content injection.
Headless components and a headless Combobox
A headless component owns state, logic, and accessibility but renders no UI, exposing state and prop-getters so consumers supply markup. separating behavior from presentation.
Fixing brand color contrast at the system level
Build a tonal palette with known contrast steps, define semantic text-on-surface token pairs that pass AA, and enforce with automated contrast checks. systemic accessibility thinking.
Get Accessibility bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.