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.
CLAUDIO LUIS VERACLAUDIO LUIS VERA
Royal Caribbean
Cruises, LTD (RCL)
Digital Accessibility
● Websites
● Apps
● Augmented reality
● Kiosks
● Gaming stations
● Digital experiences
2
CLAUDIO LUIS VERA
What’s in your toolbox?
3
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
CLAUDIO LUIS VERACLAUDIO LUIS VERA 5
Chrome Developer Tools
Built-in contrast checker
Can give you contrast ratio between
two CSS colors
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.
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
CLAUDIO LUIS VERA
A multi-level approach
8
CLAUDIO LUIS VERACLAUDIO LUIS VERA
Accessibility testing is
like gaming
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
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
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
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
CLAUDIO LUIS VERACLAUDIO LUIS VERA 14
Single-page testing tools
Beginner
WAVE by WebAIM
Developer
Axe by Deque Systems
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
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
CLAUDIO LUIS VERA
Demo time!
17
CLAUDIO LUIS VERA
WAVE
by WebAIM
18
CLAUDIO LUIS VERA
Axe
by Deque Systems
19
CLAUDIO LUIS VERA
Siteimprove
Site-wide testing
20
CLAUDIO LUIS VERA
Manual testing
21
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
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?
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
CLAUDIO LUIS VERACLAUDIO LUIS VERA 25
Checking Contrast
Contrast Mac OS tool
● Works like the Photoshop
eyedropper tool.
● Samples actual screen colors.
CLAUDIO LUIS VERA
Usability testing
by people with disabilities
26
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
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.
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
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
CLAUDIO LUIS VERA
Thank you
Claudio Luis Vera - Accessibility Professional, UX
Designer, human
Royal Caribbean Cruises, Ltd.
31
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

How can I test my website for accessibility?

  • 1.
    CLAUDIO LUIS VERA 1 Howcan 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 VERACLAUDIOLUIS VERA Royal Caribbean Cruises, LTD (RCL) Digital Accessibility ● Websites ● Apps ● Augmented reality ● Kiosks ● Gaming stations ● Digital experiences 2
  • 3.
    CLAUDIO LUIS VERA What’sin your toolbox? 3
  • 4.
    CLAUDIO LUIS VERACLAUDIOLUIS VERA 4 A few browser extension tools Beginner WAVE by WebAIM Developer Axe by Deque Systems Enterprise Siteimprove’s Accessibility Checker
  • 5.
    CLAUDIO LUIS VERACLAUDIOLUIS VERA 5 Chrome Developer Tools Built-in contrast checker Can give you contrast ratio between two CSS colors
  • 6.
    CLAUDIO LUIS VERACLAUDIOLUIS 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 VERACLAUDIOLUIS VERA 7 Contrast Ratio by Lea Verou Web app Can give you contrast ratio between any two CSS colors in any color model
  • 8.
    CLAUDIO LUIS VERA Amulti-level approach 8
  • 9.
    CLAUDIO LUIS VERACLAUDIOLUIS VERA Accessibility testing is like gaming
  • 10.
    CLAUDIO LUIS VERACLAUDIOLUIS 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 VERACLAUDIOLUIS 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 VERACLAUDIOLUIS 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 VERACLAUDIOLUIS 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 VERACLAUDIOLUIS VERA 14 Single-page testing tools Beginner WAVE by WebAIM Developer Axe by Deque Systems
  • 15.
    CLAUDIO LUIS VERACLAUDIOLUIS 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 VERACLAUDIOLUIS 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
  • 17.
  • 18.
  • 19.
    CLAUDIO LUIS VERA Axe byDeque Systems 19
  • 20.
  • 21.
  • 22.
    CLAUDIO LUIS VERACLAUDIOLUIS 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 VERACLAUDIOLUIS 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 VERACLAUDIOLUIS VERA 24 Keeping score Use a score card ● Fail the page if there’s a single failure ● Use a severity scale
  • 25.
    CLAUDIO LUIS VERACLAUDIOLUIS VERA 25 Checking Contrast Contrast Mac OS tool ● Works like the Photoshop eyedropper tool. ● Samples actual screen colors.
  • 26.
    CLAUDIO LUIS VERA Usabilitytesting by people with disabilities 26
  • 27.
    CLAUDIO LUIS VERACLAUDIOLUIS 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 VERACLAUDIOLUIS 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 VERACLAUDIOLUIS 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 VERACLAUDIOLUIS 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 Thankyou Claudio Luis Vera - Accessibility Professional, UX Designer, human Royal Caribbean Cruises, Ltd. 31
  • 32.
    CLAUDIO LUIS VERACLAUDIOLUIS 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