Accessibility


John Alexis Guerra Gómez

Based on Google Web Fundamentals Guide


Slides:http://johnguerra.co/lectures/webDevelopment_fall2022/09_Accessibility/

Class page:http://johnguerra.co/classes/webDevelopment_fall_2022/

Readings discussion

  • questions?

Web Accessibility

or the very basics of it

Create affordances to help people with disabilities.

Which dissabilities?

We all have dissabilities!

  • Situational, Temporary, Permanent
  • Visual, motor, hearing, and cognitive

Standards

Web Content Accessibility Guidelines (WCAG) 2.0 WebAIM (Web Accessibility in Mind) checklist

Focus

An user should be able to use the site with the keyboard (rubric)

Exercise

Airline site mockup page

Focus in React

Send the focus to the right element after mounting

useEffect or ComponentDidMount

DOM order matters

Make sure your html elements are in the semantic order (rubric)

Tabindex

  • Use it for specific behaviour
  • Avoid it on headers and content elements

Offscreen elements

Shouldn't be focusable

Keyboard traps

A component that captures the tab behaviour

Modals

  • Esc closes
  • Tab changes options
  • On close change focus back

Semantics

Order

  • Use h1, h2, h3 to manage hierarchy
  • DOM order matters

Alt text

  • All images should have an alt text
  • Decoration images should use alt\=\""

Form controls

  • Use standard elements
  • Use
    <label><input(type="text")></label>

Aria roles

ARIA spec
Google's guide

Use standard HTML elements!

Tools

Screen readers

Validators