ACCESSIBILITY

BASIC

ACCESSIBILITY

Structure

  • Use the right element for the right job (HTML 5!)
     

  • Every single page starts with an H1 and subsequent Hx elements follow in the proper order
     

  • Disable CSS and check the page flow

ACCESSIBILITY

Image alternative text


<img src="logo.png" alt="Weathervane Seafood Restaurants">


<svg role="img" aria-labelledby="title desc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34">
  <title id="title">Back</title>
  <desc id="desc">A leftward arrow</desc>
  <path role=presentation>
     ...
  </path>
</svg>

ACCESSIBILITY

Keyboard-friendly

  • Using only the keyboard can you navigate, operate and interact with all the elements on the page?
     
  • Can you easily tell where you are at on the page?

ACCESSIBILITY

Forms

  • Every input requires a label
     
  • Hide labels with screen-reader-text CSS class,
    not display:none!  (There's also a mixin.)
     
  • Can it be filled-out using only the keyboard?

ACCESSIBILITY

ARIA

  • Use ARIA roles to declare semantic meaning on elements with incorrect or no semantics

<ul class="menu" role="menubar">
  <li class="menu-item" role="menuitem">
     ...

ACCESSIBILITY

ARIA

  • Use ARIA labels when elements don't contain text due to design reasons

<!-- No! -->
<button><span class="icon-email"></span></button> 

<!-- Yes! -->
<button aria-label="Email">
    <span class="icon-email"></span>
</button>

ACCESSIBILITY

ARIA

  • Hide elements that are duplicate content or only used for presentation with aria-hidden="true" role="presentation"
     
  • Try to use accessible JS plugins

ACCESSIBILITY

WAVE Accessibility Tool

ACCESSIBILITY

Resources

Vital Dev Team Meeting - February

By Adam Walter

Vital Dev Team Meeting - February

  • 1,277