4 Web Accessibility Best Practices

Photo by Kevin @ikukevk

Chances are if you’re reading this article you’ve heard of web accessibility & understand how important it is for making the Internet as a whole available to everyone. I’m going to dive right into simple 4 ways to make your web pages, specifically your HTML, more accessible to a wider audience such as those that use screen reader software.

If you’re new to accessibility & want to learn more check out these resources:

General info about web accessibility:

• Web Accessibility Initiative
• Accessible Rich Internet Applications (aka ARIA)

Dev documentation on for ARIA:

• ARIA in HTML
• ARIA Properties

Hit me up on Twitter @donpanicux if you’d like to chat more about accessibility or if you have any questions! Let’s get into it!

Start off by reviewing your web page’s HTML and asking yourself the following 4 questions:

1. What is unfamiliar to you?
2. Which HTML elements convey information only?
3. Which HTML elements are purely for presentation?
4. If all a person could do was read your HTML would they understand the intent?

Note for Question #4 it might be helpful to have someone outside of the Dev Squad (e.g., UX Designer, PM, etc.) read the HTML page, having them practice a Think Aloud Protocol.

Answering the questions above will help you identify areas of your HTML that can be improved using the following 4 techniques detailed below, including accurate semantic HTML elements, ARIA roles & properties, & using the Alt attribute.

Semantic HTML Elements

The quickest way to improve web page accessibility is to use the right HTML tags for the right task.

Using the most semantically accurate HTML tags for the elements of a webpage is the easiest way to improve the accessibility of a web page. MDN provides a full list the semantic HTML elements that exist to give that are great to reference as you build your web pages.

A quick example is wrapping a web page’s top level navigation bar in the header tag, instead using adivelement & giving it class="header". Using the header tag provides someone using a screen reader with a more semantically accurate description of a page element. This helps people to understand, interact, & navigate a web page with ease.

<header>
  <!--Header Elements-->
</header>

Native semantics describe intended purpose of HTML tags. The header tag, for example is intended to contain navigation elements like logos, links, & other introductory information.

Whether you wrap navigation elements in <header></header> or <div class="header"></header> the HTML will visually render exactly the same. However, using the more semantically accurate elements, like <header> creates a more accessible web pages for people using technology such as screen readers & improves overall SEO.

ARIA Roles

Web pages use text to communicate various types of information to users. Text can describe the main page content, navigational elements, as well as input fields or menus. The challenge can be understanding the context of a web page text without knowing where it is visually or what information it is being communicated.

To help provide this context to a web page you can include an ARIA HTML attribute called role. Based on the values given to the role attribute the HTML will communicate different information to software like screen readers. This gives the user more context about the text they are hearing on a given web page.

<div id="social-media" role="complementary">
  ...
</div>

In this case the role="complementary" attribute and value tells someone using a screen reader that the information in the social media is complementary (or supporting) to the information you are reading right now. This helps illustrate the relationship between sections on a web page.

There are a lot of useful ARIA roles that can be used to provide better context for the textual information presented on a web page. You can find a full list of ARIA roles here.

ARIA Properties

In addition to ARIA roles you can also used ARIA properties to provide more context for you web page’s HTML. Just like ARIA rolls you can add ARIA properties to HTML elements providing additional information about an element that wouldn’t be as obvious to people using screen readers to interact with a web page. Let’s explore a property called aria-label.

Applies to ARIA properties example below … plus I love Rick & Morty.

<!-- Without ARIA Property-->
<img src="#" alt="An image of Rick & Morty in a recording studio"/>
<p>Rick &amp; Morty record debut track 'Get Schwifty'</p>
<!-- Using ARIA property aria-label-->
<img src="#" alt="An image of Rick & Morty in a recording studio"/>
<p aria-label="Adult Swim Characters">Rick &amp; Morty record debut track 'Get Schwifty'</p>

In the example above, a person looking at the web page would read “Rick & Morty record debut track ‘Get Schwifty’” below the image and use visual clues to infer that they are the cartoons in the picture. However, if someone is using a screen reader it wouldn’t be clear what this paragraph below the image means. By adding the ARIA property aria-label it gives the screen reader some additional information to tell it’s user.

ARIA properties can also improve the accessibility of more interactive web pages that use using HTML forms or JavaScript.

A complete list of ARIA properties can be found here.

Alt Attribute

Some HTML elements have a built-in attribute called alt that works like aria-label but has additional functionality.

The alt attribute is used to describe an image (or several other elements). A screen reader will read the value of the alt attribute out loud. However, if the element cannot be rendered the alt attribute will be displayed in its place, describing the content. This is an added benefit over the aria-label which, will not be displayed on the screen if content is unable to render on a web page.

Image applies to example below.

<img src="#" alt="a dog in a robot suit"/>

From the example above, a screen reader would read “image: a dog in a robot suit” to the user. If the image didn’t load, the browser will display this alt value as a tooltip on-screen.

Here’s a few quick guidelines to improve the user of the alt attribute in your HTML:

1. The alt value should concisely describe the image content.
2. If an image also acts as a link (<a> element) make sure thealt attribute describes the address the link is going to (i.e.,<href="#">).
3. If an image is purely for aesthetics (e.g., decorative border), the alt attribute should be empty, alt=””. Note that you shouldn’t omit an alt value.
4. If there is text that describes an image, you don’t need to duplicate the description in the alt tag. Simply provide an empty alt (i.e., alt=”" ).
5. Keep alt values to less than 150 characters.

Wrap-up

Using accurate semantic HTML elements, ARIA roles and properties, andalt attributes and in your HTML is a simple way to make your web pages more accessible everyone using the Internet. A more accessible web page helps you to reach a wider audience as well as, enhances your overall SEO, & can make your HTML easier for other developers read.

If you enjoyed this article let me know in the comments, smash that clap button, & hit me up on Twitter Blake Arnsdorff!

Inspiration & credit to Codecademy Pro Intensive course on Building Websites from Scratch.