♿ Web Accessibility

A11y = Accessibility (a + 11 letters + y)

Making websites usable by:
  - Blind users (screen readers)
  - Deaf users (captions)
  - Motor impaired (keyboard navigation)
  - Cognitive differences (clear content)
  - Temporary disabilities (arm injury)
  - Situational (bright sun, loud room)

15% of population has some disability.
Everyone deserves equal access.

Many countries have laws:
  - ADA (USA)
  - EAA (Europe)
  - Accessibility laws (Australia, UK, etc.)

Inaccessible sites face lawsuits.

Captions: Deaf users, noisy environments
Large text: Low vision, small screens
Keyboard nav: Motor impaired, power users
Clear content: Cognitive, second language

Search engines are like blind users.
Can't see images.
Need text alternatives.

Accessible = Better SEO.

WCAG = Web Content Accessibility Guidelines

Four principles: POUR

Perceivable:    Can users perceive the content?
Operable:       Can users navigate and interact?
Understandable: Can users understand the content?
Robust:         Does it work with assistive tech?

A:   Minimum (basic access)
AA:  Standard (most requirements)
AAA: Maximum (best possible)

Target AA usually. AAA where practical.

Screen readers can't see images.
Alt text describes them.

Good:
  <img alt="Golden retriever playing fetch in a park">

Bad:
  <img alt="image">
  <img alt=""> (unless decorative)

Be descriptive but concise.

Use elements for their meaning:

✓ <nav> for navigation
✓ <main> for main content
✓ <button> for buttons
✓ <h1>, <h2> for headings

✗ <div onclick> instead of <button>
✗ Making everything a <div>

Semantic HTML is inherently accessible.

Many users can't use a mouse.
Everything must work with keyboard.

Tab: Move between elements
Enter/Space: Activate buttons
Arrow keys: Navigate menus

Focus indicators must be visible!

Light gray text on white? Hard to read.

WCAG requirements:
  Normal text: 4.5:1 contrast ratio
  Large text: 3:1 contrast ratio

Use contrast checker tools.

Every input needs a label.

✓ <label for="email">Email</label>
  <input id="email" type="email">

✗ <input placeholder="Enter email">
  (Placeholder is not a label!)

ARIA = Accessible Rich Internet Applications

Adds semantics when HTML isn't enough.

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

<button> is better than
<div role="button" tabindex="0" ...>

role:            What is this element?
aria-label:      Label for screen reader
aria-hidden:     Hide from screen readers
aria-expanded:   Is dropdown open?
aria-live:       Announce dynamic content

axe DevTools (browser extension)
Lighthouse (Chrome DevTools)
WAVE (web tool)

Find many issues automatically.
But can't catch everything!

1. Tab through the page
   Can you reach everything?
   Is focus visible?

2. Use screen reader
   Does it make sense?
   VoiceOver (Mac), NVDA (Windows)

3. Zoom to 200%
   Does content still work?

4. Disable CSS
   Is content still readable?

Image with no alt = Invisible to screen readers.
Or worse: File name read aloud.

Usually provide meaningful alt text.
Decorative images: alt=""

"It looks fine to me!"

Use tools to check.
Don't rely only on color.

User tabs into modal.
Can't tab out!

Ensure keyboard users can escape.

<div> and <span> for everything.
No meaning to assistive tech.

Use proper elements: <nav>, <button>, <h1>, etc.

outline: none; ← DON'T DO THIS

Keyboard users need to see focus.
Style it, don't remove it.

✓ Add alt text to images
✓ Use semantic HTML
✓ Ensure color contrast (4.5:1)
✓ Make forms accessible (labels)
✓ Test with keyboard
✓ Don't remove focus styles
✓ Add skip links
✓ Caption videos