HTML and Digital Accessibility
As a software developer, empathy for our users is an often overlooked aspect of programming. Even though 315 million people worldwide have vision impairments, 85 percent of the web is designed for and by sighted folks. The A11Y Project (pronounced “accessibility”) defines vision impairment as “a condition that limits the visual capability of an individual to such a degree that additional support is needed”. Navigating a digital landscape with the aid of vision-based interfaces such as a screen reader can be incredibly frustrating and disorienting. And before you think “that’s not my job, I’m not a UX designer!” — designing with empathy means that we must consider every user at every stage of production, including software development. Here I have outlined a few easy resources and ways for software developers to understand how and why to create more accessible online content for users with vision impairments using only HTML attributes.
1. An Overview of Screen Readers
What are screen readers? Many people with vision impairments rely on screen readers to access and use the internet. Screen readers essentially provide artificial vision by translating text into synthesized speech which is then played back for the user. Accessing websites designed for sighted folks can be incredibly difficult if you are relying on screen reading software — websites are often filled with forms, links, images, and videos that are not compatible with such software, making the experience confusing and irritating.
Now that we understand what screen readers are, let’s explore some easy ways to make your websites more accessible.
2. Use HTML Alt-Text for Images
What is alt-text? When you embed an image onto a page using HTML, you have the option to include a description or caption for that image using what is called an alternative attribute. Screen readers depend on these alt-text attributes to read the description back to the user. One easy habit to get into is to always include alt-text for images and graphics. The descriptions do not have to be long, but this makes a huge difference to vision impaired users. (Medium has a built-in feature to automatically add alt descriptions to images!) Below is an example of the formatting used for HTML alternative attributes. First we reference the image using the “img src” attribute, then we move on to the description using the “alt” attribute.
<img src="sunflowers.jpg" alt="image of two sunflowers in a field of wildflowers">3. No Autoplay on Videos
Autoplay for videos is a common feature on YouTube and other video streaming websites. However, autoplay is a nightmare for people who use screen readers. Why? Because when a video plays on a page without warning, the sound from the video interrupts the speech projected by the screen reader, rendering the entire page inaccessible to the user and frankly is annoying. Autoplay can also be incredibly distressing for the user depending on the audio content of the video. The autoplay attribute looks like this:
<video controls autoplay>
...
</video>Leave out this feature altogether. And if you do include a video, make sure to add an option to pause and start the video.
4. Use the Language Attribute
Screen readers will read text on a page according to the language or “lang” attribute declared in the root element of the HTML DOM tree. In the following example, the language is set to English.
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>This works well for the most part. However, you will run into issues if your document includes a phrase from a language that is different than the one declared. In this example, a screen reader would interpret “foreign text” as if it were English, therefore projecting nonsensical gibberish to the user. To ensure that the “foreign” phrase is read correctly by the screen reader, make sure to include redefine the language for that specific phrase. Here is an example using a four character Japanese idiom that roughly translates to “every moment only happens once”.
<!DOCTYPE html>
<html lang="en">
<body>
<p>The following is a Japanese idiom.</p>
<p lang="ja">「一期一会」</p>
</body>
</html>5. Write Descriptive Text Links
Screen readers rely on HTML link descriptions to tell the user about the link they are selecting. A non-descriptive link title such as “click here” tells users with vision impairment absolutely nothing about the link they are about to select. To solve this problem, simply make your links more descriptive using the “a href” attribute. Here is a good example of how to make a link more descriptive.
<a href="url here">Learn more about caring for sunflowers</a>Descriptive link attributes like this give users a sense of ease by making the HTML more compatible with voice-based software.
6. Consult the A11Y Project
Pronounced “the accessibility project”, the A11Y Project is a “community-driven effort to make digital accessibility easier”. Their website contains numerous links, articles, and resources available for developers to learn how to modify their code and improve user accessibility. The following link provides an easy to read checklist for developers to use as a guide. https://www.a11yproject.com/checklist/
With a little bit of effort and understanding, software developers can make a huge impact in creating more accessible digital spaces for users with vision impairments. By centering the user experience we will become more effective and empathetic programmers.
