The power of the World Wide Web is in its universality. Accessed by everyone, regardless of any physical condition, is an essential aspect, Tim Berners-Lee, W3C Director. This workshop gives a broad overview of the meaning of Accessibility, its principles, and why is a topic that interests so many? We will discuss the benefits, and show how to work with tools used to implement these types of tests.

1. Accessibility for Everyone
Testing Tools
GLOBANT
We are

2. “The Web was always intended to be
interactive”.
“All people should be able to contribute”.
“Accessibility is a right not a privilege”
TODAY’S
CHALLENGE

3. Accessibility testing is a type of systems designed to
determine whether individuals with disabilities will be
able to use the system in question. Accessibility involves
two key issues: how users with disabilities access
electronic information and how web content designers
and developers enable web pages to function with
assistive devices used by individuals with disabilities.
INTRODUCTION

4. INTERNATIONAL STANDARDS
WCAG 1.0 WCAG 2.0 WCAG 2.1
Is organized around guidelines that
have checkpoints, which are priority 1,
2, or 3. The basis for determining
conformance to the WCAG 1.0 are the
checkpoints.
Has a basic checklist
Brief descriptions are included in the
main WCAG 1.0 document under each
guideline
Is organized around four design principles of Web
accessibility. Each principle has guidelines, and
each guideline has testable success criteria at
level A, AA, or AAA . The basis for determining
conformance to the WCAG 2.0 are the success
criteria.
Has a customizable quick reference that you can
use to create a short high-level checklist or long
detailed checklists
The WCAG 2.0 standard has technology-
independent guidelines and success criteria
without the additional descriptions.
Extends WCAG 2.0 by adding new
success criteria, definitions to support
them, guidelines to organize the
additions, and a couple additions to the
conformance section.
This additive approach helps to make it
clear that sites which conform to WCAG
2.1 also conform to WCAG 2.0
In the Conformance section, a third note
about page variants has been added to
Full Pages, and an option for machine-
readable metadata added to Optional
Components of a Conformance Claim.

5. ACCESSIBILITY PRINCIPLES

6. INTERNATIONAL STANDARDS - WCAG

7. WHY SHOULD WE CARE ABOUT WEB
ACCESSIBILITY
The high cost of digital discrimination: Avoid fines
and penalties.
Including more people in your business can give
access to a greater number of potential customers.
Design the world to include everyone.
Because it is the right thing.

8. TYPES OF DISABILITIES

9. VISUAL DISABILITIES
Blindness

10. VISUAL DISABILITIES
Low Vision

11. VISUAL DISABILITIES
Color - Blindness

12. CEREBRAL ALTERATION
Seizure Disorders

13. MOTOR / MOBILITY DISABILITIES

14. COGNITIVE DISABILITIES

15. TESTING TOOLS FOR ACCESSIBILITY

16. SCREEN
READERS
NVDA
ORCA
JAWS
ChromevoxVoiceover

17. SCREEN
READERS
What do we need to know when it comes to testing?
➔ Navigation order: Logical
➔ Headings: Chronological order
➔ Forms: required entries, labels, entry fields
➔ Buttons and Links: Context. Actions
➔ Tables: Rows, columns, headings, summaries.

18. ZOOM 200%

19. WEB
ACCESSIBILITY TOOLS
COLOUR CONTRAST ANALYSER
WCAG 2.0 level AA requires a
contrast ratio of 4.5:1 for
normal text and 3:1 for large
text.
Large text is defined as 14
point (typically 18.66px) and
bold or larger, or 18 point
(typically 24px) or larger.

20. WEB
ACCESSIBILITY TOOLS

21. WEB
ACCESSIBILITY TOOLS

22. WEB
ACCESSIBILITY TOOLS

23. MOBILE
ACCESSIBILITY TOOLS
Accessibility Inspector in Xcode: The Accessibility Inspector presents a utility window
that displays the information properties (and values), action methods, and position in
the accessibility hierarchy of the object currently under the mouse pointer.
Accessibility Scanner is a tool that suggests accessibility improvements for Android
apps without requiring technical skills.
TalkBack: is Android's built-in screen reader. When TalkBack is on, users can interact
with their Android device without seeing the screen. Users with visual impairments may
rely on TalkBack to use your app.
BrailleBack: is an application that lets users connect a refreshable braille display to an
Android device over Bluetooth. BrailleBack works with TalkBack to provide a combined
speech and braille experience.
VoiceOver for iOS: is a gesture-based screen reader that lets you enjoy the fun and
simplicity of iOS even if you can’t see the screen.

24. What we should NOT do

25. What we should NOT do
Inaccessible designs

26. Accessible designs
What we should do!

27. What we should do!
Before and After
Demonstration (W3C)
https://www.w3.org/WAI/demos/bad/before/annotated/tickets.
html

28. USEFUL VIDEOS
NVDA Screen Reader
Accessibility Testing with the NVDA Screenreader
aXe Tool
Creating Accessible Web Applications with aXe
Easy Accessibility Testing with aXe
Colour Contrast Analyzer tool
How to use Colour Contrast Analyser Tool
Wave
Wave accessibility tool

29. WE HELP
YOU
STAY
RELEVANT
Email: lina.cartagena@globant.com
juan.cadavid@globant.com