👈Shifting left or: making accessibility easier by doing it earlier Hidde de Vries, Sanity online meetup, Online, 27 July 2022 @hdv
Slide 1
Slide 2
@hdv Hi, I’m Hidde developer relations at Sanity + accessibility specialist sanity.io hidde.blog
Slide 3
@hdv accessibility, a brief intro
Slide 4
@hdv Web accessibility to ensure people with disabilities can use our site/app
Slide 5
@hdv Web accessibility to ensure people with disabilities can buy our product
Slide 6
@hdv Web accessibility to ensure people with disabilities can use our service
Slide 7
@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
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
@hdv assume less about how people use your product
Slide 10
@hdv What to test?
Slide 11
@hdv a11y standards + Best practices + (You’ll need all of the above) User testing
Slide 12
@hdv a11y standards + Best practices + (You’ll need all of the above) User testing
Slide 13
@hdv WCAG 2.1 w3.org/TR/WCAG21 WCAG: internationally implemented guidelines that provide a baseline for testing web accessibility
Slide 14
@hdv quick reference w3.org/WAI/WCAG21/quickref/
Slide 15
@hdv this is wcag thisiswcag.com
Slide 16
@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
Slide 17
@hdv a11y standards + Best practices + (You’ll need all of the above) User testing
Slide 18
@hdv How to test?
Slide 19
@hdv manual vs automated You will need both!
Slide 20
@hdv manual vs automated <img src=”50-percent-off” /> 50% off
Slide 21
@hdv manual vs automated <img src=”50-percent-off” /> Problem: there is no alt (machines can establish this) 50% off
Slide 22
@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 23
@hdv Manual testing Tests that most people on the team can do periodically
Slide 24
@hdv manual: page title Is there a title? Does it describe the page?
Slide 25
@hdv manual: keyboard
<details> <select> Can I get to all interactive elements? <input> <textarea> <a> <button>Slide 26
@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 27
@hdv manual: images Is the image the only thing in a link? The alt is now the link’s name.
Slide 28
@hdv manual: audio Is everything in the audio available as text?
Slide 29
@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 30
@hdv manual: headings Do headings describe the section they’re a heading of?
Slide 31
@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 32
@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 33
@hdv manual: timing Are time limits over 20hrs or can they be turned o f? f You’ve been logged out automatically
Slide 34
@hdv manual: color modes Can everything be used with Windows High Contrast Mode on?
Slide 35
@hdv semi-automated testing Tests that remove some of the manual work so you can make decisions quicker
Slide 36
@hdv Firefox dev tools - Visualise tabbing order
Slide 37
@hdv Firefox dev tools - “no false positives” - integrates with existing tests - runs in major browsers and command line
Slide 38
@hdv Firefox dev tools - Visualise tabbing order - Test Contrast, Keyboard and Text Labels on a page
Slide 39
@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 40
@hdv html validator validator.nu
Slide 41
@hdv wave wave.webaim.org
Slide 42
@hdv automated testing Tests you can run against a website automatically (eg in CI/CD)
Slide 43
@hdv automated testing Most of these integrate with your CI/CD and can export to interoperable data formats
Slide 44
@hdv automated testing
Slide 45
@hdv It’s easier when you do it earlier
Slide 46
@hdv Find barriers in your site before it deploys
Slide 47
@hdv It’s easier when you do it earlier
Slide 48
@hdv It’s easier when you do it earlier Eg, pick a CMS that supports accessibility
Slide 49
@hdv It’s easier when you do it earlier Eg, pick a CMS that supports accessibility, check designs before building
Slide 50
@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 51
@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 52
@hdv Wysiwym What you see is what you mean
Slide 53
@hdv colour contrast Get palettes from images
Slide 54
@hdv “Make it yours” https://www.sanity.io/blog/sanity-studio-v3-developer-preview
Slide 55
@hdv Sanity Validation rules in Portable Text
Slide 56
@hdv Example: transition.tk Sanity Custom annotations
Slide 57
@hdv portable text Custom annotations https://kittygiraudel.com/2022/07/25/international-content-with-sanity-portable-text/
Slide 58
@hdv portable text Custom annotations https://kittygiraudel.com/2022/07/25/international-content-with-sanity-portable-text/
Slide 59
@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
Slide 60
@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)
