A toolkit for web accessibility

A presentation at Stay Curious by Beyond Tellerrand by Hidde de Vries

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

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

@hdv accessibility, a brief intro

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

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

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

@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

@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

@hdv What to test?

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

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

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

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

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

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

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

@hdv this is wcag thisiswcag.com

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

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

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

@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

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

@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

@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

@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

@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

@hdv How to test?

@hdv manual vs automated You will need both!

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

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

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

@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

@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)

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

@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.

@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.

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

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

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

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

@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.

@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?

@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?

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

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

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

@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

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

@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>

@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

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

@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

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

@hdv Firefox dev tools - Visualise tabbing order

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

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

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

@hdv html validator validator.nu

@hdv wave wave.webaim.org

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

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

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

@hdv automated testing

@hdv When to test?

@hdv It’s easier when you do it earlier

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

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

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

@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

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

@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

@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)

Hidde de Vries
@hdv

1 / 72

Web accessibility is easier to achieve and maintain with the right tools. Some are useful to help you make the right choices, others can find certain problems automatically, often even before your product or page ships. In this talk, Hidde will tell us all about the tools to use to improve web accessibility.

Resources

The following resources were mentioned during the presentation or are useful additional information.

Quick Reference version of WCAG (filtered to 2.1)
This is WCAG (interpretation of WCAG focused on using plain language)
WCAG 2.1 standard
Involving users in web projects for better accessibility - W3C WAI
How people with disabilities use the web - tools and techniqeus - W3C WAI
Things to consider when doing usability testing with disabled people - Frozen Rockets
The automated accessibility coverage report - Deque
The Podcast Transcript Experimentation - Darice de Cuba
HTML validator
Wave
Accessibility tool audit - AlphaGOV

In which the GOV.UK folks compare different accessibility testing engines