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.

Using WCAG and ARIA for an accessible project

935 views

Published on

Presentation about web accessibility on HTML5 Developers Conference in San Francisco in May 2014

Published in: Internet, Design, Technology
  • Be the first to comment

Using WCAG and ARIA for an accessible project

  1. 1. Using WCAG and ARIA for an accessible project
  2. 2. Do you think you know everything about your user?
  3. 3. NO
  4. 4. You have no control over the user
  5. 5. • Blindness • Low vision • Deafness • Hearing loss • Learning disabilities • Cognitive limitations • Limited movement • Speech disabilities • Photosensitivity… • and combinations of these
  6. 6. People with disabilities in the world 15%It means, more than 1.000.000.000 people Source: UN - 2011 http://www.who.int/disabilities/world_report/2011/en/
  7. 7. People with disabilities in Brazil 24% 45.623.910 people Source: Brazilian Census 2010 http://censo2010.ibge.gov.br/en/
  8. 8. Web Accessibility must be part of development routine
  9. 9. Web Content Accessibility Guidelines http://www.w3.org/TR/WCAG/ WCAG
  10. 10. Principle 1: Perceiveble Principle 2: Operable Principle 3: Understandable Principle 4: Robust WCAG Principles
  11. 11. ARIA e HTML5 WAI-ARIA (Accessible Rich Internet Applications) defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. http://www.w3.org/WAI/intro/aria
  12. 12. ARIA e HTML5 progressbar radiogroup scrollbar slider spinbutton status Tab tabpanel textbox tooltip 73 ROLES alert Alertdialog button checkbox dialog menu menubar menuitem option ... http://www.w3.org/TR/wai-aria/roles#role_definitions
  13. 13. ARIA e HTML5 aria-activedescendant aria-atomic aria-autocomplete aria-busy (state) aria-checked (state) aria-controls aria-describedby aria-disabled (state) aria-dropeffect aria-expanded (state) aria-flowto aria-grabbed (state) 35 States and Properties aria-haspopup aria-hidden (state) aria-invalid (state) aria-label aria-labelledby aria-level aria-live aria-multiline aria-multiselectable aria-orientation aria-owns ... http://www.w3.org/TR/wai-aria/states_and_properties
  14. 14. Situation: An image galery
  15. 15. <img src=“starwars.jpg” alt=“Cover picture of the movie Star Wars - The Empire Strikes Back”>
  16. 16. <div class="foto" role="img" aria-label=“W3C Logo inside the CSS"></div> <img src="img-slides/w3clogo.png" alt=“W3C Logo inside the HTML">
  17. 17. Demo
  18. 18. Situation: Multiple languages
  19. 19. Demo
  20. 20. Situation: A web page full of headlines
  21. 21. <a href=“#contents”>Skip</a> <elemento id=“skip”>
  22. 22. <h1>...</h1> <h2>...</h2> <h3>...</h3> <h2>...<h2> <h3>...</h3> <h4>...</h4> <h2>...</h2> <h3>...</h3>
  23. 23. Situation: Menu and Submenus
  24. 24. CSS: a:hover a:focus JavaScript: onmouseover="#" onfocus="#" onmouseout="#" onblur="#"
  25. 25. Demo
  26. 26. Situation: Forms
  27. 27. <fieldset> <legend> Fill the form </legend> <label for="text"> Name</label> <input id="text" type="text" aria-describedby="comp"> <p id="comp"> Fill the form with your real name!</p> </fieldset>
  28. 28. <fieldset> <legend> Fill the form </legend> <label for="text"> Name</label> <input id="text" type="text" aria-describedby="comp"> <p id="comp"> Fill the form with your real name!</p> </fieldset>
  29. 29. <fieldset> <legend> Fill the form </legend> <label for="text"> Name</label> <input id="text" type="text" aria-describedby="comp"> <p id="comp"> Fill the form with your real name!</p> </fieldset>
  30. 30. Demo
  31. 31. Slider
  32. 32. html5accessibility.com
  33. 33. Demo
  34. 34. Situation: Use of colors
  35. 35. Demo
  36. 36. Situation: Dynamic elements
  37. 37. <button role=“button” aria-pressed=“false”> Edit mode </button> <button role=“button” aria-pressed=“true”> Edit mode </button>
  38. 38. Live Regions
  39. 39. Demo
  40. 40. the last but not the least • Validate Markup • Follow the W3C Recommendations (WCAG and ARIA) • Use automatic validation to help you check accessibility issues • Check the warnings and manually check results of automated tool • Test (keyboard navigation, color contrast tools, assistive tecnologies, etc)
  41. 41. Tks! @reinaldoferraz reinaldo@nic.br Web Accessibility must be part of development routine

×