Accessibility, Inputs & Vue I was given more time than expected I think we need to talk about accessibility more broadly
Slide 1
Slide 2
Isn’t the Web Accessible?
Slide 3
« The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.» Sir Tim Berners-Lee, 1997 https://www.w3.org/Press/IPO-announce When the W3C launched the Web Accessibility Initiative
Slide 4
It is. In theory. Talk about HTML semantics before 2nd point webAIM tested homepages and the results were depressing
Slide 5
« 59,653,607 distinct accessibility errors were detected across the 1 million home pages—an average of 59.6 errors per page.» The WebAIM Million – Errors and Error Density, 2019 https://webaim.org/projects/million/ 97.8% of home pages had detectable WCAG 2 failures! Accessibility is a topic incredibly hard to test automatically Error free sites probably under 1 % How did this happen?
Slide 6
Neglect
Slide 7
These are very basic things Mostly easy to fix Alt text for large publications requires a team effort, especially if it is missing for a long time
Slide 8
Slide 9
!”!”!!#!!! Mostly white, male and able-bodied
Slide 10
It’s not us. It’s society. But also us. We are privileged We are responsible for what we do with it
Slide 11
Slide 12
Web Accessibility In Context https://www.smashingmagazine.com/2019/06/web-accessibility-context/ Be Birchall
Slide 13
We need to act. If we don’t want to look like a bunch of overpaid bollocks. Get people involved in web dev Listen to those who speak up
Slide 14
Complexity Over time websites have evolved from a medium to exchange scientific papers to one in which you can do basically anything These are the things that are – more often than not – not easy to fix
Slide 15
🚀
Slide 16
Accessibility is no rocket science. Some things are hard, yes. But let’s get the basics right.
Slide 17
Babelfish
Slide 18
WAI W3C Web Accessibility Initiative https://www.w3.org/WAI/ Group of authors in W3C working improving accessibility in websites
Slide 19
ARIA Accessible Rich Internet Applications https://www.w3.org/WAI/standards-guidelines/aria/ A Specification «These semantics are designed to allow an author to properly convey user interface behaviors and structural information to assistive technologies in document-level markup.»
Slide 20
WCAG Web Content Accessibility Guidelines https://www.w3.org/WAI/standards-guidelines/wcag/ Define Success Criteria Show Techniques
Slide 21
a11y Shorthand for accessibility Eleven letters between a and y Term itself is not undisputed in the accessibility community
Slide 22
Making the Web Accessible
Slide 23
« The only way this work gets done is if we start small, and if we work together.» Ethan Marcotte – The web we broke https://ethanmarcotte.com/wrote/the-web-we-broke/ He asked the question «What’s one thing I wish I understood better about accessibility?»
Slide 24
Collaboration On your own, understanding the ARIA and WCAG pages can be daunting
Slide 25
https://a11yproject.com/
Slide 26
https://a11y-style-guide.com/
Slide 27
https://inclusive-components.design/ Blog trying to be a Pattern Library
Slide 28
https://ui.reach.tech/
Slide 29
https://accessible-app.com/ Marcus Herrmann
Slide 30
https://dequeuniversity.com/ Online courses & resources
Slide 31
https://axesslab.com/ Digital consultancy & blog
Slide 32
https://a11yweekly.com/ Digital consultancy & blog
Slide 33
Amazingly helpful community Closed registration, but come talk to me afterwards if you want to be invited
Slide 34
Use semantic markup. And ARIA where applicable. The first rule of ARIA is «Do not use ARIA» e.g. buttons «ARIA, the language created to help make interfaces more accessible, was found on more than sixty percent of the home pages surveyed. Unfortunately, those home pages were more likely to have detectable accessibility errors.» Ethan Marcotte citing from AIM 1 million
Slide 35
Use Assistive Technology. Start small, by clicking around and listen to the SR output Start navigating around with your keyboard Close your eyes
Slide 36
Ask users. They are the experts. Nothing about us without us Be humble We are not able to say what works, e.g. steep wheelchair ramp
Slide 37
Put Accessibility in the Definition of Done … and be it your own. That means things you are going to do. It’s impossible to just make a whole existing site accessible. Try to get the people you are reporting aboard and agree
Slide 38
Accessible Inputs
Slide 39
« 59% of the 3.4 million form inputs identified were unlabeled (either via <label>, arialabel, or aria-labelledby).» The WebAIM Million – Form Labeling «The presence of unlabeled form controls was a strong indicator of broader errors—pages with at least one missing form label averaged nearly 30 more errors than those without any label errors.» Past interfaces I built are full of errors, present ones probably too
Slide 40
Structure taken from an online vue course
Slide 41
Slide 42
Labeling
Slide 43
Slide 44
Slide 45
Slide 46
Very little has changed
Slide 47
aria-label
Slide 48
Slide 49
Unless you write the crosswords for the New York Times: Don’t make your users guess
Slide 50
Slide 51
Slide 52
Accessible Icon Buttons https://www.sarasoueidan.com/blog/accessible-icon-buttons/
Slide 53
Marking required fields
Slide 54
Slide 55
Slide 56
« WAI-ARIA provides a collection of accessibility states and properties […].» https://www.w3.org/TR/wai-aria/#usage which are used to support platform accessibility APIs on various operating system platforms Markup static, ARIA allows developers to change things dynamically. Hence the rich
Slide 57
aria-hidden Hide an element from Assistive Technology
Slide 58
Hiding elements from screen readers using aria-hidden https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/
Slide 59
Slide 60
Source: Scott O’Hara – Inclusively Hidden https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
Slide 61
Slide 62
Slide 63
Required Attribute Requirements https://developer.paciellogroup.com/blog/2019/02/required-attribute-requirements/
Slide 64
Describing fields
Slide 65
Slide 66
And with this problem we leave the realm of native HTML
Slide 67
aria-describedby Describe an element using the text content of another aria-describedby, provides the means to associate an element with the text of another object, or objects, in the document. When properly used, this attribute can provide the necessary information to assist in creating inclusive user experiences.»
Slide 68
Describing aria-describedby https://developer.paciellogroup.com/blog/2018/09/describing-aria-describedby/ Scott O’Hara
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Expanding the Toolbox
Slide 74
Validation & Vue
Slide 75
v-model compatibility Lets start on the component level
Slide 76
Slide 77
Slide 78
Basic Accessibility
Slide 79
Slide 80
https://www.npmjs.com/package/uuid IDs can very reliably be generated
Slide 81
Slide 82
Slide 83
Slide 84
Slide 85
Validation Validation has been a drag
Slide 86
Slide 87
Slide 88
aria-invalid Communicate the validity of a value
Slide 89
Slide 90
Slide 91
https://github.com/vuelidate/vuelidate
Slide 92
Slide 93
Slide 94
Punctuation is important especially with multiple strings
Slide 95
Slide 96
Slide 97
« The only way this work gets done is if we start small, and if we work together.» Ethan Marcotte – The web we broke https://ethanmarcotte.com/wrote/the-web-we-broke/
Slide 98
https://github.com/ovlb/vue-a11y-input The documentation is not finished.
Slide 99
Danke. Thank you. Merci. спасибо. Oscar Braunert code & design www.ovl.design o@ovl.design
