A Quick Guide to Accessibility

 

Accessibility. It’s hardly the sexiest subject when it comes to designing a website and you wouldn’t be the first to sweep it under the rug. However, regardless of your target user’s physical ability, it’s likely that your site could benefit from universal design considerations for accessibility. Here are some key aspects to consider to ensure that your site is, at best, partially accessible to AA if not AAA WCAG 2.0 standards.

Navigation

First-up on the hit list is keyboard navigation. Both screen-reader and physically impaired users rely heavily on keyboard navigation to manage content across sites. Therefore, aspects of keyboard navigation such as tabbed content, skip-to links and keyboard focus must be considered during build.

All page elements should be accessible via the keyboard tab and communicated in a logical order that follows a clear page structure. This allows users to move freely between content on the site and control which section to interact with. Also a clear tab focus should be provided to highlight which element is currently active. Certain web browsers such as chrome have a default tab focus. However, it’s best practice to build this into your own site style sheets ensuring it’s always prominent regardless of the browser being used. This visual reference will give a clear, consistent indication to the user where they are on the page.

Skip-to links should also be provided. These are placed at the top of the main page content allowing keyboard users to by-pass page elements and jump to sections, saving time and enhancing usability.

Forms

One of the most frustrating parts of a site in regards to accessibility is forms. If not implemented well, a form can prevent screen-reader and keyboard users from interacting and converting on a site. A downfall seen across many sites is form fields that don’t have associated semantic labels. Without semantic labels, screen-reader users are unable to determine the type of information being asked for at each stage. This needs to be clearly highlighted within the form label, setting expectations for the interaction (i.e. if they need to type, select or click in the associated field).

Timeouts are another big issue. It’s likely that screen-reader users will take additional time to fill out a form due to the extra work involved with navigating and visualising content. As such, timeout sessions limit the usability of the page and should be avoided where possible.

Colour

Colour also needs to be carefully considered. When dealing with colour there must be a sufficient contrast between the background and foreground content to ensure that visually impaired as well as able bodied users can easily digest the information displayed. This is particularly an issue for those who are colour blind. WCAG 2.0 specifies that to meet AA standards the contrast ratio between foreground and background elements should be 4:5:1 and 7:1 for AAA. Ratios can be checked with the Colour Contrast Analyser

accessibility guide.png

 

Alt Tag: White against blue Colour Contrast Analyser results  

The Colour Contrast Analyser requires the user to select the background and foreground colour with a drop-tone picker. In our example above we have white against blue. From the results we can see that this contrast ratio passes for AA text but fails for AAA normal text. Therefore, the tones may need to be adjusted to ensure the content is readable.

It’s worth noting that even if contrast ratios pass AAA standard, colour should never be fully relied on to communicate information. Interpretation of colour can differ a lot between users. Therefore it should be supported with either text or icons to communicate meaning.

Images and Media

Imagine your page is packed full with imagery and interactive media. It may look great, but what does it mean for a blind user? Can they easily visualise and interact with what is being displayed?

For imagery, screen readers use alternative text (alt. text) to verbally explain what an image is communicating. This is particularly important when the image supports a user’s understanding of the content. However, at times this alternative text can be missing or lack an accurate description. Providing meaningful alt. text for all images across the site, ensuring the description provides the equivalent information as the images themselves, is important. For purely decorative images, a ‘null’ attribute can be applied. In addition, images of text should be avoided. Use web fonts instead to keep things clean and clear.

These are just some general points to consider when ensuring that key accessibility points have been addressed across your site. It’s likely that there are more specific elements that your site could improve, in which case there are online plug-in tools such as wave or the web accessibility toolbar you can use. Each of these tools run a quick accessibility audit on your site, generating recommendations for change, helping create a site that is useful and usable for all user abilities. 

 
Nicola Dunlop