Progress over perfection

Lee smiling in Gasworks park in Seattle clutching a coffee cup.

Hi! I'm Lee.

Pronouns: she/her

I am a UX Engineer who specializes in accessibility. I currently work at Olark and was at Salesforce and Twilio previously.

Agenda

Accessibility
Semantic HTML
ARIA
Next Steps

Accessibility

Accessiblity is about people

Technology is a critical way people interact with the world and this is no different for people with disabilities.

When we fail to write accessible code or design accessible user flows, we are excluding people.

Four disabled people of color with canes and prosthetic legs laugh while chatting. They are on a rooftop deck, in chairs of various height, with greenery and city high-rises in the background.

Image and alt text: Disabled and Here

Globally, 1 in 6 people have a disability.

WHO Disability Fact Sheet

In the United States, 1 in 4 people have a disability.

CDC Press Release

Permanent

Temporary

Situational

Web Accessibility

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.

It is a legal requirement for many industries, though the regulations differ between countries.

Source: W3C Introduction to Web Accessibility

The Current Situation

Each year, WebAIM does a study of the top million website's home pages. In 2023, the average home page had 50 accessibility errors.

This is also only looking at the home page, not the more complicated app.

Source: WebAIM Million

Semantic HTML

Semantic HTML is HTML that introduces meaning to the web page rather than just presentation.

Semantic tags

fieldset
ul
table
button

Non-semantic tags

div
hr
span
br

Source: Why use semantic HTML?

Semantic HTML is critical for accessibility

Assistive technologies can not infer the purpose of a UI based on styles, it needs to be in the actual HTML of the page.

How using proper HTML helps users:

Screen reader users look at the heading structure of a page to quickly scan the contents
Voice dictation users can use commands like "show links" to find all the links on a page

<div>
  <div class="heading">Accessibility resources</div>
  <div>
    <div>
      What accessibility resources have you used?
      </div>
    <input />
    <div class="icon-button">
      // svg
    </div>
  </div>
  <img src="/images/photo1.png" />
  <div>
    <div class="heading-small">
      My favorites
    </div>
    <a href="https://www.a11yproject.com">
      A11y Project
    </a>
    <a href="https://www.w3.org/WAI/ARIA/apg/">
      ARIA Authoring Practices Guide
    </a>
    <a href="https://www.whocanuse.com/">
      Who can use
    </a>
  </div>
</div>

Issues

Uses classes to indicate meaning visually
Button with no label
Text input with no label
Image with no alt text

<main>
  <h1>Accessibility resources</h1>
  <form>
    <label for="resource-input">
      What accessibility resources have you used?
    </label>
    <input id="resource-input" />
    <button type="submit" aria-label="Submit">
      // svg
    </button>
  </form>
  <img
    src="/images/photo1.png" 
    alt="A woman using a braille keyboard." 
  />
  <div>
    <h2>My favorites</h2>
    <ul>
      <li>
        <a href="https://www.a11yproject.com">
          A11y Project
        </a>
      </li>
      <li>
        <a href="https://www.w3.org/WAI/ARIA/apg/">
          ARIA Authoring Practices Guide
        </a>
      </li>
      <li>
        <a href="https://www.whocanuse.com/">
          Who can use
        </a>
      </li>
    </ul>
  </div>
</main>

Benefits

Correct HTML tags are used
The input is labelled
Button has a label
Links are in a list
Image has descriptive alt text

ARIA

ARIA is a specification maintained by the W3C that establishes roles, states, and properties for common UI elements to make them accessible.

Source: ARIA Basics

Role

Roles are element types that will not change with time or user actions. They set expectations for how the user can interact with the UI.

<button>Actions</button>
<div role="menu">
  <div role="menuitem">Edit</div>
  <div role="menuitem">Delete</div>
  <div role="menuitem">Clone</div>
</div>

CodeSandbox

Property

Properties are aria-* attributes that do not change when the user interacts with the UI

<button
  id="actions-button" 
  aria-controls="actions-menu"
  aria-haspopup="true"
>
  Actions
</button>
<div 
  role="menu"
  id="actions-menu" 
  aria-labelledby="actions-button"
>
  <div role="menuitem">Edit</div>
  <div role="menuitem">Delete</div>
  <div role="menuitem">Clone</div>
</div>

State

States are aria-* attributes used to indicate the current state of the UI.

<button
  id="actions-button"
  aria-controls="actions-menu"
  aria-haspopup="true" 
  aria-expanded="true/false"
>
  Actions
</button>
<div
  role="menu" 
  id="actions-menu" 
  aria-labelledby="actions-button"
>
  <div role="menuitem">Edit</div>
  <div role="menuitem">Delete</div>
  <div role="menuitem">Clone</div>
</div>

JavaScript

Browsers don't add any functionality to HTML that uses ARIA, you are responsible for adding interactivity.

const button = document.querySelector('button');
const menuItems = document.querySelectorAll('[role="menuitem"]');

button.addEventListener('click', () => {
  const isOpen = button.getAttribute('aria-expanded') === 'true';
  if (isOpen) {
    button.setAttribute('aria-expanded', false);
  } else {
    button.setAttribute('aria-expanded', true);
    menuItems[0].setAttribute('tabindex', '0');
    menuItems[0].focus();
  }
});

ARIA Authoring Practices Guide

The ARIA Authoring Practices Guide provide documentation and examples for common UIs.

It includes:

Expected keyboard interactions
Required roles, states, and properties
Live examples

Learn more at the ARIA APG website

Don't reinvent the wheel

Libraries like Radix UI, Ariakit and React Aria provide low level React components and hooks to make accessible components that don't exist out of the box in HTML.

No ARIA is better than bad ARIA

Giving an element a role is a promise. Unlike semantic HTML elements, ARIA roles do not cause browsers to provide keyboard behaviors or styling.

ARIA can hide the original semantics of HTML elements. ARIA attributes override HTML elements' default roles and properties. Using ARIA in non-standard ways makes UIs less accessible.