Best practices for making your site accessible

Best practices for making your site accessible

“The power of the Web is in its universality. Access by everyone, regardless of disability, is an essential aspect.”
Tim Berners-Lee,
W3C Director and inventor of the World Wide Web

Over one billion of people worldwide are living with some kind of disability—246 million with visual impairments—according to the World Health Organization.  Given these numbers, what excuses do we have as designers and developers for not following best practices to accommodate users that rely on assistive technologies?

There are a variety of disabilities we need to consider that include visual, cognitive and physical impairments. Each group will view a site differently, by tabbing through content, with a screen reader, by modifying their browser settings or with the help of assistive technologies.

Over the last 10 years, we have seen an improvement in accessibility of desktop sites with the adoption of CSS3 and HTML5, which have provided alternatives to table layouts, spacer gifs, image headers and Flash sites, neither of which worked well with screen readers.

A summary of the Web Content Accessibility Guidelines

The Web Content Accessibility Guidelines (WCAG 2.0) are designed around four fundamental principles:

  1. Is it perceivable?
  2. Is it operable?
  3. Is it understandable?
  4. Is it robust?

Each principle has guidelines we can follow to ensure a site is accessible.  There are three levels of guidelines; so one thing to consider in your next project is the level you may need to meet and this can vary within different parts of a website.

Things to consider:

  • Level A – Lowest
  • Level AA – Middle
  • Level AAA – Highest

Part 1. Perceivability
Perceivable content applies to the visual aspect of a site, providing a version that is available for users who require other modes of sensing it. This means that there must be a text equivalent for your video and audio so that a maximum number of users can take advantage of them. But it also applies to users who are color-blind or have reduced vision.

Things to Consider

Color Contrast.
Avoid low color contrast when using text on a background.

  • Level A at least 3:1
  • Level AA at least 4:5:1
  • Level AAA at least 7:1

At the end of this article you will find a list free tools you can download to test the color contrast and luminosity of your design.

Make your site easy to read.
Users will use zoom in and out using their browser settings so make sure the screen is readable at twice the font size by having a line height that is 1.5 times the font size.

Part 2. Operability
Every control, link and button on your site is a potential failure for operability. Without appropriate consideration for the disabled, you run the risk of this user group not being able to navigate the content on your site.

Things to Consider

Navigation should be accessible tabbing through the site. That said, the ability to quickly scan a page with a screen reader or a keyboard is not an option therefore it’s important to keep in mind a smart architecture to allow users to know where they are on your site while providing a logical path to return to a chosen location.

In addition, links with the same wording should not go to different locations and they should be descriptive to provide context.

Provide multiple ways for users to understand where they are and where they might want to go with breadcrumbs, page headers, content headers, sitemap.

Things to consider with navigation:

  • Make sure your navigation identifies the current page your user is on
  • Consider adding supporting navigation such as breadcrumbs
  • Headings should describe each section of your site
  • Links should have a hover state other than just a color change such as using underline

Guideline 2.2: Enough time to complete
This guideline refers to the timed processes, for example online testing. Best practices would be to ensure that users have the ability to extend the time allotted for situations where the time itself is an essential part of the process. This guideline also applies to authenticated sessions such as a shopping cart checkout process. Users should be allowed to continue the activity without loss of data after re-authenticating.

Guideline 2.3: Seizures
It is well known that flashing content can trigger seizures. It is recommended that content not flash more than three times per second. 

A note to developers
Keyboard and screen reader users are also limited with more complex user interface controls such as tree controls in website navigations, drag and drop functionality and custom controls used in Rich Internet Applications.

The good news is, the Accessible Rich Internet Applications Suite (WAI-ARIA), defines a way to make Web content and applications more accessible. It especially helps with dynamic content and advanced user interface controls developed with AJAX, HMTL, JavaScript and other related technologies.

Things to consider with interactive media:

  • Provide Rich text downloads or transcripts for audio and video
  • PDF downloads that cannot be read by screen readers should also be provided as Rich Text downloads
  • Provide a way to pause/stop and adjust the volume

How to test your site for operability
Simply disable your mouse and navigate your site with your keyboard. Similarly, test your site with you built-in screen reader software (Mac and PC).

Part 3. Understandability
Making content understandable means specifying the language in your XHTML and HTML. By default, assistive technology will attempt to read in the language of the user’s computer. This is fine if the user stays within websites written in their system language.

Similarly, explaining the meaning of abbreviations and acronyms is crucial to accessibility.

Things to Consider

Guideline 3.2 Make web pages appear and operate in predictable ways.
Be consistent with the interactivity on your site. This means, use the same navigation throughout and same label for repeated elements.

Guideline 3.3 Help users avoid and correct mistakes.
Think about how you are going to handle when a user makes a mistake.

In short, take a good look at your site and determine whether it actually makes sense.

Part 4. Robustness
The fourth principle of the Web Content Accessibility Guidelines suggest that developers validate their HTML and any supporting languages they are using to build a site.

Managing website robustness is a tricky practice of carefully balancing the specifications of a language with what will provide the best practical experience for users of assistive technology. Although validation isn’t actually required, it’s a good way of checking to see whether there are any errors in your page that will cause problems for your customers with disabilities. You can play it safe by using highly supported technologies such as HTML and CSS. Although using rich media technologies such as Flash or Silverlight are not forbidden, if you do choose to use them, however, you’ll need to understand their levels of support for assistive technology.

Web/Mobile Accessibility Guidelines

Web Accessibility Evaluation Tools

Accessibility testing sites

Free downloadable color contrast analyzer apps
These tools check for color contrast, color brightness, and other accessibility criteria.

View full list of tools on Web Accessibility Initiative (WAI) :