Accessibility in Vue

Accessibility Features to Implement in the Vue Application

Web accessibility in Vue can be achieved in various methods. Let us look at some ways to achieve accessibility in Vue.

Managing Focus

An accessible website will enable users to access all content and functionality through a keyboard. Keyboard focus and navigation are essential when developing an accessible web application. If users cannot use other input mechanisms, they will have difficulty interacting and navigating the website.

 

Web applications can introduce issues for these users by:

• Modifying the tabindex or generating poorly structured HTML.
• Removing visual indicators of the element which is currently in focus.

 

Users can only navigate to buttons, links, and form controls with a keyboard by default. We must use these elements as much as possible, and if not possible, we must ensure that tabindex is 0 to make it keyboard accessible. 

 

While users interact with the web application, Vue makes many modifications to the DOM in the background. This may result in the user’s focus being thrown around, making the experience very frustrating. Vue allows web developers to create custom directives, which can help focus the form elements.

 

Vue-focus can also manage focus when modals are introduced or enable users to move between form fields or elements using cursor keys.

 

Code

// Register v-focus, a global custom directive
Vue.directive("focus", {
 // When the bound element is inserted into the DOM
 inserted: function (element) {
   // Focus the element
   element.focus();
 },
});

Another method of handling focus within a web application is through global event handling. If we use vue-global-events, we will be able to access the GlobalEvents component, which will allow us to listen to global events.

We can then register global events in a component in the template and define how the web application must respond to them.

 

Code

<template>
 <div>
   <GlobalEvents @focus="handleAppFocus"></GlobalEvents>
   <!-- Component Contents -->
 </div>
</template>

<script>
export default {
 methods: {
   handleAppFocus() {
     console.log("Focus");
   },
 },
};
</script>

Page Title for Each Page

The page title gives the users an overview of the page. Search engines also rely on the page title to determine if a page is relevant to their search or not. Providing a unique and concise title helps assistive technology users understand what the web page is about.

 

We can do this by declaring meta tags in the routes in a Vue application.

Code:

{
     path: '/',
     name: 'home',
     component: HomePage,
     meta: {
       title: 'Home'
     }
   },
  {
     path: '/contact',
     name: 'contact',
     component: ContactPage,
     meta: {
       title: 'Contact'
     }
   }, 
]

We must use the beforeEach hook that the Vue-router provides for the meta tags to display. The beforeEach hook is called in creation order whenever navigation is triggered. It takes the following three arguments:

• to: The route object being directed to.
• from: The source route 
• next: The function that resolves the beforeEach hook when called. If not called, the route will never be resolved.

 

Code:

router.beforeEach((to, from, next) => {
 document.title = to.meta.title
 next()
})

Skip Link

We should add a link at the top of each page that goes directly to the main content area so that users can skip repeated content on multiple web pages.

 

This is usually done on the top of the App.vue,  as it will be the first focusable element on all the pages.

 

Code:

<ul class="skipLinks">
 <li>
   <a href="#main" ref="skipLink">Skip to the main content</a>
 </li>
</ul>

 

Using the appropriate CSS style, we can hide the link. 

 

Once a user changes the route, we must bring the focus back to the skip link by calling focus to the ref provided.

 

Code:

<script>
export default {
 watch: {
   $route() {
     this.$refs.skipLink.focus();
   },
 },
};
</script>

ARIA

ARIA (Accessible Rich Internet Applications) are an integral part of an accessible web application. It is essential to create custom elements or modify standard HTML elements. It also allows the developer to specify attributes that change how an element is translated into the accessibility tree. 

 

ARIA lets us specify attributes, but it does not make an element focusable or give it any keyboard event listeners, and this needs to be done by the web developer.

 

We can add missing attributes to the checkbox element using an aria-checked and ARIA role attribute. This will identify the element as a checkbox to users using screen readers.

 

Code:

<li class="checkbox" role="checkbox" checked aria-checked="true">
 Select
</li>

ARIA attributes can be used along with Vue components easily. We can add them the same way we would do in standard HTML. We can also bind the value of the ARIA attribute to the component data.

 

Code:

<template>
 <div :aria-hidden="!isActive" role="button"></div>
</template>

<script>
export default {
 data: () => ({
   isActive: false,
 }),
};
</script>

Alternative Text for Images

Adding the "alt" section will make it easy for blind people to understand the image using a screen reader.

 

Code:

<img src="images/landing.jpg" alt="landing image">

Note: Use null alt text on purely decorative images.

Headings in Hierarchical Order

Headings help users navigate an application, and having descriptive headings for every section of the application makes it easier for the users to predict the content of each section. 

 

The practices to follow for heading are as follows:-

• Follow a proper hierarchical order for headings (h1 - h6).
• Headings must be informative, clear, unique, and brief.
• Do not skip headings within a section.
• Use heading tags instead of styling text to give the visual appearance of headings.

Specifying the Text Content's Language

The HTML lang attribute makes it easy for screen readers to identify the text content language. The lang attribute takes an ISO language code as its value.

 

The screen reader uses its default language if the application does not specify any text content language. If the page isn't actually in the default language, this leads to an issue, and the screen reader might not announce the page's text accurately.

 

Example:

<html lang="en">

Landmarks to Navigate to Sections

Landmarks allow easy access to the various sections within a Vue app. This allows assistive technology users to navigate each section of the application and skip over the content.

 

Using HTML5 semantic elements or ARIA roles, we can enable this. Let's have a look at the HTML5 semantic elements and alternative ARIA.

HTML element	ARIA Role	Landmark Purpose
header	role="banner"	Title of the page
main	role="main"	The main content of the document.
nav	role="navigation"	Collection of links that are suitable for use when navigating the document or related documents.
footer	role="contentinfo"	Information about the parent document like footnotes, copyrights, links, privacy statements, etc.
Not available	role="search"	Contains the search functionality for the application.
form	role="form"	Collection of elements associated with forms.
section	role="region"	The relevant content that the users will most likely want to navigate to.
aside	role="contentinfo"	Supports the main content, yet is separated and meaningful on its own content

Frequently Asked Questions

1. What are the web accessibility principles to be followed while making an application in Vue?

Ans:- The WCAG consists of four principles known as POUR, used to achieve web accessibility in Vue. They are:

• Perceivable: The users must be able to identify contents and interact with the interface using one or more of their senses through the browser or assistive technologies like screen readers.
• Operable: The users must be able to interact with all controls and interactive elements using a keyboard, mouse, or assistive device.
• Understandable: The content and functions must be easily understood.
• Robust: The website should be compatible across all devices, platforms, and browsers. 

 

2. Name some accessibility tools to test web accessibility in Vue applications.

Ans:- Some of the tools to test if the web application meets accessibility guidelines are as follows:-

• Web Accessibility Evaluation Tool (WAVE)
• Screen Readers on Chrome Vox
• Color Contrast Checker Tool on WebAIM
• Accessibility auditing for Vue.js applications on Vue axe

 

3. What is the use of the Vue announcer library?

Ans:- The Vue announcer Library allows people using screen readers to tell what's going on in the application.

Code:

import Vue from 'vue'
import VueAnnouncer from '@vue-a11y/announcer'
Vue.use(VueAnnouncer)

 

4. How to enable keyboard handler?

Ans:- There should be a corresponding keyboard handler for every mouse event handler. It allows users to navigate through the platform with their keyboard. This can be done by adding the Vue-directive "keyup" and the modifier ".enter" as demonstrated above.

Code:

<button type="enter" @keydown.enter="confirmMessage" @click.prevent="confirmMessage"> Enter </button>

 

5. How to achieve accessibility in Vue while using forms?

Ans:- Accessibility in Vue while using forms can be achieved in the following ways:-

• Using semantic elements for forms elements, like:<form>, <input>,<label>,<button>, <textarea>, etc.
• Including labels for the form elements
   

Example:

<label for = "firstName">First Name</label> 
<input type = "text" name = "firstName" id = "firstName" v-model = "firstName" /

An input field's "for" attribute and "id" attribute must be the same o bind them together. This will allow the screen reader to notify the user when they click on the associated name's text field.

Key Takeaways

To achieve accessibility in Vue, we must ensure that the design can support the accessible implementation. The design should consider color contrast, font selection, text sizing, language, the structure of the content in the application, etc. In this blog, we discussed some ways to achieve accessibility in Vue, like managing focus, setting the page title, using alternative text for images, etc.
 

Don't stop here. Check out our Learn Vue free course to learn Vue from scratch. Also, feel free to check out the blog Vue JS Vs. React in 2021.

 

We hope you found this blog useful. Liked the blog? Then feel free to upvote and share it.