Accessibility: Five things we should already be doing

Currently, the requirement is that all websites published after 2013 meet Level A. The following are requirements that I found were overlooked more often than others:

1. Semantic Markup (Level A - 1.3.2)

Semantic markup is a fancy term for common-sense HTML usage. Page and section headings should be wrapped with heading tags (H1, H2, etc.). H1 heading should be used only once for the page title, while H2, H3, etc. tags can be used as many times as necessary.

It is important to use a structure for headings and paragraphs to display content because screen readers often use these structured headings to pinpoint the start and end of content. If a page has no headings, users will only see (or hear) a huge wall of text with no visual break or pauses.

The “Thematic Break”

When formatting HTML content, context changes can be marked with a “thematic break”, represented by the HR tag. This avoids a run-on sentence, and tells the screen reader that a change of topic warrants a pause when reading through the text.

Language Shifts

Imagine an English-speaking synthetic voice reading French or Spanish words as though they were English words. Using a language shift ensures that content that is read aloud by assistive technology, like screen readers, will be read accurately.

Example:

<span lang="FR">J’aime le chocolat.</span> 

2. Forms & Labels (Level A - 3.3.2)

Forms should always be logical, intuitive, properly labeled, and provide clear instructions. Required fields should be indicated and form labels should be present in the code, even if they are not present in the design.

<label for="email" class=”hidden”>Email Address</label>  
<input class="form-control" id="email" name="email" type="text" placeholder="Email Address" /> 

A label associated with an input will be spoken by screen readers when focus is on the field. It also allows the user to click the label to activate the control.

3. Links: Text, Color and Focus (Level A - 2.4.4)

People using screen readers will often use a pull-out list of all the links on a page. It is important to list links contextually. For example, a list of links all labeled “click here” is weak in terms of accessibility. Instead, provide explicit links with context, such as “Download the Annual Report”. This is much clearer for users.

Hover & Active States (Level A - 1.4.1)

The hover state of a link cannot rely on color alone to convey meaning. Color information may not be available to a person who is color-blind, and is definitely unavailable to screen reader users. Adding an underscore in addition to color will help users recognize it as a link.

4. Including Image Descriptions (Level A - 1.1.1)

Adding alternative text to images is often an afterthought and results in image descriptions like “image” and “filename.jpg”; users are missing out on a key feature of accessibility.

It is important to have descriptive text for users who cannot see these images. One technique to determine the alternative text of an image would be to group images in the following three categories: simple, complex or decorative.

Simple

These images are photographs, icons or logos, and the descriptive text should be short and sweet.

<img src="flowers.jpg" alt="Flowers blossoming in a garden." /> 

Complex

These images are diagrams or charts, and descriptive text will be more detailed.

<img src="diagram.jpg" alt="Figure 1. Percentages of screen reader usage rates in Canada" /> 

Decorative

These images are purely decorative with the alt attribute being empty and a role attribute with a value of presentation. This will tell the screen reader to ignore the image.

<img src="spacer.png" alt="" role="presentation" /> 

5. Keyboard Navigation (Level A - 2.1.1)

One of the most important facets of accessibility is the ability to manoeuver through a website with just a keyboard.

Users should be able to navigate the content and elements sequentially and cohesively (Level A - 2.4.3). Adding a tabindex attribute set to 0 to an element inserts the element into the tab order based on its location in the source code. This also allows any element to be focusable.

The focus state should be present and consistent across all navigational elements (Level AA - 2.4.7). It’s good practice, when creating custom components, to use focusable HTML elements when necessary. This allows you to take advantage of the default functionality; otherwise, keyboard focus and interaction support will have to be provided manually.

Finally, adding a skip-to-main-content link allows the screen reader to skip over the menu navigation block, avoiding having to tab through every link. (Level A 2.4.1.)

Accessibility Resources

• Contrast Finder.
• SortSite, a one-click website testing tool.
• WebAIM, training, certification and assistance

Sources

• Ontario.ca: “How to make websites accessible.”
• Web Content Accessibility Guidelines (WCAG) 2.1.
• Mozilla: “Handling common accessibility problems.”
• University of Washington: “Making Images Accessible.”
• WebAIM: “Keyboard Accessibility.”