Getting Started with Web Accessibility in Vue

How does Vue work?

When a browser parses an HTML document, it will create a Document Object Model (DOM) to represent the document as a collection of Nodes and Objects, like a tree.

Source: https://www.w3schools.com/js/js_htmldom.asp
document.getElementById('item').appendChild(newItem);
Source: https://www.cnblogs.com/xuntu/p/6800547.html
var vm = new Vue({
// options
})
Source: https://vuejs.org/v2/guide/reactivity.html?
Source: https://vuejs.org/v2/guide/instance.html

Getting Started with Accessibility in Vue

I’ll go through a few different ways you can improve the accessibility of your Vue application, with some examples. I will be providing some resources at the end of this post as well if you are particularly interested!

Managing Focus

Keyboard focus and navigation is extremely important when developing for the accessible web. If a user cannot use other input mechanisms, they will have an extremely hard time interacting and navigating your site.

  • Removing visual indicators of which element is currently in focus.
  • Modifying the tabindex , or generating badly structured HTML.
In the second image, the keyboard focus is on the ‘Search Twitter’ input, as we can see by the green(ish) outline.

ARIA

ARIA (Accessible Rich Internet Applications) are a core part of simple accessible web development. It works by letting the developer specify attributes that change the way an element is translated into the accessibility tree. [14]

Setting the Title

Dynamically setting the title of a webpage is important for a number of reasons. Those people seasoned in the art of SEO (Search Engine Optimisation) will know that having relevant titles for each page of a website is hugely important.

  • to — This is the route object being directed to.
  • from — This is the source route (the one being navigated away from.
  • next — This is a function which resolves the hook when called. This must be called or else the route will never be resolved.

Sources:

[1] — The Vue Instance

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Emily Mears

Emily Mears

computer science student at ucl, feminist, cheese fan, vue / react, looking forward to the future 🌏