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.

Accessibility workshop

128 views

Published on

In this presentation we are going to see basic concepts about web accessibility: Focus, sematics and wai-aria.

Understand the categories and temporalities related to accessibility and see how we can apply to our daily work

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Accessibility workshop

  1. 1. Accessibility Fellyph Cintra - Deloitte
  2. 2. Irish Records Census 2011 showed about 13% of the population reported having a disability. http://nda.ie/Disability-overview/Disability-Statistics/
  3. 3. Accessibility? Let’s implement JAWS
  4. 4. Right?
  5. 5. NO
  6. 6. Categories VISUAL MOTOR HEARING COGNITIVE
  7. 7. Temporalities ● Temporary ● Permanent ● Situational
  8. 8. Test ● Category? ● Temporalities?
  9. 9. Test ● Category: Motor ● Temporalities: Temporary
  10. 10. How can I Start?
  11. 11. Web Content Accessibility Guidelines WCAG 2.0 places only four principles: ● Perceivable ● Operable ● Understandable ● Robust
  12. 12. WCAG 2 Checklist: https://webaim.org/standards/wcag/checklist
  13. 13. BASIC STEPS ● Focus ● Semantics ● Styling
  14. 14. FOCUS ● WCAG - 2.1.1 : All page functionality is available using the keyboard, unless the functionality cannot be accomplished in any known way using a keyboard (e.g., free hand drawing). ● WCAG - 2.1.2 : Keyboard focus is never locked or trapped at one particular page element. The user can navigate to and from all navigable page elements using only a keyboard.
  15. 15. DOM ORDER HMTL Browser
  16. 16. DOM ORDER HMTL Browser *NOT RECOMMENDED! JUST AN EXAMPLE
  17. 17. HOW THE SCREEN READER READ IT?
  18. 18. WCAG 2 CHECKLIST - 1.3.2 Meaningful Sequence ● The reading and navigation order (determined by code order) is logical and intuitive.
  19. 19. Semantics
  20. 20. Scenario 1 <div class="a-dropdown">Services</div>
  21. 21. Use <button> for buttons <div class="a-dropdown">Services</div> <button class="a-dropdown">Services</button>
  22. 22. Scenario 2 <div class="title">Ireland</div>
  23. 23. Use <h*> for titles <div class="o-chip__title">Jobs Ireland</div> <h2 class="o-chip__title">Jobs Ireland</h2>
  24. 24. WCAG 2 CHECKLIST - 1.3.1 Info and Relationships ● Semantic markup is used to designate headings (<h1>), regions/landmarks, lists (<ul>, <ol>, and <dl>), emphasized or special text (<strong>, <code>, <abbr>, <blockquote>, for example), etc. Semantic markup is used appropriately.= ● Text labels are associated with form input elements. Related form elements are grouped with fieldset/legend. ARIA labelling may be used when standard HTML is insufficient.
  25. 25. SEO SEO + Semantics
  26. 26. WAI-ARIA
  27. 27. WAI-ARIA Defines a way to make Web applications (AJAX, HTML, JavaScript) more accessible.
  28. 28. ARIA • Works by changing and augmenting the standard DOM accessibility tree
  29. 29. Example
  30. 30. Dialog box
  31. 31. Documentation https://www.w3.org/TR/wai-aria-practices-1.1/
  32. 32. How to test ?
  33. 33. Learn more https://classroom.udacity.com/courses/ud891 Web Accessibility
  34. 34. Tools https://www.deque.com/axe/ ● Extensions Chrome, Firefox ● Android ● CLI ● CI build
  35. 35. Obrigado Thank you

×