Web Accessibility guidelines - WCAG 2.0. A complete guide with free infographic.

Author David Lower   .   28 December 2018

As a project manager it was my task to make sure the professional websites we created for our clients adhered to ALL the web content accessibility guidelines. Here is my infographic and the dos and don'ts on web accessibility.

In Norway, it is a legal requirement that all websites adhere to the web content accessibility guidelines or WCAG 2.0 for short. Essentially these guidelines exist so those with hearing issues, visual impairments and/or motor control difficulties, can access web content with as much freedom and equality as everyone else.

So what is included in the web content accessibility guidelines?

Firstly here is the official web content accessibility guidelines documentation.

There are 3 standards of accessibility - A, AA and AAA. For the purposes of this article I am going to recap standard AA, which can be boiled down to 17 points. The AAA standard has a much higher requirement level that is very unachieveable for the majority of websites.

This WCAG quick reference guide gives a clearer overview that you my find more helpful.

17 steps of the web content accessibility guidelines

Here is the free web content accessibility guidelines infographic that I made.

1 Images should have alt tags to describe the image.

<img src="link to img" alt="description of the image">

Not only is this very important accessibility, should the image not display for what ever reason. It is really good for SEO as well.

2 Add captions (subtitles) to video recordings.

This is basically making videos accessible to people who are hard of hearing.

3 Add audio descriptions to videos.

For visually impaired. Clarify what is being seen in the video during periods of silence.

4 Having a generally clean, clear and logical arrangement of the website.

There isn’t really a rule here. But following a logical order in presenting the website’s content is important. A jumbled, unorganised mess is obviously bad UI/UX for any user. Are titles clearly showing titles and do buttons look like buttons for example.

Material Design by Google is a great starting point to understanding layout and a whole host of other important website building principles.

5 USE HTML5 semantics with ARIA roles.

Following on from the previous point. USE the correct HTML semantics in your website. The screen-reader technology uses these labels to put the website into categories. In addition ARIA roles help the screenreader to jump from one place to another within the site for faster navigation.

HTML section labelling

<header></header>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<header></header>
<footer></footer>
<main></main>

ARIA roles

role="banner" - this is the entire header region.
role="navigation" - this goes with the main navigation. Can only be used once and not on mutlipe navigations.
role="main" - pairs with the main content on your page.
role="contentinfo" - this is your main footer area.
role="complementary" - this pairs with an aside.
role="search" - used with search fields.
role="form" - pairs with your main contact form.

<header role="banner">
   <nav role="navigation"> NAV BAR ITEMS HERE </nav>
</header>
<main role="main"> MAIN CONTENT OF WEBSITE </main>
<aside role="complementary"> RIGHT SIDEBAR </aside>
<footer role="contentinfo">
   <form role="form"> CONTACT FORM </form>
</footer>

When using a screenreader these sections will show in the ‘landmarks’ pane. On a mac activate the screenreader with CMD + F5. Then to access the landmarks pane press CRTL + ALT + U. Use arrow keys to nagivate around. This is what the screen reader looks like.

vector icon of a what a screenreader will display link and landmarks

6 Colour contrast.

For those that are visually impaired having two colours of similar likeness will be difficult to separate. So light blue text on a light grey background for example will be difficult to read.

For AA standard you need a minimum score of 3 and for small text (below 18pt) you need a larger score of 4.5. How they calculate these scores is well over my head, but you can see them at WCAG’s relative luminance.

vector icon of two buttons indicating bad color contrast

Here are some nice resources to help you figure out good contrast between colour themes.

Color safe.

A paid app that I use frequently called Use contrast.

7 Navigating a website with only a keyboard.

Using arrow keys, tab key and spacebar/return key. The tab key should take the user to all active elements on the page, like links, navbar items, input fields etc.

8 Keyboard traps.

This is an important one. When using the tab key and navigating the site with focus we have to be careful this doesn’t become trapped.

For example popup windows, modal windows, and/or popup forms. Once focus enters the popup form or window it must be given the option to exit as well. If this does not happen the focus will be trapped and the user can not progress further through the site. This is a fail.

vector icon of a keyboard trap example on a webpage

9 Tab order.

The website must be navigatable in an orderly fashion that is logical and follows the natural flow on the webpage. The navigation in this case is the use of tabbing through the site with focus.

The natural tab order created by the DOM in HTML is not always logical.

To remove an item form the tab order in HTML tabindex="-1".

<a href="#" tabindex="-1">Some hidden link</a>

To change the order of a particular element in HTML tabindex="1". Obviously it can be 5 or 9 depending on the number of elements. It is advised to not use this method if possible. Should you add something in the future you will have to adjust the entire tab order again.

<a href="#" tabindex="1">Some link</a>

To add an element into the DOM order you have to give it a tabindex="0" and also activate focus with a javascript function using .focus().

HTML
<a id="element" href="#" tabindex="0">Some link</a>
JS
function getfocus() {
  document.getElementById("element").focus();
}

10 Make focus ACTUALLY visable and DON’T intiate an action.

Focus should be visable at all times (when used with tab key). You will be suprised how many websites turn it off because they think the blue garish box that surrounds links is ugly.

Also when an element comes into focus it should not alter or activate an action from that element. Focus is purely a passive identifier that requires a specific action to activate the element = like hitting the return key.

This is fairly straight forward. Have titles and links with meaning, suggesting their purpose. Having links like ‘read more’ without any other labelling context is useless for a screenreader or someone with visual impairment.

12 Name, type, and value attribute - when to use and why.

<form type="contact form" id="form" aria-label="Confact form">
  Name:
  <input type="text" name="First name">
  Email:
  <input type="email" name="Email address">
  <textarea type="textarea" form="form">What can I help you with?</textarea>
  <button type="submit"></button>
</form>

I never use the value attribute with input forms, unless I want the user to select between a number of values. For example multiple choice or a list of options. Then using the value attribute work’s nicely.

The name attribute above is what you see in the back end. So for the input field on the back you will see First Name: name user provides and Email address: email user provides.

The type attribute I use on everything except a tags, since I do not feel they are needed. I cover a tags with a good aria-label.

<a href"URL LINK" aria-label="GOOD LINK DESCRIPTION">NAME OF LINK</a>

You don’t actually need an aria-label if the link itself is very descriptive. ‘Read more…’ links will most certainly need an aria-label.

13 Visual clues of location.

Give plenty of visual clues as to where the user might be in the general scheme of the website. Breadcrumb navigation through a multi-layered website is a great tool to use in this regard. It is clearly visual and easy to use with a screen reader or tab key progression.

Highlighting the current page the user is on through a different color or signal in the navbar is another possible example.

A skip link is the name given to a hidden button (often in the top left of the screen) that will allow the user to go directly to the main body of content on a page.

If a user tabs through your website - the first tab keypress they come to should be a skip link, indicating they can go directly to the main content. Use these links for content heavy pages, like blog posts and/or articles.

Check out mine. Press the tab key for an example.

vector icon of a what a skip link looks like

When you have a radio button and a title explaining the radio button. Link them together so you can click the title as well as the radio button to activate that radio button.

When using the keyboard - spacebar activates the radio button.

Like this

<label for="radio-button" style="cursor:pointer">
   <input id="radio-button" type="radio">
   Click here to activate the radio button
</label>

vector icon of how to click a value of an radio to activate radio button

16 Consistency thoughout the website.

Pretty straight forward. If you have a design for one page with a clear journey through the active elements, it makes sense then that a similar presentation is used throughout the rest of the site. Give the user mutliple journeys and design ques is not helpful in creating a smooth experience.

17 Give clear error messages.

If you have any type of input that requires information from the user. The input should then clearly present an error or success message on either event. An incorrect email field entry should flag a clear error message, that has context and makes sense in relation to the input. The same goes for a successful completion of a contact form. Give a concise clear success message.

Inforgraphic

In case you missed it here is the web content accessibility guidelines infographic.