Mastering Web Accessibility: A Guide for Frontend Developers

Table of Contents

I. Introduction

II. What is web accessibility?

III. Why is web accessibility important?

IV. How to create web-accessible websites
A. Use of semantic HTML
B. Providing text alternatives
C. Use of accessible colors and contrast

VI. Conclusion

Introduction

Although producing aesthetically appealing and useful web apps is a front-end web developer's major goal, the need for ensuring accessibility for all users is sometimes disregarded. The WebAIM Million report examined the home pages of the top 1 million websites and it was discovered that only 3.7% of them adhered to the most basic accessibility guidelines. What this means is that 96.3% of websites are not accessible to people with disabilities, and I think that's just sad. We'll explore online accessibility in this post, including what it is, why it's important, and some advice for improving the accessibility of your own website.

What is web accessibility?

The technique of building websites and web apps that are simple for persons with disabilities, particularly those who have cognitive or physical impairments, is known as web accessibility. Many people with impairments use assistive technology, like screen readers or braille displays, to browse the internet.

Web accessibility therefore entails putting in place the required instruments and assets to incorporate these assistive technologies into your website, enabling everyone to access and interact with your digital content. You can make sure that your website is inclusive and accessible to all users, regardless of their ability, by giving web accessibility a high priority.

Why is web accessibility important?

While we've made progress in making various aspects of society more inclusive, such as education, employment, healthcare, and public spaces, there's still work to be done to ensure everyone can fully participate and thrive.

Web accessibility is important because it ensures that everyone, regardless of their abilities or disabilities, can access and use the web. It also helps to promote inclusivity, diversity, and equality by eliminating barriers to information and technology.

As a front-end developer, I have been guilty of building websites that have little or no accessibility, mainly because it wasn't part of my project description, and I was unaware of the importance of this practice. But now that I am aware, and I believe you are too, how can we incorporate accessibility into our projects? In the next section, we will explore different ways of making a website accessible.

How to create web-accessible websites

Adding web accessibility to your website starts with the design process. The user interface designer has to think about font size, font type, color palette, and the web structure in general.
It is important to note that web accessibility is an iterative process that requires all hands on deck. The web designer, developer, and content writer all have roles to play to ensure that the digital content they are building is accessible to every user who interacts with it. Here are a few ways a front-end developer can improve web accessibility;

• Use semantic HTML:Why did the developer use a <div> instead of a semantic tag? Because they wanted to make their HTML more...div-erse! I know, I know, that's a lame dad joke.It's usually much easier to wrap everything in the div tag and call it a day, but the best practice is to use semantic HTML tags that correspond to the content and structure of your page. Semantic HTML is not only important for web accessibility; it also improves the SEO of a website. When you are working on the navigation of your web page, your code should look like this:

<nav>  <ul>    <li><a href="#">Home</a></li>    <li><a href="#">  About</a></li>    <li><a href="#">Services</a></li>    <li><a href="#">Contact</a></li>  </ul></nav>

This will accurately describe the purpose of that section of code, without the need to add comments to your code. You can also wrap the main section of your web page with the main tag like this:

<main>  <h1>Welcome to My Website!</h1>  <p>Here is some information about my website...</p></main>

The aside tag can also be used to indicate content that is tangentially related to the main content of the page like the code below:

<main>  <h1>Welcome to My Website!</h1>  <p>Here is some information about my website...</p>  <aside>    <h2>Related News</h2>    <ul>      <li><a href="#">Article 1</a></li>      <li><a href="#">Article 2</a></li>      <li><a href="#">Article 3</a></li>    </ul>  </aside></main>

Overall, semantic HTML makes it much easier to navigate your web page using assistive technology.

• Provide text alternatives:When you're adding an image, video, or any visual content to your website, you should always provide a text description of what the content depicts. In HTML this is called alt text. This description allows screen readers to understand the overall content of your website. Here is a code example of what an alt text looks like for a video and image markup.

<div>  <h2>My Video</h2>  <video src="my-video.mp4" alt="A person skiing down a mountain"></video>  <h2>My Image</h2>  <img src="my-image.jpg" alt="A group of people hiking in the mountains">  <h2>My Chart</h2>  <figure>    <img src="my-chart.png" alt="A line chart showing the growth of a company over time">    <figcaption>A chart showing the growth of my company over time</figcaption>  </figure></div>

The code above not only provides alt text for all the graphics on the page, but it also uses the semantic HTML tag called figure to wrap an image to provide an even more accurate representation of what's on the page.

• Use accessible colors and contrastWhy did the website with poor color contrast cross the road? to get to the other sight (site). These dad jokes just keep coming to me, but I promise, I'll stop now!Using accessible colors and contrast is primarily a job for designers, but if you're a web developer who also works as a designer, then this section will be useful for you. It is important to consider the needs of people with visual impairments. Always keep in mind that just because you can see the content clearly doesn't mean everyone can.

Here are some key things to take note of when designing for web accessibility;

• Choose colors carefully: Consider the contrast between your background and text. Dark backgrounds should not have dark text. You can use this link to check the contrast ratio of your design.

For a better user experience, do not depend on color alone to convey information to the user. Links and action buttons should not be indicated using colors alone; you can add an underline to the link's text to indicate that it is clickable.
Use a legible font: When selecting a font for your website, choose one that is easy to read. Keep in mind that sans-serif fonts like Arial, Verdana, and Helvetica are often easier to read on screens than serif fonts.

• Use an appropriate font size: According to Web Content Accessibility Guidelines (WCAG), a font size of 16px is best for body text. You can read more on the guidelines here

• Test your designs: Test your website on different devices and screen resolutions to ensure that your font size and type are legible and accessible to all users.

• Use ARIA attributes: ARIA (Accessible Rich Internet Applications) attributes are additional attributes that can be added to HTML tags to provide more information on the role and properties of an element. These properties can be read by screen readers to improve their user experience. An example of a markup with ARIA attributes can be found below:
  

<div><button aria-label="Search">  <i class="fa fa-search"></i></button><div role="tabpanel" aria-labelledby="tab1">  <p>Tab panel content goes here.</p></div><button aria-expanded="false" aria-controls="collapse1">  Show More</button><div id="collapse1" aria-hidden="true">  <p>Additional content goes here.  </p></div></div>

The example above provides information on the role of a search button with the aria text "Search." The aria-expanded attribute is used to indicate whether the content in the associated div element is expanded or collapsed. The aria-controls attribute is used to reference the ID of the associated div, while the aria-hidden attribute is used to indicate that the content is hidden when it is collapsed.
NOTE: ARIA attributes are defined by the W3C ARIA specification. There is a standardized set of attributes names that are designed to work with screen readers.

• Test your website for accessibility
  There are a lot of resources out there that make it easy to test the accessibility of your website. Some popular tools include;

  • WAVE: This is a free tool that accesses your website for accessibility and also generates a report on its findings. Learn more here.
  • AXE: This is a free Chrome extension aimed at using automated testing to test and improve web accessibility. This tool is available here .
  • LIGHTHOUSE: Lighthouse is a popular open-source tool used by developers to test the performance and accessibility of websites. It's available here.
  • NVDA: NVDA (NonVisual Desktop Access) is a free, open-source screen reader that enables people who are blind or visually impaired to access and navigate the web, as well as other applications and software on their computer. You can download it to interact with your website and get more insights about where accessibility can be improved. It can be downloaded here

Conclusion

In this article, we went through what accessibility is, why it is important, and how you can improve user experience with web accessibility. Including web accessibility to all web projects is a moral responsibility placed upon us all as front-end developers, to enable inclusivity for one and all. I hope one day soon, accessibility becomes just as important as adding aesthetics to a website.
Happy coding!