Skip to main content

Accessibility (A11y) Interview Preparation

10+ questions covering WCAG, keyboard navigation, screen readers, and accessibility testing

Master web accessibility from fundamentals to advanced patterns. Essential for inclusive web development.

Topics​

FileTopicsDifficulty
WCAG FundamentalsWCAG guidelines, POUR principles, conformance levels🟡
Keyboard NavigationFocus management, keyboard shortcuts, tab order🟡
Screen Readers BasicsARIA, semantic HTML, screen reader testing🟡 🔴
Testing ToolsAutomated testing, manual testing, accessibility audits🟡
ARIA RolesLandmark roles, widget roles, when to use ARIA🟡
ARIA Propertiesaria-label, aria-labelledby, aria-describedby🟡
ARIA Statesaria-expanded, aria-hidden, aria-disabled, dynamic updates🟡
Accessible NamesAccessible name computation, priority order🔴
Alt Text for ImagesDecorative vs informative images, complex scenarios🟢
Color ContrastWCAG AA/AAA ratios, contrast calculation, testing🟡
Focus ManagementFocus traps, skip links, focus restoration🟡
Focus Visible:focus-visible, custom focus indicators🟢
Form AccessibilityLabels, fieldsets, error handling, custom controls🟡
Landmark RegionsHTML5 landmarks, semantic structure🟢
ARIA Live Regionsaria-live, polite vs assertive, dynamic content🟡
Modal AccessibilityFocus traps, aria-modal, keyboard interaction🔴
Reduced Motionprefers-reduced-motion, vestibular disorders🟢

Most Frequently Asked​

  1. WCAG Levels - A, AA, AAA conformance (⭐⭐⭐⭐⭐)
  2. ARIA Attributes - When and how to use (⭐⭐⭐⭐⭐)
  3. Keyboard Navigation - Focus management (⭐⭐⭐⭐)
  4. Screen Reader Testing - NVDA, JAWS, VoiceOver (⭐⭐⭐⭐)
  5. Semantic HTML - Importance for accessibility (⭐⭐⭐⭐)

Key Concepts​

POUR Principles​

P - Perceivable
  - Text alternatives for images
  - Captions for videos
  - Adaptable content

O - Operable
  - Keyboard accessible
  - Enough time to interact
  - No seizure-inducing content

U - Understandable
  - Readable text
  - Predictable navigation
  - Input assistance

R - Robust
  - Compatible with assistive tech
  - Valid HTML
  - Progressive enhancement

WCAG Conformance Levels​

  • Level A — Minimum accessibility (basic)
  • Level AA — Target for most sites (recommended, legal requirement in many countries)
  • Level AAA — Enhanced accessibility (ideal for healthcare, government)

Common ARIA Roles​

  • role="button" — Interactive button
  • role="navigation" — Navigation landmark
  • role="dialog" — Modal dialog
  • role="alert" — Important message
  • role="tablist" — Tab interface

Do's and Don'ts​

DO's ✅​

  • Use semantic HTML first
  • Provide text alternatives for images
  • Ensure keyboard navigation works
  • Manage focus properly
  • Test with screen readers
  • Use sufficient color contrast (4.5:1 minimum)
  • Label all form inputs
  • Provide skip links
  • Use ARIA when HTML isn't enough

DON'Ts ❌​

  • Use divs for interactive elements
  • Rely only on color to convey information
  • Skip keyboard testing
  • Remove focus outlines without replacement
  • Overuse ARIA
  • Ignore form labels
  • Forget alt text
  • Disable zoom

Tools​

Testing​

  • axe DevTools — Browser extension for accessibility testing
  • WAVE — Web accessibility evaluation tool
  • Lighthouse — Accessibility audits in Chrome
  • Pa11y — Automated CLI accessibility testing

Screen Readers​

  • NVDA — Free Windows screen reader
  • JAWS — Popular Windows screen reader
  • VoiceOver — macOS/iOS screen reader
  • TalkBack — Android screen reader

Testing Libraries​

  • jest-axe — Jest matcher for accessibility testing
  • @testing-library/react — Encourages accessible queries
  • cypress-axe — Cypress accessibility testing

Resources​

Content from Frontend-Master-Prep-Series — 08-accessibility