Accessibility
134 bites tagged Accessibility — interview questions with model answers, and 60-second explainers.
Which ARIA attribute fixes an icon-only button missing its screen reader name?
Tests knowledge of accessible names for interactive elements lacking visible text. Answer: aria-label on the button describing its function, plus aria-hidden on the decorative icon. Red flag: suggesting alt text on the SVG or title attributes as the fix.
How do you architect an automated performance and accessibility testing pipeline?
This tests operationalizing quality gates via automation, not manual checks. A strong answer covers Lighthouse CI in CI/CD, fail thresholds for CWV and WCAG, and a triage workflow assigning regressions to owners.
Screen Reader Testing: Navigate UI Without Sight
Screen reader testing reveals gaps visual checks miss by turning your UI into audio. Run real tasks with only a keyboard and screen reader, checking headings and focus order. The footgun is treating axe passes as equivalent to a human listening through a flow.
Accessibility Heuristic Evaluation
Accessibility heuristics spot keyboard traps and missing labels like a code audit for access. Use them in early reviews if disabled users are weeks away. The footgun is treating a clean score as proof, since only real users validate true usability.
Threat Modeling UX Research for Vulnerable Populations
Research with vulnerable populations is threat modeling: standard methods can harm people with diminished autonomy or trauma. Use these guardrails for disabilities, low literacy, or desperation. Never treat a signed consent form as proof of understanding.
Inclusive Design
Inclusive design reframes disability as a mismatch between user needs and design. Use it where ability, language, culture, gender, or age create barriers. Never treat it as a disability checklist; it is a methodology for diverse needs.
8 Free Personas Spot Accessibility Issues in Design
8 free accessibility personas shift designer burden from memorizing WCAG to recognizing exclusion during work. Applying Nielsen's heuristic #6 to creators means fewer bad websites from good designers. Add them to your design critiques this sprint.
How would you implement a high contrast mode theme in Figma?
Tests token architecture and non-text contrast beyond color swaps. Strong answers use Figma variable modes, cover icon inversion, focus ring specs, define image treatments. Red flag: calling it palette inversion without citing 3:1 contrast or focus specs.
How would you generate a functional palette from one brand color?
Tests systematic color scaling and accessibility. Strong answers use HSL/LCH lightness stops, enforce 4.5:1 text contrast, build 50-900 surface weights, and derive semantic hues independently. Red flag: manual hex tweaks without contrast checks.
How would you create a dismissible modal dialog over the current screen?
This tests modal architecture beyond visuals. A strong answer covers: dimming the inert background, trapping focus, returning focus on close, and supporting Escape plus a visible close button.
How would you automatically audit WCAG AA contrast in Figma?
This tests Figma plugin vs REST API color extraction limits. Good answers contrast live traversal with export-based analysis, cite WCAG AA ratios of 4.5:1 and 3:1, and note opacity. A red flag is assuming the REST API can sample pixels without image export.
How do you indicate sort state accessibly in a data table?
Use shape-differentiated icons, annotate aria-sort on the active header, and maximize the button click target. Communicating sort state without relying on color alone.
How do you enforce WCAG touch target minimums in Figma?
Tests WCAG 2.2 SC 2.5.8 and design-system governance. A strong answer cites the 24x24 CSS pixel minimum and spacing exception, then covers Figma component constraints and linting. A red flag is dumping accessibility on developers without design guardrails.
Design the keyboard interaction flow for a modal dialog
Your grasp of accessible focus management per WAI-ARIA dialog patterns. Cover initial focus rules, Tab trapping inside the modal, Escape to close, and restoring focus to the trigger on exit.
Minimum WCAG AA contrast for normal vs large text and Figma checks
This tests WCAG AA contrast thresholds and Figma operationalization. A strong answer states 4.5:1 for normal text and 3:1 for large text, then describes using Figma's native contrast panel or Stark to audit color pairs.
What is the accessibility problem with color-only status and two fixes?
This tests WCAG 1.4.1 Use of Color: red-green status is invisible to many colorblind users. A strong answer names two non-color cues like icons or text labels. A red flag is claiming high contrast alone fixes the problem without a secondary visual indicator.
Assess WCAG AA contrast for light grey text on off-white
Tests your fluency in WCAG relative luminance and design collaboration. A strong answer extracts sRGB values, computes contrast ratio, checks 4.5:1 or 3:1 by text size, and suggests a darker tint preserving hue.
Line-height vs letter-spacing: impact on readability and values for body vs headings
This tests whether you distinguish vertical rhythm from horizontal glyph spacing. A strong answer sets body line-height to at least 1.5x per WCAG with minimal tracking, while headings use tighter line-height and tighter tracking. Red flag: identical values.
How does affordance guide choosing a native button over a styled div?
This tests if you see affordance as built-in behavior, not only looks. A strong answer picks the native button for free keyboard, focus, and reader support, noting a div needs tabindex, role, and keydown logic. A red flag is treating it as purely visual.
How do you ensure a complex form is fully accessible?
Pair labels to inputs, move focus to first error on submit, and link aria-invalid to aria-describedby. Mastery of semantic HTML, focus control, and ARIA for validation.
What NFRs would you identify for a globally scalable, accessible service?
Tests decomposing vision into architecturally significant requirements. A strong answer pairs global with latency, residency, and failover; accessible with compliance and i18n; then prioritizes by impact.
What WAI-ARIA attributes and keyboard interactions make Tabs accessible?
This tests mastery of the W3C Tabs pattern. A strong answer covers role tablist tab tabpanel, aria-selected, aria-controls, and arrow-key roving focus with optional auto-activation. A red flag is treating tabs as buttons and relying only on the Tab key.
Implement a typographic scale using design tokens and accessible properties
Token-driven typography and accessibility. Start with base size (14-16px) and ratio token, compute sizes, then bundle font-size with line-height, letter-spacing, weight, and family in composite tokens. Red flag: ignoring line-height, spacing, or composites.
Map Components to Native Platform Equivalents
Map design system components to native OS equivalents instead of forcing identical custom widgets everywhere. Use this when cross-platform apps must respect platform conventions.
Get Accessibility bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.