16. 1. Don’t reinvent the wheel
Use native HTML
<div title=“Collaborate on code”>
<a href=“#collaborate”>Collaborate</a>
</div>
17. 2. But if you must...
Handle focus + semantics
● Use tabIndex to manage an element’s position in the tab order
○ { 0, -1, 1.. }
● Keyboard event handling
<div tabIndex=“0”>I’m focusable!</a>
<button tabIndex=“-1”>I’m not!</button>
18. 2. But if you must...
Handle focus + semantics
● Use ARIA properties to define programmatic semantics
<ul role=“menu” aria-label=“About”>
<li role=“none”>
<a role=“menuitem” href=“#mission”>Mission</a>
</li>
<li role=“none”>
<a role=“menuitem” href=“#team”>Team</a>
</li>
</ul>
19. 3. Pursue an intuitive DOM order
Don’t rely on CSS for layout
<button style=“float: right”>Submit</button>
<label for=“city”>City:</label>
<input id=“city” type=“text”>
<label for=“zipcode”>Zip Code:</label>
<input id=“zipcode” type=“text”>
SubmitZip Code:City: Submit
20. 3. Pursue an intuitive DOM order
Don’t rely on CSS for layout
<button style=“float: right”>Submit</button>
<label for=“city”>City:</label>
<input id=“city” type=“text”>
<label for=“zipcode”>Zip Code:</label>
<input id=“zipcode” type=“text”>
SubmitZip Code:City: Submit
21. 3. Pursue an intuitive DOM order
Don’t rely on CSS for layout
<label for=“city”>City:</label>
<input id=“city” type=“text”>
<label for=“zipcode”>Zip Code:</label>
<input id=“zipcode” type=“text”>
<button style=“float: right”>Submit</button>
22. 3. Pursue an intuitive DOM order
Don’t rely on CSS for layout
1.3.2 Meaningful Sequence
When the sequence in which content is presented affects its meaning, a correct
reading sequence can be programmatically determined.
2.4.3 Focus Order
If a Web page can be navigated sequentially and the navigation sequences affect
meaning or operation, focusable components receive focus in an order that
preserves meaning and operability.
23. 4. Use programmatic labels
> Visible names for input + form controls
<label for=“promo”>Subscribe to Newsletter</label>
<input type=“checkbox” id=“promo”>
<label>
<input type=“checkbox”>
Subscribe to Newsletter
</label>
Subscribe to Newsletter✔
24. 4. Use programmatic labels
> Text alternatives for visual content
<img
src=“IMG_5458.jpg”
alt=“a positive possum
that believes in you”>
25. 4. Use programmatic labels
> Text alternatives for visual content
<img src=“magnifying_glass.png” alt=””> SEARCH
<button
aria-label=“Close" onclick=“close()">X
</button>
X
26. 5. Use HTML5 structural elements
header, footer, nav, main, article, section, aside
SAY
NO TO
<div>
HELL
27. 5. Use HTML5 structural elements
header, footer, nav, main, article, section, aside
28. TESTING FOR ACCESSIBILITY
Tools & Tips
KEYBOARD SUPPORT
● Tab through your page
● Check for keyboard trap
● Check for focusable offscreen content
