Web Accessibility

Fundamentals

1

What is Web Accessibility (a11y)?

The practice of making websites usable by people with disabilities, including:

  • Visual: Blindness, low vision, color blindness
  • Auditory: Deafness, hard of hearing
  • Motor: Limited fine motor control, tremors
  • Cognitive: Learning disabilities, attention disorders

Why it matters:

  • Legal requirements (ADA, Section 508, EAA)
  • Larger audience (~15% of population has a disability)
  • Better UX for everyone
  • Improves SEO

What problems does this solve?

  • Establishes the fundamental ethos of inclusive engineering, ensuring digital products remain usable regardless of permanent, temporary, or situational disabilities.
2

What is WCAG?

Web Content Accessibility Guidelines — The international standard for web accessibility.

Levels:

  • Level A: Minimum accessibility (must have)
  • Level AA: Standard compliance (most laws require this)
  • Level AAA: Highest accessibility (ideal, not always achievable)

POUR principles:

  • Perceivable: Can users perceive the content?
  • Operable: Can users operate the interface?
  • Understandable: Can users understand the content?
  • Robust: Does it work with assistive technologies?

Current version: WCAG 2.2 (2023)

What problems does this solve?

  • Provides the objective, internationally recognized, legally binding benchmark used for measuring true accessibility compliance.
3

What is ARIA?

Accessible Rich Internet Applications — A set of attributes that enhance HTML semantics for assistive technologies.

First rule of ARIA: Don't use ARIA if native HTML works.

What problems does this solve?

  • Polyfills critical semantic meaning for complex, custom interactive widgets (like tabs or comboboxes) that simply have no native HTML equivalent.
4

What is the difference between aria-label, aria-labelledby, and aria-describedby?

AttributePurposeUse Case
aria-labelDirect text labelIcon-only buttons
aria-labelledbyReference to labeling elementComplex labels
aria-describedbyReference to descriptionHints, error messages

What problems does this solve?

  • Provides explicit syntactic mechanisms to programmatically attach visually hidden context strictly to interactive screen-reader elements.
5

What is the accessibility tree?

A simplified representation of the DOM that assistive technologies use.

The browser builds it from:

  • Native HTML semantics
  • ARIA attributes
  • Visible text content

DevTools: Chrome > Elements > Accessibility tab

What problems does this solve?

  • Exposes a highly simplified, semantic interpretation of the DOM directly to assistive technologies, stripping away irrelevant visual styling.

Semantic HTML

6

Why is Semantic HTML important for accessibility?

Native HTML elements have built-in accessibility:

  • Keyboard support
  • Screen reader announcements
  • Focus management
Non-SemanticSemantic
<div> with click<button>
<span> link<a href>
<div> navigation<nav>
<div> header<header>
<div> sections<main>, <section>, <article>

What problems does this solve?

  • Drastically reduces the need for fragile ARIA attributes by providing robust, native accessibility meaning directly out of the box.
7

What are landmark roles and regions?

Help screen reader users navigate page sections.

Screen reader users can jump between landmarks with keyboard shortcuts.

What problems does this solve?

  • Empowers screen reader users to rapidly navigate and bypass repetitive content blocks by structurally indexing the page layout.
8

How should headings be structured?

Headings create a document outline for screen reader navigation.

Rules:

  • One <h1> per page
  • Don't skip levels
  • Use headings for structure, not styling

What problems does this solve?

  • Creates a logical, navigable outline of the document architecture, preventing screen reader users from getting lost in flat text.
9

How do you make images accessible?

Screen reader only class:

What problems does this solve?

  • Ensures visually impaired users understand the crucial context or function of non-text graphical elements.
10

How do you make forms accessible?

What problems does this solve?

  • Guarantees that interactive inputs are programmatically associated with exactly what data they represent.

Keyboard Navigation

11

What is keyboard accessibility?

All functionality must be operable via keyboard alone.

Common keys:

KeyAction
TabMove to next focusable element
Shift + TabMove to previous element
EnterActivate buttons/links
SpaceActivate buttons, toggle checkboxes
Arrow keysNavigate within components
EscapeClose modals, cancel

Focusable elements: Links, buttons, inputs, selects, textareas, elements with tabindex

What problems does this solve?

  • Ensures that power users and those incapable of using a mouse can navigate and trigger every single interactive element cleanly.
12

What is tabindex and how do you use it?

Controls keyboard focus order.

Rules:

  • 0 = natural order (based on DOM position)
  • -1 = programmatic focus only
  • Positive values = avoid (anti-pattern)

What problems does this solve?

  • Controls the sequential programmatic focus order of elements, allowing custom widgets to seamlessly participate in the natural keyboard flow.
13

What is a focus trap?

Constraining focus within a component (like a modal).

Libraries: focus-trap, inert attribute

What problems does this solve?

  • Strictly prevents keyboard focus from accidentally escaping an active modal, which would otherwise leave screen reader users trapped in invisible background DOM.
14

What is a skip link?

A hidden link allowing keyboard users to skip repetitive content.

What problems does this solve?

  • Allows keyboard-only users to instantly bypass massive, repetitive navigation headers and jump directly to the primary content.
15

How do you make a custom component keyboard accessible?

Example: Custom dropdown

What problems does this solve?

  • Ensures complex, custom-built interactive widgets respond correctly to Enter, Space, and Arrow keys exactly like native HTML elements.

Screen Readers

16

How do screen readers work?

Screen readers convert visual content to speech or braille output.

Popular screen readers:

  • NVDA (Windows, free)
  • JAWS (Windows, paid)
  • VoiceOver (macOS/iOS, built-in)
  • TalkBack (Android, built-in)

They announce:

  • Element type (button, link, heading)
  • Element name/label
  • State (expanded, checked, disabled)
  • Instructions (e.g., "press Enter to activate")

What problems does this solve?

  • Highlights the profound difference between visual rendering and semantic-text vocalization.
17

What is a live region?

Announces dynamic content changes to screen readers.

Use for: Toast notifications, form errors, loading states, live updates.

What problems does this solve?

  • Announces critical dynamic asynchronous updates (like toast notifications or chat messages) to assistive technologies without instantly stealing focus.
18

How do you hide content from screen readers?

MethodVisualScreen Reader
display: noneHiddenHidden
visibility: hiddenHiddenHidden
aria-hidden="true"VisibleHidden
.sr-only classHiddenAnnounced

What problems does this solve?

  • Surgically removes visually-relevant but acoustically-redundant decorator elements from the accessibility tree without breaking the physical layout.

Color & Visual

19

What are the color contrast requirements?

WCAG AA requirements:

  • Normal text: 4.5:1 contrast ratio
  • Large text (18px+ bold, 24px+ regular): 3:1 ratio
  • UI components: 3:1 ratio

WCAG AAA (enhanced):

  • Normal text: 7:1
  • Large text: 4.5:1

Tools to check:

  • Chrome DevTools (Inspect > Color picker)
  • WebAIM Contrast Checker
  • axe DevTools

What problems does this solve?

  • Guarantees text remains fundamentally readable for users with low vision, cataracts, or those viewing screens in direct sunlight.
20

How do you design for color blindness?

~8% of men and 0.5% of women have color vision deficiency.

Best practices:

  1. Don't rely on color alone
  1. Use patterns/icons alongside colors
  1. Test with simulators
    • Chrome DevTools > Rendering > Emulate vision deficiencies

What problems does this solve?

  • Ensures critical UI states (like error messages or success alerts) do not rely solely on hue to convey meaning.
21

How do you handle motion and animations accessibly?

Some users experience motion sickness or seizures.

WCAG requirements:

  • No flashing more than 3 times per second
  • Provide pause/stop for moving content
  • No auto-playing video with sound

What problems does this solve?

  • Respects vestibular disorders by providing mechanisms to disable nausea-inducing parallax or heavy UI motion.

Testing & Tools

22

How do you test for accessibility?

Automated testing (catches ~30% of issues):

  • axe DevTools (Chrome extension)
  • Lighthouse accessibility audit
  • eslint-plugin-jsx-a11y
  • Pa11y (CLI)

Manual testing:

  1. Keyboard only: Unplug mouse, Tab through page
  2. Screen reader: Test with NVDA/VoiceOver
  3. Zoom to 200%: Check layout doesn't break
  4. Color contrast: Use contrast checkers

User testing:

  • Include users with disabilities
  • Test with real assistive technology users

What problems does this solve?

  • Evaluates whether a developer actually understands how to systematically measure compliance using both automated tooling and manual screen reader testing.
23

What is axe and how do you use it?

axe is an accessibility testing engine by Deque.

Browser extension:

  1. Install axe DevTools
  2. Open DevTools > axe DevTools tab
  3. Click "Scan All"
  4. Review issues by impact (Critical → Serious → Moderate)

Automated testing:

What problems does this solve?

  • Integrates automated, deterministic accessibility linting directly into the continuous integration pipeline to catch low-hanging fruit early.
24

What are common accessibility issues?

IssueImpactFix
Missing alt textCriticalAdd descriptive alt
Missing form labelsCriticalAdd <label> elements
Low color contrastSeriousIncrease contrast ratio
Missing focus stylesSeriousAdd :focus styles
Missing lang attributeModerateAdd <html lang="en">
Missing page titleModerateAdd unique <title>
Non-descriptive linksModerateReplace "click here" with descriptive text
Missing skip linkModerateAdd skip navigation
Keyboard trapsCriticalFix focus management
Auto-playing mediaSeriousAdd pause controls

What problems does this solve?

  • Identifies the most frequent, easily preventable failure points in modern web development, such as missing alt text or poor contrast.

Components & Patterns

25

How do you make modals/dialogs accessible?

Requirements:

  1. ✅ Label with aria-labelledby
  2. ✅ aria-modal="true"
  3. ✅ Focus first interactive element on open
  4. ✅ Trap focus inside modal
  5. ✅ Close on Escape key
  6. ✅ Return focus to trigger on close
  7. ✅ Prevent background scrolling
  8. ✅ Announce content to screen readers

What problems does this solve?

  • Synthesizes multiple advanced accessibility concepts into a single complex component: focus trapping, ARIA roles, and keyboard event handling.
26

How do you make tabs accessible?

Keyboard:

  • Tab: Enter/exit tablist
  • Arrow Left/Right: Switch between tabs
  • Home/End: First/last tab

What problems does this solve?

  • Demonstrates mastery of ARIA roles (`tablist`, `tab`, `tabpanel`) and complex directional arrow-key navigation.
27

How do you make tables accessible?

Requirements:

  • Use <caption> or aria-label
  • Use <th> for headers with scope
  • Don't use tables for layout

What problems does this solve?

  • Ensures multi-dimensional data grids remain logically traversable and comprehensible when read linearly by a screen reader.
28

How do you make carousels accessible?

Requirements:

  • Pause on hover/focus
  • Visible pause button
  • Keyboard navigation
  • Announce slide changes

What problems does this solve?

  • Exposes the immense difficulty of making auto-advancing, hidden-content sliders usable without causing motion sickness or trapping keyboard focus.

Best Practices

29

What is progressive enhancement for accessibility?

Build core functionality that works for everyone, then enhance.

Principles:

  • Start with semantic HTML
  • Add CSS for visual enhancement
  • Add JS for interaction enhancement
  • Each layer is optional

What problems does this solve?

  • Ensures core functionality remains fundamentally usable even on ancient devices, unstable networks, or when JavaScript completely fails.
30

What is an accessibility statement?

A public declaration of accessibility commitment and status.

Should include:

  • Conformance level (WCAG 2.1 AA)
  • Known limitations
  • Contact for accessibility issues
  • Date of last assessment
  • Plans for improvement

What problems does this solve?

  • Publicly documents the organization’s ongoing commitment to inclusion, known limitations, and direct feedback channels for barriers.