Who is Eevis?

Agenda

  1. A couple of words about accessibility
  2. Let’s Keep Our Promises: ARIA
  3. Let's Keep Our Promises: Keyboard Navigation

A couple of words about accessibility

Let's keep our promises: ARIA

No ARIA is better than bad ARIA

Principle 1: A role is a promise

<div 
  role="button" 
  className="button">
    I'd like to be a button
</div>

Principle 2: ARIA can both cloak and enhance, creating both power and danger

<section ariaHidden>
  <h2>An important section</h2>
  <p>Important content</p>
  <button>
    Button, vital to business
   </button>
</section>

How to keep our promises: ARIA

  1. If you can, use semantic HTML
  2. When you use ARIA, know what you’re doing
  3. Remember to add keyboard event listeners

Let's keep our promises: Keyboard Navigation

Styles should match the underlying component

<a 
  href="/url" 
  className="button">
    I'm a link looking like a button
</a>

Remember keyboard event listeners for custom components

<div 
  role="button" 
  tabIndex={0}
  className="button">
    I'd like to be a button
</div>

How to keep our promises - keyboard navigation

  1. Style the component to look like the underlying component
  2. For custom components, remember to add the keyboard event listeners

Thanks!

Twitter: @EevisPanula Website: https://eevis.codes