I wanted to talk a little about how we adhere to the accessibility standards laid out by the W3 web consortium. These are termed Web Content Accessibility Guidelines or WCAG.

The WCAG documents explain how to make web content more accessible to people with disabilities. Web “content” generally refers to the information in a web page or web application, including:

  • natural information such as text, images, and sounds
  • code or markup that defines structure, presentation, etc.

These guidelines help people using assistive technologies, such as screen readers and text-only browsers, to navigate ever more complex websites.

An example of how the correct mark up can help is in navigation elements. We’ve all seen the standard top or side navigation bars in websites, that often have multiple sub-menus and let a user navigate quickly to any area of the website.

For instance, the Amazon navigation bar has over 100 such links hidden away in the navigation bar.

What is not apparent to users that are not using assistive technologies is that this navigation bar appears first in the content flow of the website. As a visual user you can quickly skip over that part and get on with buying a new TV by just averting your eyes. A screen reader however must read over that entire navigation section and read out every link, EVERY time a page is loaded, can you imagine the inconvenience and annoyance that would cause!

To overcome this web designers can use a specific HTML 5 element, plus a few other attributes from the ARIA set, to define a navigation section. This lets assistive technologies know that everything following that declaration is navigation, and the user can skip over them easily if they want to.

Check out this YouTube video of the old inaccessible amazon website to see just how annoying this would be.

So as you might imagine the first thing we do here at TeamKinetic is to make sure all the navigation elements are enclosed in the correct element tags so assistive technologies can render them correctly.

At a minimum, we seek to make sure every public page has no errors when scanned with the WAVE accessibility checker and on each audit we attempt to address any alerts that appear.

This is the list of major conventions we use to help us adhere to the WCAG standards;

  • All navigation elements are enclosed in an HTML 5 nav element that is given the role=”navigation” so that newer and older assistive technologies will recognise the enclosed section as navigation
  • All images have a meaningful alt tag so the user gets an idea of what the image means
  • All anchor or link tags have meaningful text, this is sometimes hidden from the non-assistive browser in the case of icon buttons for instance.
  • Text colour and the background is selected to have a contrast exceeding that recommended for the text size.
  • All input form elements have a label tag which describes what data should be inserted into the form element.
  • The tab order of form elements is logical and follows the on-screen order so that people can tab through a form easily.
  • ARIA roles and landmarks are used where appropriate.

In our next audit, we are attempting to improve the experience for our dynamic content. This is content which may appear or disappear without a new page being loaded. This means that users of assistive technology may become stuck on an alert or page overlay without knowing that it is there.

There are always ways to improve and if you have any comments or suggestions we would welcome them below.