Five Ways to Implement Accessibility in Your Website

Published in

theCOOP.cc

6 min readMay 3, 2021

HTML code including the accessibility tag “role.” — Image from Pixabay on pexels.com

As the internet becomes an integral and necessary part of modern life, it is imperative that we as designers and engineers build sites that everyone can use. The Web Content Accessibility Guidelines (WCAG) create a standard for making web content accessible for everyone. Here are five easy ways to make your website more accessible.

Semantic HTML

HTML5 comes equipped with landmark tags that help screen readers navigate the site. This also helps SEO bots navigate your site as well. The three major layout landmark tags are <header>, <main>, and <footer>. Think of the page like the body: head at the top, main torso in the middle, and feet at the bottom. The <nav> tag for navigation is like the eyes, seeing where to go. While the <nav> is often contained within the <header>, it can appear in other places on the site as well. These tags alone will make your code more accessible but also more readable than a sea of <div> tags.

The <main> tag can be further broken up with <article> and <section>tags.

A <section> is a major sub-section of the larger whole. Sections typically contain a heading tag. They break up the page and provide hierarchy.
An <article> is a block of content that could stand on its own. Articles and sections are similar and can be part of each other.
An <article> may be broken up into multiple sections.
A <section> may contain multiple articles.

Heading Tags

Headings create a hierarchical structure and outline of web page content for all users. When building pages, keep headings in the correct structural order to help screen reader users navigate as well. SEO bots also use heading tags to peruse your page. There should only be one <h1> per page and should be similar to the page title for search engine optimization. Use CSS to visually make changes to other headings instead of relying on default sizes.

Contrast

Not everyone sees the same way. Some conditions are permanent, such as colorblindness, but others may be temporary, like reading your phone outside on a summer day. Ensuring sufficient contrast between the text and background on the page makes the content more visible for everyone. The content is intended to be consumed by the user, make sure it’s legible. WebAIM has a Contrast Checker. Here you can enter your foreground and background colors and see if they meet the recommended contrast ratio.

Alt Text and Link Names

Even though images are clear to those with full vision, the alt tag is useful in multiple scenarios. For example, the user could disable image loading to save on network costs or the user’s internet may not be stable enough to allow images to load. In these use cases, having alt text load instead of the broken image logo provides a richer user experience. For those using a screen reader, when an image is missing an alt tag, the screen reader voices the file path. Hearing “resources slash my underscore best underscore image underscore today dot jay pee gee” would just be confusing for anyone. The screen reader will read the alt text when available, so make it concise yet descriptive.

<image src="yellow_house.jpg" alt="A yellow house" />

As we move more and more toward mobile, we more frequently use icons in our pages and apps. The hamburger menu, social media links, and emoji rating scales are all more common. These icons are easy to understand for the visual user of the website. For screen reader users, we need to ensure understanding as well. Add the aria-label attribute to these icons to describe their purpose. Screen readers will announce this explanation in the same manner it does a button with text inside. Without it, the screen reader will announce “unlabeled image” along with the path of the image, which is simply not useful.

<a href="<https://duckduckgo.com/>" aria-label="Open DuckDuckGo Search" target="_blank"><DuckIcon /></a>

Metadata

Metadata is the information about a website that is located in the <head> section of HTML. This includes the language and alphabet as well as the page title and description. Search engines use the page title and description on the results page, so this data is important for SEO. It also gives the screen reader information about your website. The title is read aloud when the user navigates to the site. Without the language data, the screen reader assumes the site is in the user’s set language, even if it isn’t.

<!DOCTYPE html>
<html lang="en" dir="ltr">  <!-- Lists the language and which direction it reads -->
	<head>
	    <meta charset="UTF-8">   <!-- Character encoding for most any character you will ever need -->
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
					<!-- This sets the content width to the device allowing for better mobile responsiveness -->
	    <title>My Blog About Accessibility</title>  <!-- The title of the site -->
	    <!-- Stylesheets, JavaScript, Favicon, etc -->
	</head>
	<body>
<!-- ... -->
	</body>
</html>

The metadata can get missed in some static site generators like Gatsby. React Helmet is one way to easily implement this data and fix accessibility issues.

import { Helmet } from 'react-helmet';<Helmet>
    <html lang="en" dir="ltr" />
    <meta charSet="utf-8" />
    <title>My Blog About Accessibility</title>
</Helmet>

Testing Your Site

So you’ve implemented some accessibility guidelines in your website. Great! Now, how do you know if they are working as expected? One free option is Lighthouse, an open-source website auditing tool. While it was created by Google Chrome, it’s available in Chrome and Brave dev tools. Along with SEO and performance, Lighthouse can give you a quick report on accessibility, including an overall score and specific improvements to make. These reports can be generated for web and mobile versions. Test your site, implement some accessibility guidelines, and see how your score improves. While Lighthouse is not the definitive resource for accessibility, it is a great start.

Your system may have a built-in screen reader you can try. Safari uses VoiceOver, while other browsers may use Jaws or Narrator. Seeing our sites how others may experience it makes us better, more empathetic developers. This site allows an interactive experience with a screen reader that is enlightening.

Designing and building websites and apps for users of all abilities allows you to grow a larger, broader audience. The internet focuses highly on the visual user. However, with a small amount of effort, we can assist those with visual impairments with a more robust functionality of the web we all share.