Accessibility
134 bites tagged Accessibility: interview questions with model answers, and 60-second explainers.
Test yourself: Top 30 Accessibility interview questions →Multiple choice, with the correct answer and why it is correct on every question. Free, no sign-in.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.
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.
Make a complex component accessible by design
Define keyboard model and focus order, map to ARIA roles and states, and document interactions for engineers.
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.
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…
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.
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.
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.
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.
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.
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.
Architecting decoupled but linked Tabs components
A Tabs context provider holds active state, TabList and TabPanel consume it anywhere inside the provider.
Responsive Tabs with one consistent API
One stable public API (items, value, onChange), internal swap of presentation by breakpoint, and shared selection state.
Pixel-identical modals across platforms
Raise back-button and gesture behavior, safe areas and keyboard insets, native dismiss patterns, and accessibility differences.
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.
Adapting CSS for Forced Colors Mode
Use semantic HTML and system color keywords, the forced-colors media query, forced-color-adjust sparingly.
Accessible toasts with ARIA live regions
A persistent live region, polite vs assertive by urgency, role status or alert, content injected after mount.
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.
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.
Enforcing WCAG color contrast programmatically
Pre-validate token pairs, expose only safe semantic combos, lint and test contrast in CI.
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.
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.
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.
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.
Get Accessibility bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.