The document discusses various tools and methods for testing the accessibility of digital properties. It begins by introducing some common automated testing tools for evaluating accessibility, including WAVE, Axe, and Siteimprove's Accessibility Checker. It then covers manual testing methods like keyboard testing, visual design reviews, and screen reader testing. The document advocates a multi-level approach including automated testing for low-hanging violations, single-page testing, and site-wide scans, combined with manual testing and usability testing with people with disabilities. The goal is to achieve digital equality and an excellent user experience for all.
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
How can I test my website for accessibility?
1. CLAUDIO LUIS VERA
1
How can I test for accessibility?
Using testing tools to tell if a digital property
can be used by everyone.
Claudio Luis Vera - Accessibility Professional, UX Designer, human
Royal Caribbean Cruises, Ltd.
2. CLAUDIO LUIS VERACLAUDIO LUIS VERA
Royal Caribbean
Cruises, LTD (RCL)
Digital Accessibility
● Websites
● Apps
● Augmented reality
● Kiosks
● Gaming stations
● Digital experiences
2
4. CLAUDIO LUIS VERACLAUDIO LUIS VERA 4
A few browser extension tools
Beginner
WAVE by WebAIM
Developer
Axe by Deque Systems
Enterprise
Siteimprove’s
Accessibility Checker
5. CLAUDIO LUIS VERACLAUDIO LUIS VERA 5
Chrome Developer Tools
Built-in contrast checker
Can give you contrast ratio between
two CSS colors
6. CLAUDIO LUIS VERACLAUDIO LUIS VERA 6
Contrast
from the App Store
Mac app contrast checker
Can give you contrast ratio between
any two colors on your screen.
7. CLAUDIO LUIS VERACLAUDIO LUIS VERA 7
Contrast Ratio
by Lea Verou
Web app
Can give you contrast
ratio between
any two CSS colors in any
color model
10. CLAUDIO LUIS VERACLAUDIO LUIS VERA
Automated
testing
1
L O W - H A N G I N G F R U I T
2 S I N G L E - P A G E T E S T I N G
3
S I T E - W I D E T E S T I N G
Manual
testing
4
K E Y B O A R D T E S T I N G
5 F O C U S V I S I B I L I T Y
6 V I S U A L D E S I G N R E V I E W
7
S C R E E N R E A D E R T E S T I N G
Usability
testing
8 D I A L - A - F R I E N D
9 F O R M A L U S A B I L I T Y T E S T I N G
10
F O R M A L A U D I T
11. CLAUDIO LUIS VERACLAUDIO LUIS VERA
Manual
testing
4
K E Y B O A R D T E S T I N G
5 F O C U S V I S I B I L I T Y
6 V I S U A L D E S I G N R E V I E W
7
S C R E E N R E A D E R T E S T I N G
Usability
testing
8 D I A L - A - F R I E N D
9 F O R M A L U S A B I L I T Y T E S T I N G
10
F O R M A L A U D I T
Automated
testing
1
L O W - H A N G I N G F R U I T
2 S I N G L E - P A G E T E S T I N G
3
S I T E - W I D E T E S T I N G
12. CLAUDIO LUIS VERACLAUDIO LUIS VERA 12
Automated testing:
low-hanging fruit
Four violations cited in most lawsuits:
1. Missing alternative text
2. Empty links that contain no text
3. Redundant links (?!)
4. Linked images missing alt text
13. CLAUDIO LUIS VERACLAUDIO LUIS VERA 13
Automated testing:
low-hanging fruit
Four violations cited in most lawsuits:
1. Missing alternative text
2. Empty links that contain no text
3. Redundant links (?!)
4. Linked images missing alt text
#2 requires
WAVE or
SiteSort
#2 requires
WAVE or
SiteSort
14. CLAUDIO LUIS VERACLAUDIO LUIS VERA 14
Single-page testing tools
Beginner
WAVE by WebAIM
Developer
Axe by Deque Systems
15. CLAUDIO LUIS VERACLAUDIO LUIS VERA 15
Page testing tools
Built-in contrast checker
Can give you contrast ratio between
two CSS colors
Axe / Axe Pro
Can give you contrast ratio between
two CSS colors
16. CLAUDIO LUIS VERACLAUDIO LUIS VERA
Top accessibility mistakes
● Missing alternative “alt” text
● Missing form field labels
● Insufficient color contrast
● Broken tab index
● Hidden focus
● Using styles instead of headings
● Using buttons where links should
go
● Missing “Skip navigation” link
● Social toolbars that don’t skip links
22. CLAUDIO LUIS VERACLAUDIO LUIS VERA
Automated
testing
1
L O W - H A N G I N G F R U I T
2 S I N G L E - P A G E T E S T I N G
3
S I T E - W I D E T E S T I N G
Usability
testing
8 D I A L - A - F R I E N D
9 F O R M A L U S A B I L I T Y T E S T I N G
10
F O R M A L A U D I T
Manual
testing
4
K E Y B O A R D T E S T I N G
5 F O C U S V I S I B I L I T Y
6 V I S U A L D E S I G N R E V I E W
7
S C R E E N R E A D E R T E S T I N G
23. CLAUDIO LUIS VERACLAUDIO LUIS VERA 23
Manual tests
Keyboard accessibility
● Can you access
everything on the
page?
● Can you operate
every component?
● Are there keyboard
traps?
Focus styles
● Can you see what has
focus all the time?
● Has some a- - hat
suppressed focus?
Resizing and zoom
● Does the page zoom
to 200% without
issues?
24. CLAUDIO LUIS VERACLAUDIO LUIS VERA 24
Keeping score
Use a score card
● Fail the page if there’s
a single failure
● Use a severity scale
25. CLAUDIO LUIS VERACLAUDIO LUIS VERA 25
Checking Contrast
Contrast Mac OS tool
● Works like the Photoshop
eyedropper tool.
● Samples actual screen colors.
27. CLAUDIO LUIS VERACLAUDIO LUIS VERA
Automated
testing
1
L O W - H A N G I N G F R U I T
2 S I N G L E - P A G E T E S T I N G
3
S I T E - W I D E T E S T I N G
Manual
testing
4
K E Y B O A R D T E S T I N G
5 F O C U S V I S I B I L I T Y
6 V I S U A L D E S I G N R E V I E W
7
S C R E E N R E A D E R T E S T I N G
Usability
testing
8 D I A L - A - F R I E N D
9 F O R M A L U S A B I L I T Y T E S T I N G
10
F O R M A L A U D I T
28. CLAUDIO LUIS VERACLAUDIO LUIS VERA 28
Testing by humans - what a concept!
Valued tester program
Lighthouse of Broward
Fable Tech Labs
Gold–standard testing by
panels of people with
different disabilities
Formal audits
A final exam for your
digital teams.
29. CLAUDIO LUIS VERACLAUDIO LUIS VERA 29
Hierarchy of accessibility
E X P E R I E N C E G O A L
C A N B E M A R K E T E D
I S U S A B L E
H A S W O R K I N G C O N T R O L S
I N C L U D E S A L L C O N T E N T
E X C E L L E N C E
G O O D U S E R E X P E R I E N C E
G R E A T U X
U N D E R S T A N D A B L E
O P E R A B L E
P E R C E I V A B L E
30. CLAUDIO LUIS VERACLAUDIO LUIS VERA 30
Digital equality
E X C E L L E N C E
G O O D U S E R
E X P E R I E N C E
G R E A T U X
U N D E R S T A N D A B L E
O P E R A B L E
P E R C E I V A B L E
E X P E R I E N C E G O A L
C A N B E M A R K E T E D
I S U S A B L E
M E E T S W C A G G U I D E L I N E S
B A R E M I N I M U M
E X C E L L E N C E
G O O D U S E R
E X P E R I E N C E
G R E A T U X
U N D E R S T A N D A B L E
O P E R A B L E
P E R C E I V A B L E
A-
D
Abled users Disabled users
31. CLAUDIO LUIS VERA
Thank you
Claudio Luis Vera - Accessibility Professional, UX
Designer, human
Royal Caribbean Cruises, Ltd.
31
32. CLAUDIO LUIS VERACLAUDIO LUIS VERA 32
Resources
WAVE by WebAIM
Axe by Deque Systems
Siteimprove Accessibility Tester
Contrast from the App Store
Contrast ratio by Lea Verou
Siteimprove platform
Accessibility Testing on a $7 budget on
Medium
Accessibility Scorecard on Google Drive
Lighthouse of Broward
Fable Tech Labs
Level Access
Deque Systems
