Understanding Web Accessibility in Vue.js

As developers, we are tasked with creating applications inclusive of all people, regardless of their hardware, software, language, location, or ability.

Web Accessibility (also known as A11y) is essential for developers and organizations that want to create high-quality websites and web tools that do not exclude people from using their products and services.

In this article, we will tackle the basics of web accessibility in our Vue.js applications, looking at some concepts and strategies to consider when designing accessible applications.

Let’s begin!

What is WCAG and why is it so important?

The world wide web being universal is essential to it being powerful. That means it should ensure equal access and participation in the digital world for all individuals, regardless of their abilities or disabilities.

WCAG stands for Web Content Accessibility Guidelines. It is a set of guidelines that help make websites and web applications more accessible to people with disabilities.

WCAG is developed by the World Wide Web Consortium (W3C) and is the most widely accepted standard for web accessibility.

WCAG is divided into three levels of conformance:

• Level A: This is the lowest level of conformance. Websites that meet Level A requirements are considered to be "generally accessible."
• Level AA: This is a higher level of conformance. Websites that meet Level AA requirements are considered to be "more accessible."
• Level AAA: This is the highest level of conformance. Websites that meet Level AAA requirements are considered to be "highly accessible."

There are many benefits to making your website or web application accessible.

Here are some key reasons for its importance;

• Legal and Ethical Obligations: Many countries have laws and regulations in place that require websites and digital content to be accessible to individuals with disabilities. Failing to comply with these accessibility standards can lead to legal consequences and potential discrimination claims.

• Enhanced User Experience: Web accessibility goes hand in hand with good user experience (UX) design. By implementing accessibility features, websites become more intuitive, easier to navigate, and more enjoyable for all users.

• Expanded Reach and Customer Base: Making your website accessible opens up opportunities to reach a broader audience. Approximately 15% of the world's population has some form of disability, and neglecting accessibility means potentially excluding a significant portion of users.

• SEO and Search Rankings: Accessibility practices align with search engine optimization (SEO) guidelines. Search engines value websites that are accessible and user-friendly, as these factors contribute to a positive user experience.

Now let’s jump into some parts of our web application we can improve to ensure accessibility.

Ensure the Right Color Contrast

Color enhances the design and appearance of information on the web. Although color may be a great tool to visually convey information, it can create accessibility barriers.

When using color, it is important to have sufficient contrast between two colors: the background color and the foreground color. Low contrast colors will make it difficult for visual users to read and/or understand the content (text or images of text) on the page.

Color contrast guidelines indicate that there should be at least a 4.5:1 ratio between the foreground content and the background content. However, this guideline is not applicable if:

• The content is large. If the text is large enough to exceed 24 px. font size or 18.7px font size if bold, a contrast ratio of 3:1 can exist.
• The content is decorative
• The content is part of a logo or wordmark

When dealing with large amounts of text, it is recommended to provide a color contrast ratio of 3:1 to ensure accessibility for all users. For optimal readability, black text on a white background is considered the most effective choice. Additionally, employing warm and cold colors can enhance the color contrast, leading to improved legibility and visual appeal.

There are many online tools that can help you test color contrast. One popular tool is the WebAIM Color Contrast Checker. This tool allows you to enter the text and background colors, and it will calculate the color contrast ratio.

Generate a Good Content Structure

A very important piece of web accessibility should be designing your content to be accessible. This does not only apply to color, font and text but also information structure.

Landmarks

Landmarks provide programmatic access to sections within an application. This is useful to users who rely on assistive technologies to navigate to each section of your applications and also skip over content.

ARIA roles can be introduced to achieve this. ARIA roles provide semantic meaning to content, allowing screen readers and other tools to present and support interaction with object in a way that is consistent with user expectations of that type of object.

Headings

Users can navigate an application through headings. Having descriptive headings for every section of your application makes it easier for users to predict the content of each section. When it comes to headings, there are a couple of recommended accessibility practices:

• Nest headings in their ranking order: <h1> - <h6>
• Don’t skip headings within a section
• Use actual heading tags instead of styling text to give the visual appearance of headings

Create Semantic Forms

Forms are a very common element, but if not created properly, they can be inaccessible to some.

When creating a form, you can use the following elements: <form>, <label>, <input>, <textarea>, and <button>

It is recommended to place labels on top or left of your form fields

<form action="/dataCollectionLocation" method="post" autocomplete="on">
  <div v-for="item in formItems" :key="item.id" class="form-item">
    <label :for="item.id">{{ item.label }}: </label>
    <input
      :type="item.type"
      :id="item.id"
      :name="item.id"
      v-model="item.value"
    />
  </div>
  <button type="submit">Submit</button>
</form>

Including an autocomplete='on is also very useful as it provides some assistance in filling out form values. You can also set different values for the autocomplete attribute for each input.

Labels

Provide labels to describe the purpose of all form controls; linking for and id:

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

If you inspect this element in your Chrome developer tools and open the Accessibility tab inside the Elements tab, you will notice the input gets its name from the label.

aria-label

You can also give the input an accessible name with [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label).

<label for="name">Name</label>
<input  type="text"  name="name"  id="name"  v-model="name"  :aria-label="nameLabel"/>

aria-labelledby

Using [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) is similar to aria-label, except it is used if the label text is visible on screen. It is paired to other elements by their id, and you can link multiple ids:

<form
  class="demo"
  action="/PostLocation"
  method="post"
  autocomplete="on"
>
  <h1 id="billing">Billing</h1>
  <div class="form-item">
    <label for="name">Name:</label>
    <input
      type="text"
      name="name"
      id="name"
      v-model="name"
      aria-labelledby="billing name"
    />
  </div>
  <button type="submit">Submit</button>
</form>

Placeholders

It is recommended to avoid using placeholders in our form inputs as they do not meet the color contrast criteria. Trying to fix the color contrast may also result in the input looking like it has been pre-populated.

It is best to provide all the information the user needs to fill out forms outside of any inputs. Also, when attaching information for your form fields, it is recommended to link them correctly to their associated input.

You can achieve this with an aria-labelledby or a aria-describedby

<fieldset>
  <legend>Using aria-labelledby</legend>
  <label id="date-label" for="date">Current Date:</label>
  <input
    type="date"
    name="date"
    id="date"
    aria-labelledby="date-label date-instructions"
  />
  <p id="date-instructions">MM/DD/YYYY</p>
</fieldset>

Buttons

When using buttons inside a form, you must set the type to prevent submitting the form. You can also use an input to create buttons:

<form action="/postform" method="post" autocomplete="on">
  <!-- Buttons -->
  <button type="button">Cancel</button>
  <button type="submit">Submit</button>

  <!-- Input buttons -->
  <input type="button" value="Cancel" />
  <input type="submit" value="Submit" />
</form>

Conclusion

Understanding web accessibility in Vue.js is not just a matter of compliance; it is a powerful tool to create inclusive and user-friendly experiences for all. By incorporating accessibility best practices into your Vue.js projects, you can ensure that your websites and applications are accessible to individuals with disabilities, empowering them to fully engage with your content.

You can read more on Accessibility in Vue.js through the Vue.js Docs or checkout the MDN accessibility guide, and always remember, web accessibility is a continuous journey. Staying up-to-date with the newest technologies and techniques is crucial. By prioritizing accessibility, you foster inclusivity within the Vue.js community.