Using WCAG and ARIA
for an accessible project
Do you think you know everything
about your user?
NO
You have no control over the user
• Blindness
• Low vision
• Deafness
• Hearing loss
• Learning disabilities
• Cognitive limitations
• Limited movement
• Sp...
People with disabilities in the world
15%It means, more than
1.000.000.000 people
Source: UN - 2011
http://www.who.int/dis...
People with disabilities in Brazil
24%
45.623.910 people
Source: Brazilian Census 2010
http://censo2010.ibge.gov.br/en/
Web Accessibility must be part of development
routine
Web Content Accessibility Guidelines
http://www.w3.org/TR/WCAG/
WCAG
Principle 1: Perceiveble
Principle 2: Operable
Principle 3: Understandable
Principle 4: Robust
WCAG Principles
ARIA e HTML5
WAI-ARIA (Accessible Rich Internet Applications)
defines a way to make Web content and Web
applications more ...
ARIA e HTML5
progressbar
radiogroup
scrollbar
slider
spinbutton
status
Tab
tabpanel
textbox
tooltip
73 ROLES
alert
Alertdi...
ARIA e HTML5
aria-activedescendant
aria-atomic
aria-autocomplete
aria-busy (state)
aria-checked (state)
aria-controls
aria...
Situation:
An image galery
<img src=“starwars.jpg”
alt=“Cover picture of the movie Star Wars
- The Empire Strikes Back”>
<div class="foto" role="img"
aria-label=“W3C Logo inside the
CSS"></div>
<img src="img-slides/w3clogo.png" alt=“W3C
Logo i...
Demo
Situation:
Multiple languages
Demo
Situation:
A web page full of
headlines
<a href=“#contents”>Skip</a>
<elemento id=“skip”>
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h2>...<h2>
<h3>...</h3>
<h4>...</h4>
<h2>...</h2>
<h3>...</h3>
Situation:
Menu and Submenus
CSS:
a:hover
a:focus
JavaScript:
onmouseover="#"
onfocus="#"
onmouseout="#"
onblur="#"
Demo
Situation:
Forms
<fieldset>
<legend>
Fill the form
</legend>
<label for="text">
Name</label>
<input id="text" type="text"
aria-describedby=...
<fieldset>
<legend>
Fill the form
</legend>
<label for="text">
Name</label>
<input id="text" type="text"
aria-describedby=...
<fieldset>
<legend>
Fill the form
</legend>
<label for="text">
Name</label>
<input id="text" type="text"
aria-describedby=...
Demo
Slider
html5accessibility.com
Demo
Situation:
Use of colors
Demo
Situation:
Dynamic elements
<button role=“button” aria-pressed=“false”>
Edit mode
</button>
<button role=“button” aria-pressed=“true”>
Edit mode
</but...
Live Regions
Demo
the last but not the least
• Validate Markup
• Follow the W3C Recommendations (WCAG and ARIA)
• Use automatic validation t...
Tks!
@reinaldoferraz
reinaldo@nic.br
Web Accessibility must be part of
development routine
Using WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible project
Using WCAG and ARIA for an accessible project
Upcoming SlideShare
Loading in...5
×

Using WCAG and ARIA for an accessible project

480

Published on

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

Published in: Internet, Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
480
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
11
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×