Shifting left, or: making accessibility easier by doing it earlier

👈Shifting left or: making accessibility easier by doing it earlier Hidde de Vries, Sanity online meetup, Online, 27 July 2022 @hdv

@hdv Hi, I’m Hidde developer relations at Sanity + accessibility specialist sanity.io hidde.blog

@hdv accessibility, a brief intro

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

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

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

@hdv 1-2% 4% blind/visually impaired colour blind ` OOGVERENIGING (1 IN 12 MEN, 1 IN 250 WOMEN) neurological conditions This concerns a lot of people 9% motor impairments 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 assume less about how people use your product

@hdv What to test?

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

counting Level A + AA criteria in WCAG 2.1 EXAMPLES

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

@hdv How to test?

@hdv manual vs automated You will need both!

@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 testing Tests that most people on the team can do periodically

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

@hdv manual: keyboard

<details> <select> Can I get to all interactive elements? <input> <textarea> <a> <button>

@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: images Is the image the only thing in a link? The alt is now the link’s name.

@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: timing Are time limits over 20hrs or can they be turned o f? f You’ve been logged out automatically

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

@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 Most of these integrate with your CI/CD and can export to interoperable data formats

@hdv automated testing

@hdv It’s easier when you do it earlier

@hdv Find barriers in your site before it deploys

@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 Wysiwym What you see is what you mean

@hdv colour contrast Get palettes from images

@hdv “Make it yours” https://www.sanity.io/blog/sanity-studio-v3-developer-preview

@hdv Sanity Validation rules in Portable Text

@hdv Example: transition.tk Sanity Custom annotations

@hdv portable text Custom annotations https://kittygiraudel.com/2022/07/25/international-content-with-sanity-portable-text/

@hdv What? How? Manual checks Browser tools CLI tools When? f Accessibility standards Best practices User testing Early, eg with right CMS, auto checks etc O ten, during development Periodically, with audits and user tests

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