Accessibility

Slides :

frama.link/talk-a11y

Code repository :

frama.link/repo-a11y

(a11y)

And how to build accessible components

Slides :

Who am I ?

@KeziahMoselle

Front-end Developer

@ HOME

What are we going to learn ?

What is Accessibility ?

An introduction to ARIA

Create accessible components

Bonus (quick tips)

What is Accessibility ?

ANYONE

with ANYTHING

"Accessibility is about people.
Accessibility is about including and protecting people in minoritized groups."

- Lindsey Kopacz

WCAG recommendations

Web Content Accessibility Guidelines

https://www.w3.org/WAI/standards-guidelines/wcag/

4 Principles

Perceivable

Operable

Understandable

Robust

3 levels of compliance

A (Essential)

AA (Ideal)

AAA (High-level)

HTML is used to construct the DOM tree and the accessibility tree is based on the DOM, then an assistive technology can use this tree to help the user

Accessibility Tree

Image source:

https://wicg.github.io/aom/explainer.html

Bare minimum

Color contrast

Do not remove :focus outline

Images [alt] needs to be descriptive

Add labels to inputs

DOM order matters

An introduction to

ARIA

Accessible Rich Internet Applications

Introduction

Context

User

ARIA

Extra

informations

Rule #1

Avoid ARIA if possible

Prefer semantic HTML

Non semantic HTML is too much work !

Do I need ARIA ?

Illustration of the problem

<div
  id="saveChanges" 
  tabindex="0"
  role="button"
 >
   Save
</div>
<button id="saveChanges">
  Save
</button>

A button made with ARIA

A button

ARIA Roles

Categories

  • Widgets (tab)
  • Composite (tablist)
  • Structure (list)
  • Landmark (banner)
  • Live region (status)
  • Window (dialog)

States

Properties

Example

role="button"

aria-pressed

aria-expanded

aria-label

aria-labelledby

...

Associated states

Associated properties

ARIA

States and properties

States

Properties

aria-relevant

aria-readonly

aria-labelledby

...

aria-checked

aria-expanded

aria-hidden

...

Common Patterns

Accessible components

BONUS

(quick tips)

ARIA-LIVE

Skip navigation

<!-- This will skip the <nav> and go to the main content -->
<a class="visually-hidden" href="#main">
  Skip to main content
</a>

<nav role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>

<main id="main" role="main">
  <!-- page specific content -->
</main>

.visually-hidden

<a class="visually-hidden" href="#main">
  Skip to main content
</a>
/* Old way */
.visually-hidden {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
 }
/* Modern way */
.visually-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

https://webaim.org/techniques/css/invisiblecontent/

MEDIA QUERY

prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  button {
    animation: akeyframe 0.3s;
  }
}

prefers-contrast, prefers-reduced-transparency,

prefers-color-scheme

MEDIA QUERY

Programmatically

window.matchMedia('(prefers-reduced-motion: reduce)')

/*
{
  media: "(prefers-reduced-motion: reduce)"
  matches: false
  onchange: null
}
*/

Reduced motion example

Ressources

https://a11yproject.com/

https://a11ywithlindsey.com/

https://developers.google.com/web/fundamentals/accessibility

https://w3.org/TR/wai-aria-1.1/

Tools

https://wave.webaim.org/

https://a11ysupport.io/

https://trace.umd.edu/peat

Icons:

https://thenounproject.com/

Thank you !

Slides :

frama.link/talk-a11y

Repository :

frama.link/repo-a11y

@KeziahMoselle - @VueStrasbourg

Slides :

Questions ?

Made with Slides.com