A quick intro to JavaScript accessibility with Vue.js
taught by: Marcus Herrmann
Session Summary
Although their reputation regarding accessibility is rather bad, it is possible to create inclusive web apps with modern JavaScript frameworks like Vue.js.
Description
In this mini workshop, I'll highlight two typical accessibility problems of web-apps, and together we'll tackle them by writing code in Vue.js. Additionally, participants will learn how to use architectural strengths of modern JavaScript frameworks for a more inclusive experience.
It is recommended that you create an account with CodeSandBox.io for the interactive exercises. As a fallback, CSB can be used in limited guest mode.
Practical Skills
- At the end of part one you know that a dynamic document and a asynchronously updated DOM are problematic for screen reader users - but also that web developer have tools at their disposal. You'll learn how to use ARIA Live Regions in vue.js, and when to use which setting (polite vs assertive).
- A second tool in your toolbelt that will help you to remedy the problem of a dynamic DOM is focus management. At the end of part two you'll know how to implement simple focus management, using Vue's DOM node references ($refs), Vue's life-cycle hooks and JavaScript's native focus() function.
- Lastly, I'll show participants that typical traits of JavaScript frameworks (statefulness, props and component-based design) can be used for accessibility. In a concrete example, we'll learn how to facilitate a proper HTML headline outline by passing headline levels as props into components.