Accessibility (A11y)

Accessibility ... in web development means enabling as many people as possible to use websites, even when those people's abilities are limited in some way.

Why do this?

  • More potential customers
  • It's the law
  • It makes me feel like a good person
  • It makes me feel better than other people who don't

These don't really work to get people to care about A11y

Why many don't do this?

  • It's hard
  • Potential new customers not worth the extra effort or not our market
    • Our customers don't use/do <insert thing you're trying to excuse>
    • There's not enough disabled people to justify the time and cost
  • We're unlikely to get sued because of it (pause for scoffing sound from Grant or Dallin)

Why we actually should care about Accessibility

People's abilities can vary situationally

The more we intermingle our professional lives with our personal lives, the more our immeidate circumstance may call for assitive technologies.

The more intelligent our technologies become, the more semantic associations in our pages become valuable.

YOU often utililize accessibility features

  • When you use tab to go to the next form field
  • When you ask Siri/AI to summarize or read a web page
  • When you switch between device types while completing a task
  • When you explain to your grandparents where to look on the screen for the right button.

We should make every web application accessible because WE need it to be accessible.

And so do our customers.

(whether disabled or not)

  • One person can't use the mouse because they have motor disabilities
  • Another can't use the mouse because they're on a phone
  • Yet another is a power user and would prefer not to keep switching between mouse and keyboard
  • One person can't see the screen because they're blind
  • Another can't because they just got eye surgery
  • A third can't because they are driving or out for a run
  • One person needs subtitles because they are deaf
  • Another needs them because they don't speak the language
  • Still another needs them because they are watching in a noisey environment

How do we get better at Accessibility?

  • Testing Library
  • Eslint A11y rules

Use tools that enforce their use.

How do we get better at Accessibility?

  • Keyboard only days
  • Screen reader only days

Time dedicated to using our products in specific ways.

ARIA Attributes

Accessible Rich Internet Applications

An additional layer of semantics

Rules of ARIA

  1. If you can use a native HTML element or attribute with the semantics and behavior... then do so. (Don't use ARIA)
  2. Do not change native semantics.
  3. All interactive ARIA controls must be usable with the keyboard.
  4. Do not use role="presentation" or aria-hidden="true" on a focusable element.
  5. All interactive elements must have an accessible name.

Don't use ARIA

Rule 1

Don't do this:

<div role="button" onClick="handleClick">Click me! I'm a button!</div>

Do this instead

<button onClick="handleClick">Click me! I'm ataully a button!</button>

Do not change native semantics

Rule 2

Don't do this:

<h2 role=tab>heading tab</h2>

Do this instead

<div role=tab>
  <h2>heading tab</h2>
</div>

All interactive ARIA controls must be  keyboard usable.

Rule 3

Don't do this:

<div role="button" onClick={handleClick}>Click me!</div>

Do this instead

<div 
  role="button"
  onClick={handleClick}
  onKeyDown={handleKeyDown}
  tabindex="0"
 >
   Click me!
 </div>

Do not use role="presentation" or aria-hidden="true" on a focusable element

Don't do this:

<button role=presentation>press me</button>
<button aria-hidden="true">press me</button>

Do this instead

button {opacity:0}
<button tabindex="-1" aria-hidden="true">press me</button>


button {display: none}
<button>press me</button>

Rule 4

All interactive elements must have an accessible name.

Don't do this:

<span>user name</span> <input type="text">

Do this instead

<label>
  <span>user name</span> 
  <input type="text">
</label>

<span>user name</span> <input type="text" aria-label="user name">

<span id="input-name">user name</span> <input type="text" aria-labeledby="input-name">

Rule 5

Visualizing our web pages the way assistive technologies do

Introducing the Accessibility tab in Dev Tools

Accessibility Tree

  • Contextualizing elements with withIn 
cy.findByRole('region', { name: 'Support'}).withIn(() => {
  cy.findByRole('link', { name: 'use semantic HTML elements' });
})

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA#support

ARIA Attributes

  • Overrides and augmentations
  • Can compose lables
<input 
  aria-labelledby="labelShutdown shutdownTime shutdownUnit" 
  type="checkbox"
>

<span id="labelShutdown">Shut down computer after</span>

<input 
  aria-labelledby="labelShutdown shutdownTime shutdownUnit" 
  id="shutdownTime" 
  type="text" 
  value="10"
>

<span id="shutdownUnit"> minutes</span>

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Multipart_labels#example

Computed Properties

  • What does this element mean?
  • How is it referred to?
cy.findByRole('link', { name: 'Click me!' })


<a href="http://aumni.fund">Click me!</a>

accessible name

role

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Multipart_labels#example