ABCs of Accessibility (for Web Developers)

This is a quick introduction to accessibility targeted at web developers. While accessibility can be a complex topic, everyone has to start some where. Here are three guidelines to introduce the topic of accessibility into a development practice.

A is for Alt Text for Graphics

Make sure any non-decorative graphics have alternative text that describes them.

Why Alt Text is Important

Viewing a the website on a screen is not the only way users can browse. Users can also listen to a website with a screen reader. This could be because they have a vision impairment and cannot see the screen well. They could also prefer using a screen reader in cases where they don’t want to look at a screen. For example, listening to a page on a commute.

How to Include Alt Text

For IMG elements set the alt attribute to the meaning of the icon or description of the image.

For SVG or icon fonts, add text that is visually hidden, but discoverable by screen readers. Here is an example from Sara Soueidan of how to make accessible icon buttons.

When Not to Include Alt Text

For decorative images, alternative text is not needed. For example, a link with an image of a shopping cart and the text “Cart” does not need alterative text. The existing text already describes the link. The alternative text would provide no additional information. It would make the page more confusing because “Cart” is read twice, once for the icon and once for the text.

In these cases set the ALT attribute to an empty string, or apply an aria-hidden attribute to SVG or icon font elements.

B is for (Key)board Access

Make sure that the website can be interacted with using only a keyboard.

Why is Keyboard Access Important

Not everyone will interact with a website with a mouse. A keyboard may be more efficient, or easier to use for some users.

How to Insure Keyboard Access

In addition to testing the site with a mouse, include a keyboard in the test plan. A user should be able to use Tab and Shift+Tab to move forwards and backwards through the interactive elements on the page. The active element should have a visible focus indicator to identify it.

By default, links, buttons, and form elements, are keyboard accessible. WAI-ARIA Authoring Practices has a large set of examples of keyboard interactions for different types of controls. This is a good guide if you are not sure how something should work with a keyboard.

C is for Content Structure

Choose HTML elements for on the content, not the visual look. Even though a DIV can be style to look like a BUTTON it doesn’t mean that it should.

Why is Content Structure Important?

Having a good semantic structure is important because it helps humans and machines better understand the content. Assistive technology can parse the document structure and identify headings and other regions of the page to help the user navigate more easily. Good content structure can also help with search engines. For example using an ADDRESS tag can help a search engine recognize a block of text as an address.

How to Structure Content

Here are some basic guidelines choosing the right element for your content structure.

• A when the action will take the user to another page without changing the server state
• BUTTON when the action will change something about the state of the page or submit a form that will change something on the server
• H1 - H6 The headings should form an outline of the document. H2 can be used to call out sub topics under a H1. H3 breaks up a H2 into sub topics. And so on.

There are many more elements to help structure content. Free Code Camp has an article explaining more about semantic elements. There is also a full list of HTML elements on MDN.