Top five tests for website accessibility

At TELUS, we take web accessibility seriously. We strive to make our digital products inclusive and we design, code and test new products with accessibility in mind. What does it mean to make your website accessible? According to W3C, the international community helping to develop Web standards, accessibility is ensuring anyone can understand and interact with your site.

For example, if you advertise sale prices on your site in a colour with poor contrast, someone who is colourblind won’t be able to differentiate the sale from the regular price and might leave your website, frustrated and confused. An accessible website is highly usable by all people including those with various impairments including:

• Visual

• Auditory

• Physical

• Speech

• Cognitive

• Neurological

We want our customers and our employees to do what they want to do on our site, easily. So we test to see what works and what doesn’t. Throughout our testing practice, over numerous iterations and sprints, we’ve found a few tests that result in greater accessibility coverage. And they’re speedy and fairly straight-forward to run.

Here are the top five tests you can run to ensure your site is accessible:

1. Contrast: An easy way to make sure your site is accessible by people with low vision is to check the color contrast between text and background colors. Tools like Color Contrast Analyzer can highlight text colors that do not pass the accessibility requirements.

Color contrast analyzer checks font colors for accessibility requirements.

2. Navigate using keyboard: Ensure your site is accessible by keyboard only - without the use of mouse or trackpad. An easy way to test for keyboard navigation is to unplug your mouse and browse the site using the TAB, ARROW, SPACE, ENTER, and the ESC key, for closing dynamic UI elements. This is especially helpful for people with mobility impairments. It also ensures that responsive products work on touch devices, ones that don’t normally support mouse or cursor interactions.

Using VoiceOver to navigate through the webpage.

3. Verify HTML markup: Screen readers such as VoiceOver on Mac use the website’s HTML to make sense of the content. We make sure the HTML is semantic & valid. For example, we use heading elements (instead of non-semantic divs and spans) in the right order, h3 after h2 and h1. This allows a screen reader to interpret the document correctly. There are many HTML validators such as the W3 validator that automatically check for HTML semantics.

4. Check for descriptive images and links: When using a screen reader, it is nearly impossible to interpret an image if there is no alternative text present to describe that image. We give all our informative images an “alt” attribute with descriptive text. Decorative images with no important information and are there for visual appeal should have an empty alt attribute, e.g. alt=””. Same goes with anchor tags. The link text should be relevant for a user who cannot see the context of it. Consider avoiding links that lead to nowhere and have no link text such as .

Decorative images, such as iPhone, should have an empty alt attribute.

5.Try an automated testing tool: There are many accessibility testing tools, some that are free and can run straight from your browser. Automated testing tools don’t test for everything and they definitely can’t make subjective decisions (Is the alt text for an image descriptive enough?) but they’re good for objective, binary tests: e.g. are form fields labeled? Is the content structured semantically? The Chrome Accessibility Developer Tools& WebAIM’s WAVE are great tools that we use.

Automated testing tool in action.