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