A toolkit for web accessibility

A presentation at Stay Curious by Beyond Tellerrand in January 2022 in by Hidde de Vries

Slide 1

Slide 1

@hdv TOOLKIT FOR ACCESSIBILITY Hidde de Vries, Stay Curious Online, 18 January

Slide 2

Slide 2

@hdv Hi, I’m Hidde front-end developer + accessibility specialist + blogger (hidde.blog) Like & Subscribe

Slide 3

Slide 3

@hdv accessibility, a brief intro

Slide 4

Slide 4

@hdv Web accessibility to ensure people with disabilities can use your site/app

Slide 5

Slide 5

@hdv Web accessibility to ensure people with disabilities can buy your product

Slide 6

Slide 6

@hdv Web accessibility to ensure people with disabilities can use your service

Slide 7

Slide 7

@hdv 1-2% 4% blind/visually impaired colour blind ` OOGVERENIGING (1 IN 12 MEN, 1 IN 250 WOMEN) This concerns a lot of people 9% 15% deaf/heard of hearing low numerate / low literate HOORWIJZER ALGEMENE REKENKAMER

Slide 8

Slide 8

@hdv A lot of people - zoom in web pages use high contrast modes have screenreader need audio/video transcribed do not use a mouse use voice recognition prefer reduced motion W3C/WAI, How People with Disabilities Use the Web https://www.w3.org/WAI/people-use-web/tools-techniques

Slide 9

Slide 9

@hdv What to test?

Slide 10

Slide 10

@hdv a11y standards + Best practices + (You’ll need all of the above) User testing

Slide 11

Slide 11

@hdv a11y standards + Best practices + (You’ll need all of the above) User testing

Slide 12

Slide 12

@hdv WCAG 2.1 w3.org/TR/WCAG21 WCAG: internationally implemented guidelines that provide a baseline for testing web accessibility

Slide 13

Slide 13

@hdv WCAG 2.1 w3.org/TR/WCAG21 Principles Guidelines Success Criteria

Slide 14

Slide 14

@hdv WCAG 2.1 w3.org/TR/WCAG21 Principles Guidelines Success Criteria (three levels)

Slide 15

Slide 15

@hdv WCAG 2.1 w3.org/TR/WCAG21 Principles Guidelines Success Criteria (three levels) 50 criteria at Level A + AA

Slide 16

Slide 16

@hdv quick reference w3.org/WAI/WCAG21/quickref/

Slide 17

Slide 17

@hdv this is wcag thisiswcag.com

Slide 18

Slide 18

@hdv 50 Success Criteria - about issues people with - disabilities face testable (some by humans, some by machines)

Slide 19

Slide 19

@hdv a11y standards + Best practices + (You’ll need all of the above) User testing

Slide 20

Slide 20

@hdv best practices Be careful about what you adopt, look for well-tested patterns

Slide 21

Slide 21

@hdv best practices Be careful about what you adopt, look for well-tested patterns https://github.com/scottaohara/accessible_components https://design-system.service.gov.uk

Slide 22

Slide 22

@hdv a11y standards + Best practices + (You’ll need all of the above) User testing

Slide 23

Slide 23

@hdv testing with users - test with a range of di ferent users: one user doesn’t speak for all f W3C, Involving Users in Web Projects for Better, Easier Accessibility

Slide 24

Slide 24

@hdv testing with users - test with a range of di ferent users: - one user doesn’t speak for all allow for plenty of time f Frozen Rockets, Things to consider when doing usability testing with disabled people

Slide 25

Slide 25

@hdv testing with users - test with a range of di ferent users: - one user doesn’t speak for all allow for plenty of time test only when you’re ready f Frozen Rockets, Things to consider when doing usability testing with disabled people

Slide 26

Slide 26

@hdv testing with users - test with a range of di ferent users: - one user doesn’t speak for all allow for plenty of time test only when you’re ready ensure your lab is accessible f Frozen Rockets, Things to consider when doing usability testing with disabled people

Slide 27

Slide 27

@hdv How to test?

Slide 28

Slide 28

@hdv manual vs automated You will need both!

Slide 29

Slide 29

@hdv manual vs automated - how many issues? - how many Success Criteria? Deque, The automated accessibility coverage report

Slide 30

Slide 30

@hdv manual vs automated <img src=”50-percent-off” /> 50% off

Slide 31

Slide 31

@hdv manual vs automated <img src=”50-percent-off” /> Problem: there is no alt (machines can establish this) 50% off

Slide 32

Slide 32

@hdv manual vs automated <img src=”50-percent-off” alt=”25% off”/> f Problem: the alt does not re lect what image says (would require machine that can do OCR, most accessibility testing tools don’t) 50% off

Slide 33

Slide 33

@hdv manual vs automated <img src=”50-percent-off” alt=”Sale, 50% off”/> Sale! 50% off Problem: the alt is redundant (hard for machines to decide)

Slide 34

Slide 34

@hdv Manual testing Tests that most people on the team can do periodically

Slide 35

Slide 35

@hdv manual: use of color Is it not the only way? Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.

Slide 36

Slide 36

@hdv manual: use of color Is it not the only way? Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.

Slide 37

Slide 37

@hdv manual: page title Is there a title? Does it describe the page?

Slide 38

Slide 38

@hdv manual: keyboard Can I get to all interactive elements?

Slide 39

Slide 39

@hdv <select> <details> <input> <textarea> interactive elements <button> <a>

Slide 40

Slide 40

@hdv manual: keyboard Can I do everything with just the keyboard?

Slide 41

Slide 41

@hdv manual: keyboard Can I see where I am? Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.

Slide 42

Slide 42

@hdv manual: keyboard Can I get to all interactive elements? Can I see where I am? Does the order make sense? Are you never trapped? Is there anything with tabindex > 0? Is there nothing in tab order that shouldn’t be there?

Slide 43

Slide 43

@hdv manual: images Do all images have an alt attribute? Is the alt appropriate? ft

  • le empty when it should be - contains everything that’s in the image - imagine image fails; is it a good replacement?

Slide 44

Slide 44

@hdv manual: images Is the image the only thing in a link? The alt is now the link’s name.

Slide 45

Slide 45

@hdv manual: video Are captions available and correct? Is everything that’s visible also in audio?

Slide 46

Slide 46

@hdv manual: audio Is everything in the audio available as text?

Slide 47

Slide 47

@hdv “[podcasts] really boomed during the rst months of lockdown. As a deaf person, almost all of these podcasts are inaccessible to me because they don’t have transcripts or I have to wait weeks before they are available. ” fi Darice de Cuba, The Podcast Transcript Experimentation

Slide 48

Slide 48

@hdv manual: headings Do headings describe the section they’re a heading of?

Slide 49

Slide 49

@hdv manual: headings Is everything that looks like a heading marked up with a hx tag?

<div class=”text-5xl font-medium text-green-600”>Our products</div>

Slide 50

Slide 50

@hdv manual: zoom When you zoom in (up to 400%), does everything still work? text should not overlap text should not be cut o f all controls should be usable no horizontal and vertical scrolling f

Slide 51

Slide 51

@hdv manual: color modes Can everything be used with Windows High Contrast Mode on?

Slide 52

Slide 52

@hdv manual: screenreaders Use the website with a screenreader, but

  • if you’re not a regular screenreader - user, add a pinch of salt, don’t jump to conclusions keep common browser/screenreader combinations in mind “it works” also depends on user skill, not all users are tech savvy

Slide 53

Slide 53

@hdv semi-automated testing Tests that remove some of the manual work so you can make decisions quicker

Slide 54

Slide 54

@hdv Firefox dev tools - Visualise tabbing order

Slide 55

Slide 55

@hdv Firefox dev tools - “no false positives” - integrates with existing tests - runs in major browsers and command line

Slide 56

Slide 56

@hdv Firefox dev tools - Visualise tabbing order - Test Contrast, Keyboard and Text Labels on a page

Slide 57

Slide 57

@hdv fi Firefox dev tools - Visualise tabbing order - Test Contrast, Keyboard and Text Labels on a page - Simulate colour vision de ciencies / contrast loss

Slide 58

Slide 58

@hdv html validator validator.nu

Slide 59

Slide 59

@hdv wave wave.webaim.org

Slide 60

Slide 60

@hdv automated testing Tests you can run against a website automatically (eg in CI/CD)

Slide 61

Slide 61

@hdv automated testing Tests you can run against a website automatically (eg in CI/CD)

Slide 62

Slide 62

@hdv automated testing Most of these integrate with your CI/CD and can export to interoperable data formats

Slide 63

Slide 63

@hdv automated testing

Slide 64

Slide 64

@hdv When to test?

Slide 65

Slide 65

@hdv It’s easier when you do it earlier

Slide 66

Slide 66

@hdv It’s easier when you do it earlier Eg, pick a CMS that supports accessibility

Slide 67

Slide 67

@hdv It’s easier when you do it earlier Eg, pick a CMS that supports accessibility, check designs before building

Slide 68

Slide 68

@hdv It’s easier when you do it earlier Eg, pick a CMS that supports accessibility, check designs before building, check builds before merging

Slide 69

Slide 69

@hdv It’s easier when you do it earlier Eg, pick a CMS that supports accessibility, check designs before building, check builds before merging, check merged code before shipping, etc

Slide 70

Slide 70

@hdv Often & early Once in a while Manual checks that most can do + automated checks WCAG audits, user tests that include users with disabilities

Slide 71

Slide 71

@hdv What? How? Browser tools So tware plugins f When? f Accessibility standards Best practices User testing CLI tools Formal audits O ten, during development Periodically, with audits and user tests

Slide 72

Slide 72

@hdv thank you. Contact/resources talks.hiddedevries.nl @hdv or hidde@hiddedevries.nl Typefaces Bungee by David Jonathan Ross (DJR) Rasa by Anna Giedryś, David Březina (Rosetta)