This document provides an introduction to accessibility and best practices for implementing accessibility on web pages. It discusses disability statistics in Ireland, different disability categories and temporalities. It introduces the Web Content Accessibility Guidelines (WCAG) 2.0 principles of perceivable, operable, understandable and robust. Basic steps for accessibility include focusing on semantics and styling. Semantic HTML helps screen readers interpret pages properly. The WAI-ARIA specification defines how to make dynamic content accessible. Testing and learning more about accessibility is recommended.

1. Accessibility
Fellyph Cintra - Deloitte

2. Irish Records
Census 2011
showed about 13%
of the population
reported having a
disability.
http://nda.ie/Disability-overview/Disability-Statistics/

3. Accessibility?
Let’s implement
JAWS

4. Right?

5. NO

6. Categories
VISUAL MOTOR HEARING COGNITIVE

7. Temporalities
● Temporary
● Permanent
● Situational

8. Test
● Category?
● Temporalities?

9. Test
● Category: Motor
● Temporalities: Temporary

10. How can I Start?

11. Web Content Accessibility Guidelines
WCAG 2.0 places only four principles:
● Perceivable
● Operable
● Understandable
● Robust

12. WCAG 2 Checklist:
https://webaim.org/standards/wcag/checklist

13. BASIC STEPS
● Focus
● Semantics
● Styling

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. DOM ORDER
HMTL Browser

16. DOM ORDER
HMTL Browser
*NOT RECOMMENDED! JUST AN EXAMPLE

17. HOW THE SCREEN READER READ IT?

18. WCAG 2 CHECKLIST - 1.3.2 Meaningful Sequence
● The reading and navigation order (determined by code
order) is logical and intuitive.

19. Semantics

20. Scenario 1
<div class="a-dropdown">Services</div>

22. Use <button> for buttons
<div class="a-dropdown">Services</div>
<button class="a-dropdown">Services</button>

23. Scenario 2
<div class="title">Ireland</div>

24. Use <h*> for titles
<div class="o-chip__title">Jobs Ireland</div>
<h2 class="o-chip__title">Jobs Ireland</h2>

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

26. SEO
SEO +
Semantics

27. WAI-ARIA

28. WAI-ARIA
Defines a way to make Web
applications (AJAX, HTML, JavaScript)
more accessible.

29. ARIA
• Works by
changing and
augmenting the
standard DOM
accessibility tree

30. Example

31. Dialog box

32. Documentation
https://www.w3.org/TR/wai-aria-practices-1.1/

33. How to test ?

34. Learn more
https://classroom.udacity.com/courses/ud891
Web Accessibility

35. Tools
https://www.deque.com/axe/
● Extensions Chrome,
Firefox
● Android
● CLI
● CI build

37. Obrigado
Thank you