<AccessibleCSSinJS />

Maya Shavin

@mayashavin

Senior Software Engineer

@mayashavin

In this talk

✨ A quick recap of accessibility
😰 Challenges & Solutions
✅ Tools
🚀 Developing an accessible mindset

@mayashavin

Accessibility.com - Website Accessibility Lawsuits Recap 2021

@mayashavin

What is accessibility?

@mayashavin

See

🦻

Hear

Understand

⌨️

Use/Navigation

@mayashavin

See

🦻

Hear

Understand

⌨️

Use/Navigation

Standards

@mayashavin

Web Content Accessibility Guidelines

Perceivable

Operable

Understandable

Robust

@mayashavin

WCAG 2.1

A

AA

AAA

Web content
Assist Technologies (WAI-ARIA)
Web technology (Flash, video, audio)
Visually impaired
Cognitive disorders

WCAG Overview

@mayashavin

Accessibility is HARD

Accessibility in React is HARD

Accessibility in React is COMPLEX

But NOT hard!

Accessibility is COMPLEX

@mayashavin

Accessibility in components

With or without CSS-in-JS

@mayashavin

Semantic HTML Tags

Focus management

Screen Reader support (WAI-ARIA etc)

Dynamic Content

Accessibility in components

Magnification support (200%, 400%)

@mayashavin

Using Sematic HTML Tags

Landmarks/Regions

& Headings

table

h1-h7

article

header

footer

nav

dialog

button

input

@mayashavin

@mayashavin

JS

CSS

Parse CSS

Inject to Stylesheet

stylesheet.insertRule

Browser

HTML Paint

load

download

✅ Keep the heading order structure (h1 - h7)

✅ Use CSS order to re-arrange the appearance

Designer's guides to documenting accessibility UI

@mayashavin

Focus management

Order of focus?
Auto-focus ?
Keyboard navigation flow ?

Think logical
Use refs, DOM API (.focus())
Use tabIndex, order

@mayashavin

Screen Reader support (WAI-ARIA)

WAI-ARIA_basics

<button
    aria-label="Place an order"
>
    Order
</button>

<button
    aria-label="Place order button"
>
    Order
</div>

✅

Place an order, button

❌

Place order button, button

@mayashavin

aria-label vs aria-labelledby

<dialog role="dialog" aria-label="Sample Modal">
  <header>
    <h2 id="header-title">
      Sample Modal
    </h2>
  </header>
  <main>
    <p id="description">
      This is the content
    </p>
  </main>
  <footer>
    <button aria-label="close dialog">
      Close
    </button>
  </footer>
</dialog>

<dialog role="dialog" aria-labelledby="header-title">
  <header>
    <h2 id="header-title">
      Sample Modal
    </h2>
  </header>
  <main>
    <p id="description">
      This is the content
    </p>
  </main>
  <footer>
    <button aria-label="close dialog">
      Close
    </button>
  </footer>
</dialog>

@mayashavin

<Badge>
  Item Two 
  <BadgeIcon 
    aria-label="Badge count 6"
    role="status" 
  >
    6
  </BadgeIcon>
</Badge>

@mayashavin

Item two, badge count 6

@mayashavin

✍️ Visible and understandable label

✅ Clear ARIA role when needed

👷‍♂️ Interactive value (aria-disabled, aria-selected, etc)

🗒️ Concise description as hints (don't use title)

Working with screen reader

3 out of 5 tasks completed

Add to list, button

@mayashavin

Dynamic content with aria-live & aria-atomic

@mayashavin

<Badge className="v-badge theme--dark">
  Item Two 
  <BadgeIcon 
    aria-atomic="true"
    aria-live="polite"
    aria-label="Badge count 6"
    role="status" 
  >
    6
  </BadgeIcon>
</Badge>

@mayashavin