Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Pylon-Free Web Pages

15 views

Published on

An intro to web accessibility

Published in: Software
  • Be the first to comment

  • Be the first to like this

Building Pylon-Free Web Pages

  1. 1. Building “Pylon-Free” Web Pages An Intro to Web Accessibility > by sheri soliman / software developer @ vena
  2. 2. understanding accessibility “pylons?”
  3. 3. understanding USER NEEDS
  4. 4. understanding USER NEEDS VISUAL AUDIAL MOTOR COGNITIVE
  5. 5. understanding USER NEEDS VISUAL AUDIAL MOTOR COGNITIVE
  6. 6. understanding USER NEEDS VISUAL AUDIAL MOTOR COGNITIVE
  7. 7. understanding USER NEEDS VISUAL AUDIAL MOTOR COGNITIVE
  8. 8. understanding USER NEEDS VISUAL AUDIAL MOTOR COGNITIVE
  9. 9. understanding USER NEEDS VISUAL AUDIAL MOTOR COGNITIVE
  10. 10. [WCAG 2.0] The Web Content Accessibility Guidelines PERCEIVABLE OPERABLE UNDERSTANDABLE ROBUST
  11. 11. THE ACCESSIBILITY TREE { Name, Role, Value, State }
  12. 12. 1. Don’t reinvent the wheel Use native HTML <div title=“Collaborate on code”> <a href=“#collaborate”>Collaborate</a> </div>
  13. 13. 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>
  14. 14. 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>
  15. 15. 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
  16. 16. 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
  17. 17. 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>
  18. 18. 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.
  19. 19. 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✔
  20. 20. 4. Use programmatic labels > Text alternatives for visual content <img src=“IMG_5458.jpg” alt=“a positive possum that believes in you”>
  21. 21. 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
  22. 22. 5. Use HTML5 structural elements header, footer, nav, main, article, section, aside SAY NO TO <div> HELL
  23. 23. 5. Use HTML5 structural elements header, footer, nav, main, article, section, aside
  24. 24. TESTING FOR ACCESSIBILITY Tools & Tips KEYBOARD SUPPORT ● Tab through your page ● Check for keyboard trap ● Check for focusable offscreen content
  25. 25. TESTING FOR ACCESSIBILITY Tools & Tips LIGHTHOUSE AUDITS ● Open-source, automated tool ● Chrome DevTools, cmd line, node module ● Accessibility audit
  26. 26. TESTING FOR ACCESSIBILITY Tools & Tips SCREEN READER SUPPORT ● ChromeVox Extension ● VoiceOver (Mac) ● NVDA (Windows)
  27. 27. thank you!

×