This document discusses using WCAG and ARIA guidelines to develop accessible web projects. It notes that people with disabilities make up 15-24% of the population and outlines key principles of WCAG, such as perceivable, operable, understandable and robust content. It also explains the role of ARIA in making dynamic content and interfaces accessible, defining roles, states and properties. The document provides examples of implementing accessibility in image galleries, multi-language sites, headings, menus, forms, sliders and use of color. It stresses validating markup and following recommendations to test with assistive technologies.

1. Using WCAG and ARIA
for an accessible project

4. Do you think you know everything
about your user?

5. NO

6. You have no control over the user

8. • Blindness
• Low vision
• Deafness
• Hearing loss
• Learning disabilities
• Cognitive limitations
• Limited movement
• Speech disabilities
• Photosensitivity…
• and combinations of these

9. 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/

10. People with disabilities in Brazil
24%
45.623.910 people
Source: Brazilian Census 2010
http://censo2010.ibge.gov.br/en/

13. Web Accessibility must be part of development
routine

14. Web Content Accessibility Guidelines
http://www.w3.org/TR/WCAG/
WCAG

15. Principle 1: Perceiveble
Principle 2: Operable
Principle 3: Understandable
Principle 4: Robust
WCAG Principles

16. 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

17. 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

18. 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

21. Situation:
An image galery

22. <img src=“starwars.jpg”
alt=“Cover picture of the movie Star Wars
- The Empire Strikes Back”>

23. <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">

24. Demo

25. Situation:
Multiple languages

26. Demo

27. Situation:
A web page full of
headlines

29. <a href=“#contents”>Skip</a>
<elemento id=“skip”>

30. <h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h2>...<h2>
<h3>...</h3>
<h4>...</h4>
<h2>...</h2>
<h3>...</h3>

32. Situation:
Menu and Submenus

33. CSS:
a:hover
a:focus
JavaScript:
onmouseover="#"
onfocus="#"
onmouseout="#"
onblur="#"

34. Demo

35. Situation:
Forms

36. <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>

37. <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>

38. <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>

40. Demo

41. Slider

42. html5accessibility.com

43. Demo

44. Situation:
Use of colors

46. Demo

47. Situation:
Dynamic elements

48. <button role=“button” aria-pressed=“false”>
Edit mode
</button>
<button role=“button” aria-pressed=“true”>
Edit mode
</button>

49. Live Regions

50. Demo

51. 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)

52. Tks!
@reinaldoferraz
reinaldo@nic.br
Web Accessibility must be part of
development routine