A presentation at Vue.js Berlin in in Berlin, Germany by Oscar
At the end of February, WebAIM published The WebAIM Million, an accessibility analysis of the homepages of the one million most visited websites.
The findings are depressing. The average site contained about 60 errors. Things went even more downhill when putting JS frameworks in the equation. As a reaction to those findings, this talk tries to shed light on some accessibility best practices regarding accessible inputs, as well as do soulsearching why we, as developers, have failed so badly.
The following resources were mentioned during the presentation or are useful additional information.
Inclusive Vue component library in the making.
An accessibility analysis of the top 1,000,000 home pages.
W3C press release on the launch of the Web Accessibility Initiative in 1997.
Talk by Tatiana Mac on understanding and questioning privilege as well as an important call for inclusion and equality. Must watch. Seriously.
How do browsers and HTML support screen readers today? In this article, Be Birchall explains why it’s so important to prioritize accessibility among teams and why there needs to be more awareness raised among developers. Lack of awareness and prioritization, rather than any technical limitation, is currently the main barrier to an accessible web.
Website accessibility is a buzzword these days, but not everyone has a firm grasp on what that term means. So what is website accessibility? Who is in need of accessible websites? And why should you as a website designer/developer/content creator even care?
Homepage of the WAI
Index of the ARIA specification
Success Criteria and Techniques for accessible websites
Ethan Marcotte’s well-written and important response to the WebAIM finding. Including the conclusion that «[t]he only way this work gets done is if we start small, and if we work together.»
Another example published in response to WebAIM’s findings, calling for developers to keep advocating accessibility.
A collection of tips, tests and patterns to build accessible interfaces.
Scott O’Hara compiled a list of resources, which is well worth digging into. Loads of valuable stuff in there.
A base styleguide/pattern library/baseline.
A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece.
Written by Heydon Pickering, this book contains some valuable examples, especially if you are starting to build inclusive interfaces.
Ryan Florence’s project, trying to build an accessible library to build React applications upon.
Patterns & strategies for accessible web-apps. Maintained by Marcus Herrmann.
Routing using Vue router isn’t accessible out-of-the-box. Marcus Herrmann shows how to improve on this.
Deque University offers training for every level of expertise and every area expertise in digital accessibility.
An open source accessibility rules library for automated testing. Integrate accessibility into your existing testing environment.
Digital accessibility consultants and products
A weekly newsletter on all things accessibility.
An amazingly helpful community about all things web accessibility.
Good introduction on some basics for accessibility in Vue apps.
The article on which I based my implementation, written by James Jacobs on the Pulsar blog.
The definitive guide on making icon buttons accessible, written by Sara Soueidan.
Intro to using aria-hidden.
Extensive guide on different techniques to hide content.
If you want to use required with your input elements, make sure to take the findings of this article into consideration.
Usage guide for aria-describedby.
The purpose of this technique is to demonstrate how to use the WAI-ARIA aria-describedby property to provide programmatically determined, descriptive information about a user interface element.
Simple, lightweight, model-based validation for Vue.js.
NPM package of the discussed input implementation.