Accessibility, Inputs & Vue I was given more time than expected I think we need to talk about accessibility more broadly

Isn’t the Web Accessible?

« 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

It is. In theory. Talk about HTML semantics before 2nd point webAIM tested homepages and the results were depressing

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

Neglect

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

!”!”!!#!!! Mostly white, male and able-bodied

It’s not us. It’s society. But also us. We are privileged We are responsible for what we do with it

Web Accessibility In Context https://www.smashingmagazine.com/2019/06/web-accessibility-context/ Be Birchall

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

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

🚀

Accessibility is no rocket science. Some things are hard, yes. But let’s get the basics right.

Babelfish

WAI W3C Web Accessibility Initiative https://www.w3.org/WAI/ Group of authors in W3C working improving accessibility in websites

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

WCAG Web Content Accessibility Guidelines https://www.w3.org/WAI/standards-guidelines/wcag/ Define Success Criteria Show Techniques

a11y Shorthand for accessibility Eleven letters between a and y Term itself is not undisputed in the accessibility community

Making the Web Accessible

« 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?»

Collaboration On your own, understanding the ARIA and WCAG pages can be daunting

https://a11yproject.com/

https://a11y-style-guide.com/

https://inclusive-components.design/ Blog trying to be a Pattern Library

https://ui.reach.tech/

https://accessible-app.com/ Marcus Herrmann

https://dequeuniversity.com/ Online courses & resources

https://axesslab.com/ Digital consultancy & blog

https://a11yweekly.com/ Digital consultancy & blog

Amazingly helpful community Closed registration, but come talk to me afterwards if you want to be invited

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

Use Assistive Technology. Start small, by clicking around and listen to the SR output Start navigating around with your keyboard Close your eyes

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

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

Accessible Inputs

« 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

Structure taken from an online vue course

Labeling

Very little has changed

aria-label

Unless you write the crosswords for the New York Times: Don’t make your users guess

Accessible Icon Buttons https://www.sarasoueidan.com/blog/accessible-icon-buttons/

Marking required fields

« 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

aria-hidden Hide an element from Assistive Technology

Hiding elements from screen readers using aria-hidden https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/

Source: Scott O’Hara – Inclusively Hidden https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html

Required Attribute Requirements https://developer.paciellogroup.com/blog/2019/02/required-attribute-requirements/

Describing fields

And with this problem we leave the realm of native HTML

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

Describing aria-describedby https://developer.paciellogroup.com/blog/2018/09/describing-aria-describedby/ Scott O’Hara

Expanding the Toolbox

Validation & Vue

v-model compatibility Lets start on the component level

Basic Accessibility

https://www.npmjs.com/package/uuid IDs can very reliably be generated

Validation Validation has been a drag

aria-invalid Communicate the validity of a value

https://github.com/vuelidate/vuelidate

Punctuation is important especially with multiple strings

« 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/

https://github.com/ovlb/vue-a11y-input The documentation is not finished.

Danke. Thank you. Merci. спасибо. Oscar Braunert code & design www.ovl.design o@ovl.design