Accessibility
134 bites tagged Accessibility — interview questions with model answers, and 60-second explainers.
Structuring docs for multiple audiences
Layer docs by audience, give developers API and code, designers usage and design guidelines, PMs principles and coverage, with shared foundations like tokens and accessibility. audience-aware documentation strategy.
Clickable card: div onClick versus anchor tag
Use an a tag for navigation; it is focusable, keyboard-activatable, announced as a link, and supports open-in-new-tab; a div onClick loses all of that without manual ARIA work. semantic HTML and accessibility judgment.
Why Oklch beats HSL for color variations
HSL lightness is not perceptually uniform so equal steps look uneven, Oklch keeps perceived lightness consistent across hues, giving predictable hover and palette scales. knowledge of perceptual color spaces.
Documenting a single UI component
Purpose and when to use, a props API table, live examples of variants and states, accessibility notes, and do and don't guidance. Knowing what good component docs contain. documenting only the prop list with no usage guidance.
Respecting prefers-reduced-motion in a design system
Gate CSS animations behind the media query, read the same preference in JS via matchMedia, and centralize motion tokens. Building motion accessibility into system architecture. killing all motion instead of reducing it.
Building an accessible combobox with ARIA
Input has role combobox with aria-expanded and aria-controls, listbox holds options, and choose aria-activedescendant to keep focus in the input versus roving DOM focus. Combobox ARIA wiring and focus strategy.
Announcing status messages with ARIA live regions
Use a live region with aria-live polite or role status, ensure it exists in the DOM beforehand, and insert text to trigger announcement. Announcing dynamic updates without stealing focus. moving focus to the message.
ARIA roles for an accessible tab interface
Tablist contains tabs, each tab uses aria-selected and aria-controls, panels use role tabpanel with aria-labelledby, and arrow keys move between tabs. Correct ARIA wiring for tabs. making every tab a Tab stop.
Managing focus in an accessible modal dialog
Move focus in on open, trap Tab within the dialog, close on Escape, and restore focus to the trigger on close. Keyboard focus management for modal dialogs. leaving focus behind the modal in the background.
Associating a label with a form input
Explicit association via for and id, implicit by wrapping the input, and why this gives screen readers an accessible name and larger click target. Foundational accessibility for forms. using a placeholder as the label.
Accessible composite TextField component
Associate label and input via matching for and id, generate a unique id, spread remaining props onto the native input. accessible composition and prop forwarding. a label not tied to the input, or swallowing native props.
Reusable Button with hover, focus, disabled
Use a real <button>, style :hover, a visible :focus-visible ring, and the [disabled] attribute that also blocks interaction. semantic, accessible button states. a clickable <div> or removing focus outlines.
Accessibility built into a Modal component
Trap focus in the modal, return focus on close, escape to dismiss, role dialog with aria-modal and a labelled title, inert background. baking a11y into components. leaving a11y to consumers or only adding role=dialog.
Roll out a design system color change
Update the token source, rebuild outputs, version and publish, bump the app's dependency, verify contrast and visual regressions. end-to-end change management. editing the hex in components or shipping unversioned.
Locating XCUITest elements without accessibility identifiers
Query by type, label, predicate, or index; chain queries to narrow scope. navigating the element query hierarchy. relying on brittle absolute indices or visible label text that breaks under localization and layout changes.
Documentation for a new Card component
Usage guidance and do/don't, variants, accessibility, code examples, composition. complete component docs, not just an API table. shipping only a props table with no when-to-use, accessibility, or examples.
Linking form-component adoption to fewer a11y bugs
Define both variables, segment by adoption level, control confounders, watch correlation-versus-causation. designing a sound measurement, not just claiming impact.
Critical a11y fix requiring a breaking API change
Ship a safe interim fix, plan the breaking API as a major with deprecation and codemod, communicate urgency. balancing urgent accessibility risk against breaking-change discipline.
Governance for accessibility regressions
Detection via audits and monitoring, triage with severity and ownership, remediation SLAs, prevention feedback. a repeatable a11y governance loop across consuming products.
Automated a11y testing in CI and its limits
Axe-core in unit and story tests, fail the build on violations, plus manual screen-reader and keyboard testing. building a11y checks into CI while knowing their ceiling.
Documenting accessibility per component
Per-component a11y sections, keyboard tables, ARIA roles and states, live examples. making accessibility actionable, not a generic page. one global accessibility page with no component-specific keyboard or ARIA detail.
Nuxt 4.4 Adds Custom Fetch Factories and Router v5
Nuxt 4.4 ships createUseFetch factories, Vue Router v5, and 28x faster dev route updates. Custom fetch instances with typed defaults cut API boilerplate, while the router upgrade drops unplugin-vue-router and clears the path for stable typed routes.
Angular v22 stabilizes Signal Forms, Aria, Asynchronous Reactivity APIs
Angular v22 promotes Signal Forms, Angular Aria, and Asynchronous Reactivity APIs from developer preview to production-ready status, giving teams stable primitives for reactive forms, accessibility, and async signals without experimental guardrails.
Fix keyboard trap in a custom modal dialog
Tests accessible modal focus management. Strong answers: role="dialog" and aria-modal="true", move focus on open, trap Tab/Shift+Tab cycles inside, Escape to close, return focus to trigger. Red flag: CSS-only fixes or aria-hidden without JS focus control.
Get Accessibility bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.