Downloaded 16 times
Uploaded byReinaldo Ferraz
Using WCAG and ARIA for an accessible project
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.
Using WCAG and ARIA for an accessible project
- 1. Using WCAG andARIA for an accessible project
- 4. Do you thinkyou know everything about your user?
- 5.
- 6. You have nocontrol over the user
- 8. • Blindness • Lowvision • Deafness • Hearing loss • Learning disabilities • Cognitive limitations • Limited movement • Speech disabilities • Photosensitivity… • and combinations of these
- 9. People with disabilitiesin 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 disabilitiesin Brazil 24% 45.623.910 people Source: Brazilian Census 2010 http://censo2010.ibge.gov.br/en/
- 13. Web Accessibility mustbe part of development routine
- 14. Web Content AccessibilityGuidelines http://www.w3.org/TR/WCAG/ WCAG
- 15. Principle 1: Perceiveble Principle2: 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 73ROLES 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.
- 22. <img src=“starwars.jpg” alt=“Cover pictureof the movie Star Wars - The Empire Strikes Back”>
- 23. <div class="foto" role="img" aria-label=“W3CLogo inside the CSS"></div> <img src="img-slides/w3clogo.png" alt=“W3C Logo inside the HTML">
- 24.
- 25.
- 26.
- 27. Situation: A web pagefull of headlines
- 29.
- 30.
- 32.
- 33.
- 34.
- 35.
- 36. <fieldset> <legend> Fill the form </legend> <labelfor="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> <labelfor="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> <labelfor="text"> Name</label> <input id="text" type="text" aria-describedby="comp"> <p id="comp"> Fill the form with your real name!</p> </fieldset>
- 40.
- 41.
- 42.
- 43.
- 44.
- 46.
- 47.
- 48. <button role=“button” aria-pressed=“false”> Editmode </button> <button role=“button” aria-pressed=“true”> Edit mode </button>
- 49.
- 50.
- 51. the last butnot 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 mustbe part of development routine