How to make your website accessible

Enjoy Digital
By Enjoy Digital
5 minutes to read

Website accessibility can often be forgotten. Especially if those who own, design or develop the website are not affected by the same disabilities. It’s sometimes remembered at the last minute and a botched job can often be detrimental to the overall site design.

Website accessibility should be considered from the very start of the design and development process so that it can work in unison with the overall website.

Know your accessibility onions

If you don’t know how to make your site accessible then it won’t be accessible. The organisation in charge of developing open standards for the web, the W3C, have a set of guidelines to help make your websites accessible.

The Web Content Accessibility Guidelines (WCAG) contains detailed advice on accessibility issues to take into consideration when developing a website. Not only that, but it helpfully provides suggestions as to how to successfully combat the problems identified.

The guidelines contain simple suggestions and solutions of things you may have already considered such as providing text alternatives for images and videos. However, they go one step further and offer more complex things to take into account like ensuring content design doesn’t induce seizures.

The guidelines also include levels of conformance from level A (low conformance) to level AAA (high conformance). This lets you gauge how optimised your site is for accessibility as well as choosing HOW accessible you want it to be.

Find the right tools

To save you having to go through your website bit by bit spotting accessibility issues, there are tools which will do this for you.

The majority of the tools available work in tandem with the WCAG and highlight which areas need working on. All you have to do is input a URL and the tool will crawl the page, or even the entire site, for you picking up on issues.

Better yet, save time and know your accessibility issues as you code. There are several Google Chrome extensions for developers which allow you to run accessibility tests while you code. Many are still a work in progress and don’t always pick up everything but they are a good starting point.

Simple things can make a big difference

Adding ARIA, Accessible Rich Internet Applications, attributes to content can make a massive difference to accessibility and takes very little effort to implement.

ARIA are recognised by all major browsers and accessibility equipment such as screen readers.

A simple ARIA to add are landmark roles which use the ‘role’ attribute to designate regions of page. Simple by adding ‘role=”main”’ to a container element, this block can be easily scrolled to from the top of the page. ‘role=”navigation”’ can also be easily used for various navigation containers.

Many of these have equivalent HTML5 elements, ‘<main>’ and ‘<nav>’ for the examples given, but the ‘role’ attribute is needed for accessibility tools to properly recognise them.

ARIA attributes can also be used to show the state of content, such as:

  • Designating the sequence of input elements:

<input type="text" id="username" tabindex="0">
<input type="password" id="password" tabindex="1">
<button type="submit" tabindex="2">Log in</button>

  • Elements emulating input:

<span class="checkbox" role="checkbox" aria-checked="true" tabindex="0">

Another really easy thing to do is to simply add ‘alt’ tags to images to provide an alternative text version.

It might seem like a daunting task at first but making your website accessible doesn’t have to be a complicated process. By implementing the above suggestions, you’ll be well on your way to having a website that can be viewed and used by everyone.

What steps have you taken to make your websites accessible?


comments powered by Disqus