19 Dec 2022
12 min read
Building accessible applications gives everyone equal access to the web irrespective of their condition. There are several techniques, tools and guidelines available for building accessible front-end applications, making the job easier than ever before.
In this tutorial, you will learn about web accessibility, why it is essential to build accessible front-end applications that will benefit all users and tools you can leverage to implement accessibility in your workflow.
Before we dive into web accessibility, we must know what the term accessibility entails.
Accessibility is often abbreviated to A11y for short. A11y is created by combining the:
a - first letter of accessibility
11 - 11 letters between first and last letters of accessibility
y - last letter.
Accessibility means the ability to have access to anything irrespective of one's condition.
We can see how lack of accessibility affects our everyday life. For example, we see how difficult it is for someone in a wheelchair to visit some places that are built without accessibility in mind, we can also see how some people with specific disabilities like blindness find it challenging to operate or use a website.
A website is accessible when its content is available and can be operated by literally anyone.
According to Wikipedia, web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the world wide web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed.
As a developer, it is easy to assume that all users access our website the same way, which is not valid. Some users access websites with a keyboard, mouse, voice-over, and many more devices. When you develop a website with accessibility in mind, all users have equal access to the web page's information and functionality.
Web accessibility is important because it benefits everyone. The web has become part of our lives—people from different parts of the world access the web daily. People use the web to study, do online shopping, book doctor's appointments, chat with family and friends, etc.
The web should be accessible to everyone to provide equal access to users and not limit them from getting the web's full benefits and capacity.
Also, an accessible website can help people with disabilities actively use the web without obstructions.
The Web Content Accessibility Guidelines (WCAG) provide an international set of guidelines and principles for web accessibility.
WCAG is broken down into four principles known as POUR.
P - Perceivable
O - Operable
U - Understandable
R - Robust
Users must be able to process information from the web. Information is not accessible if the user cannot process it. The perceivable principle states that users should identify contents and interact with the interface using one or more of their senses.
People with disabilities should be able to operate web pages and applications with a variety of tools. If a user cannot operate your website with a mouse, a keyboard-based operation should be implemented. Users should also control elements on the web page, no matter the tools or assistive technology.
The content on the web page must be understandable to all users. Users should be able to understand the information on the web page. If a user can perceive and also operate a website, that doesn't mean they understand it. An understandable website uses clear and concise language and limits confusion and ambiguity. It is also comprehendible, and the functionality is also easy to understand.
Websites should be compatible across all platforms, devices, and browsers. The web content should be compatible with current and future software and tools. A wide range of technologies can also access the content on the web page without limitations. One of the best ways to meet the robustness principle is to be consistent and follow standards and conventions when building for users.
The best way to make our website accessible as a front-end developer is by integrating accessibility into your development process. When this is done, the result is a product that is accessible to everyone.
Let's look at some of the ways we can make our website accessible to everyone.
All web pages should include a
<title><title> element within the head element. The title tag should also be unique to each page on the website. Not only do unique titles allows screen readers to distinguish pages, but they also enhance search results.
The HTML title element makes it easy for screen readers to announce the page title when a website loads. If used correctly, the
<title><title> element is crucial to making our website accessible.
<title>Unique and Descriptive Page Title - cruz page</title>
<h1>Provide a unique and descriptive page title</h1>
When you provide a unique and concise title, it helps users who use assistive technologies understand what a web page entails.
Defining the Language of the website enables screen readers to read out the content with the correct pronunciation. If you do not specify the website's language, the user's assistive technologies will use its default language for rendering the page.
You can identify the primary Language of the website in the HTML element.
<title>Title of the document</title>
The content of the document......
In the example above,
en specifies English as the primary language for the webpage. You can change the
lang attribute to the language of the webpage.
A keyboard can be the primary means some users use to navigate websites. A keyboard user typically uses the
tab key to navigate through contents on the web.
The most crucial goal of keyboard accessibility is to make sure that users can navigate web content efficiently using their keyboard.
Testing your website for keyboard accessibility is pretty straightforward. Just press the tab key and navigate from the top to the bottom of the page.
It is essential you add a “Skip to Main Content” link into the code after the body element. The “Skip to Main Content” will allow keyboard-only users to skip to the main content without going through all the navigation links.
<a class="skip-to-content-link" href=# main">
Skip to main content
Another way to make our website accessible for keyboard users is by using native control elements like
label wherever possible.
The native control element comes with inbuilt keyboard accessibility that is focusable and responds to keypress events by default.
The alt attribute is used to describe an image.
Here is an example of how to use an alt attribute in our HTML
<img src="image-url" alt="A black dog">
alt attribute should be provided for images in our HTML code. This makes it easier for people who cannot see and use a screen reader to understand its image.
This is also useful to people who turn off images due to low bandwidth and technologies that cannot see photos, such as search engines.
alt attribute is not provided, screen readers will pronounce it as "image."
The alt should be as descriptive as possible. It should be able to describe the content of the actual image. In the example above,
alt= "A black dog" describes the dog's colour instead of putting just the dog as a description.
An alt should not include a "picture of" or "image of" because screen readers announce an image as an image. So an
alt= "image of a black dog" would be announced as image, image of a black dog.
One way to accommodate all users is to use semantic HTML elements in our code. A semantic element is the structure of a web page that gives meaning to both the browser and developer.
Examples of semantic elements :
The above semantic element defines the content on a web page.
Examples of non-semantic elements:
The above non-semantic elements tell us nothing about the content of a webpage.
Why you should use semantic HTML:
Let’s look at the benefit of using semantic elements in our code. But before that, let’s look at the example below.
<h1>My name is Amycruz<h1/>
<p>I am a Front-end developer</p>
<h1>My name is Amycruz<h1/>
<p>I am a Front-end developer</p>
<div id="footer">© Amycruz</div>
Firstly, it is easier to read and understand the code written with semantic elements than those written with non-semantic elements.
Also, the example above that was written with semantic elements has greater accessibility. Assistive technologies like screen readers will be able to provide more information about the element to the user. While for sighted users, it is easier for them to identify various parts of the web page at a glimpse.
Forms are used to collect data and information from users. When you create accessible forms, you are making it easier for the users to understand. Forms are commonly used on the webpage, like signing up, log in, buying a product, asking questions, contacting someone. If we don’t make forms accessible to users, we would be hindering many users from using the webpage, and when this happens, data collection becomes a problem.
As earlier stated, semantic elements are the structure of a web page that gives meaning to both the browser and developer. For example using elements such as
<button> clearly defines it purpose while non-semantic element such as
<span> makes its purpose and makes it difficult to navigate through the webpage.
Using focus styling enables keyboard users to know which fields are being selected by the users.
In the example above, when a user clicks on the input field, the text field changes to a yellow background. This shows a keyboard user that is the place to input the text.
Placeholder attributes are those light-coloured texts in a form that gives a short hint on the expected value on an input field. A placeholder text can be used in some inputs. Still, it should not describe what we want the user to do at that particular section because a placeholder attribute disappears once the user inputs data into the form. And
<label> on the other hand,
<label> is used to describe the form field's function, such as (input field, text area, checkbox, radio buttons, etc.). Proper use of labels will benefit screen reader users. The screen reader will read out the label when the user is focused on the element.
For some input types, we can use the placeholder attribute– but it is not the same as providing a visible label. The placeholder disappears once the user inputs data into the form, but the label describes the input.
<input type="text" placeholder="first name">
The programmatic label enables assistive technology to identify the purpose of the form.
for attribute of
<label> must be equal to the
id attribute of an input field to bind them together, as shown below. This enables the screen reader to notify the user when he clicks on the associated name's text field.
<label for=”firstname”>First Name</label>
<input type=”text” id=”firstname”>
Links connect a file or document to another file or document. Making accessible links is one of the most important aspects of web accessibility.
Audio and video are used by people regularly. We listen to music, watch youtube videos, movies on Netflix, stream conferences, and many more. Media should be produced in ways that the content is accessible to all audiences. An accessible media should include a transcript, audio description and also be delivered in an accessible media player.
There are many ways to make accessible media, but let us look at a few.
Using captions on all media will help all users. Captions also allow users who are deaf or have a hard time hearing. It also helps the non-English speaker to understand the content of the video. Using captions on all your media elements will help all users, not only disabled users.
You should provide an audio description so that people who are blind can get crucial visual content such as titles, speakers' names, and email addresses.
A transcript is a text version of a media. A transcript should not only include what is being said in the video, but it should also describe the vital information showing on the screen that would not be accessible without seeing the video. When we provide a transcript to our media, we are not only making it accessible for people with disabilities; we are also making it accessible to people with technical limitations.
Flashing content in videos should be avoided, and if it should be included, due diligence should be put in place. Flashy contents can cause seizures in some users who have seizure disorders.
When choosing how to host your video, you should consider a media player that supports accessibility. Some of the things you should consider are:
You use ARIA to add more description to HTML elements like buttons, links.
Let's look at this example below. Before:
<button aria-label="Close" onclick="window.close()">X</button>
In the example above, the aria-label in the second example provided a description to help assistive technologies know that it will close once you click on the X button.
Making accessible forms helps screen readers to interact with your application or website effortlessly. By adding the ARIA attribute to form elements, you can also build an accessible form.
<label for=“first-name”>First Name</label>
<input type=“text” id=“first-name” aria-required=“true” aria-autocomplete=“on” />
The example above will announce to screen readers that inputting your first name is required.
You can check out this site to learn about more ways to use ARIA.
Web accessibility tools are software that helps you determine if web content meets accessibility guidelines. The web accessibility tools you should use depends on your need and budget.
Here are some tools and websites used for checking if a website is accessibility compliant.
In this article, you have learned about web accessibility, what it is, why it is important we make our web pages accessible, and some ways you can build accessible front-end applications. We also learned about tools you can leverage and implement in our workflow to help us build accessible applications.
Enjoyed reading this article? Sign up to WorksHub for more resources like this!
👩🏽💻Front-End Engineer ✍🏽Technical Writer 🚀 Co-organiser @vuejsng
See other articles by AMAECHI
Ground Floor, Verse Building, 18 Brunswick Place, London, N1 6DZ
108 E 16th Street, New York, NY 10003
Join over 111,000 others and get access to exclusive content, job opportunities and more!