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

https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

http://code.tutsplus.com/series/accessibility--cms-799

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
 

http://www.sitepoint.com/tips-accessible-svg/