testing for accessibility without breaking the bank
TRANSCRIPT
![Page 1: Testing for accessibility without breaking the bank](https://reader036.vdocuments.site/reader036/viewer/2022062503/58adfc6e1a28abf0628b5eaf/html5/thumbnails/1.jpg)
1
TESTING FOR ACCESSIBILITY WITHOUT BREAKING THE BANK
CECILIE HAUGSTVEDT, TEST LEAD AT COMPUTAS
@chaugstvedt
![Page 2: Testing for accessibility without breaking the bank](https://reader036.vdocuments.site/reader036/viewer/2022062503/58adfc6e1a28abf0628b5eaf/html5/thumbnails/2.jpg)
2
WHAT IF WE DON’T TEST?
![Page 3: Testing for accessibility without breaking the bank](https://reader036.vdocuments.site/reader036/viewer/2022062503/58adfc6e1a28abf0628b5eaf/html5/thumbnails/3.jpg)
3
ACCESSIBILITY IS REQUIRED BY LAW
• By 2021, all IT solutions must be universally designed
• Web sites: WCAG 2.0 Level A and AA with exception for the texting rules
![Page 4: Testing for accessibility without breaking the bank](https://reader036.vdocuments.site/reader036/viewer/2022062503/58adfc6e1a28abf0628b5eaf/html5/thumbnails/4.jpg)
THE COST OF IGNORING ACCESSIBILITY
BAD REPUTATION
PROJECT DELAYS
FINES
LOST REVENUE
ETHICAL ISSUES
4
FEWER CUSTOMERS
EXPENSIVE PATCHING
![Page 5: Testing for accessibility without breaking the bank](https://reader036.vdocuments.site/reader036/viewer/2022062503/58adfc6e1a28abf0628b5eaf/html5/thumbnails/5.jpg)
5
EFFECTIVE AND EFFICIENT TESTING STARTS EARLY
![Page 6: Testing for accessibility without breaking the bank](https://reader036.vdocuments.site/reader036/viewer/2022062503/58adfc6e1a28abf0628b5eaf/html5/thumbnails/6.jpg)
6
CHOOSE TECHNOLOGY WISELY
• Compensating for bad technology can be time-consuming
• Add accessibility as a criteria when introducing new technology
![Page 7: Testing for accessibility without breaking the bank](https://reader036.vdocuments.site/reader036/viewer/2022062503/58adfc6e1a28abf0628b5eaf/html5/thumbnails/7.jpg)
7
REVIEW THE DESIGN
• Look for elements that require extra attention: tables, graphics, input forms, pop-up windows,…
![Page 8: Testing for accessibility without breaking the bank](https://reader036.vdocuments.site/reader036/viewer/2022062503/58adfc6e1a28abf0628b5eaf/html5/thumbnails/8.jpg)
8
CHECK THE LANGUAGE
• Universal means for all – use plain language
• If it’s hard to read for you, it’s hard to read for someone else
![Page 9: Testing for accessibility without breaking the bank](https://reader036.vdocuments.site/reader036/viewer/2022062503/58adfc6e1a28abf0628b5eaf/html5/thumbnails/9.jpg)
9
DO AUTOMATED CHECKS
• Check for accessibility in your continuous integration pipeline
• Computers are really good at discovering violations of some of the rules
![Page 10: Testing for accessibility without breaking the bank](https://reader036.vdocuments.site/reader036/viewer/2022062503/58adfc6e1a28abf0628b5eaf/html5/thumbnails/10.jpg)
10
USE CHECKLISTS
• For manual code review• People discover things the
automatic checks cannot:– Sensible names of
elements – Good descriptions of
images
![Page 11: Testing for accessibility without breaking the bank](https://reader036.vdocuments.site/reader036/viewer/2022062503/58adfc6e1a28abf0628b5eaf/html5/thumbnails/11.jpg)
11
USE TOOLS FOR MANUAL TESTING
• Online tools– WAVE Chrome
Extension• Offline tools• Screen reader
– NVDA
![Page 12: Testing for accessibility without breaking the bank](https://reader036.vdocuments.site/reader036/viewer/2022062503/58adfc6e1a28abf0628b5eaf/html5/thumbnails/12.jpg)
12
TEST WITH A SCREEN READER
• The final test• Make sure you have
removed all obvious errors first
• Skip this step if you cannot afford to get a real user of a screen reader to do the test
![Page 13: Testing for accessibility without breaking the bank](https://reader036.vdocuments.site/reader036/viewer/2022062503/58adfc6e1a28abf0628b5eaf/html5/thumbnails/13.jpg)
13
COMMON MISTAKES
![Page 14: Testing for accessibility without breaking the bank](https://reader036.vdocuments.site/reader036/viewer/2022062503/58adfc6e1a28abf0628b5eaf/html5/thumbnails/14.jpg)
14
ILLUSTRATIONS
• Pictures are good, alt-texts are not optional
• Leave the alt-text empty if the image is purely decorative
• Text videos even though the law does not require you to do so
![Page 15: Testing for accessibility without breaking the bank](https://reader036.vdocuments.site/reader036/viewer/2022062503/58adfc6e1a28abf0628b5eaf/html5/thumbnails/15.jpg)
15
Dra bildet til plassholderen eller klikk ikonet for å legge til
LINKS
• Don’t let the users guess• Use sensible names• Read more
• More information• Click here• ...
![Page 16: Testing for accessibility without breaking the bank](https://reader036.vdocuments.site/reader036/viewer/2022062503/58adfc6e1a28abf0628b5eaf/html5/thumbnails/16.jpg)
16
NAVIGATION
• Always do at least one keyboard-only test
• Make the links large enough
• Use HTML 5 and semantic sections
Dra bildet til plassholderen eller klikk ikonet for å legge til
<aside>
<article>
<header>
<nav>
<footer>
<section>
<section>
![Page 17: Testing for accessibility without breaking the bank](https://reader036.vdocuments.site/reader036/viewer/2022062503/58adfc6e1a28abf0628b5eaf/html5/thumbnails/17.jpg)
17
COLOR CONTRAST
• 5 – 8 % of all Norwegian men are color blind
• Think about a sunny day• No discussion needed: the
answer can be found online
This is not easy to readThis is better
![Page 18: Testing for accessibility without breaking the bank](https://reader036.vdocuments.site/reader036/viewer/2022062503/58adfc6e1a28abf0628b5eaf/html5/thumbnails/18.jpg)
18
MOTIVATION TEST COMMON ERRORS
Do it because you care
Avoid common mistakesStart test early