A starter's guide to web accessibility

Ignoring the obvious ethical reasons for this, and the commercial reasons (i.e. you risk missing potential clients/customers) there is the firm, immovable reason for ensuring your business’ website is accessible: failing to meet accessible design standards could lead to your business being sued for discrimination.

Based on UK law, web accessibility covers a lot more than just disabled access. It covers all users, to ensure people are given unimpeded access to your website via mobile phones through to web-enabled televisions, irrespective of screen size and technology such as Flash or JavaScript.

The legal stuff

Web accessibility is covered under the Equality Act which came into force in October 2010, which although does not explicitly refer to websites “the consensus has been that the reference to the "provision of a service" applies to commercial web services as much as to traditional services.”(out-law.com)

Below are some commonly overlooked issues, and why they matter:

No Alt descriptions for images

Without Alt descriptions users who reply on screen reader aren’t able to gain a full understanding of your page content. Alt descriptions need to be meaningful. Sticking in a caption that does not relate to the image is not helpful to sight impaired users. Alt Tags should not be a box ticking exercise, but be a meaningful description of the image. 

Images should not be stitched together montages either, unless you want to be adding a bucketful of text of your Alt Tag. 

User interface elements (buttons and links) not having labels or being keyboard accessible

Back to screen reader here; users who rely on a screen reader will not know what your buttons and controls are if they aren’t labelled correctly.

Illogical keyboard navigation

Users navigating websites using the keyboard need clear feedback (what is selected?) and when the user is tabbing through links, there should be a logical order. Tabs that lurch from the header navigation to footer navigation to body content links is illogical and will cause frustration. 

Colour not differentiated between text and background

This one should be fairly self explanatory, if there isn’t enough of a difference is colour contrast, those with limited vision will struggle to view your website content. Always check your colour contrast ratio. There are many online tools to help you check your colour ratio, One I often use is the Webaim contrast checker.

Link text not being descriptive

You ideally need to clearly explain where a link will take a user should they click on it, without it users can’t be confident of where links will take them.

Link area not being large enough

When link areas are small it can be difficult for users with mobility issues to hit the correct area with their mouse. The same logic applies to mobile users - give generous areas for links and buttons etc.

No back to top links

Some users might struggle to scroll (painful or inability) long pages - add back to top the moment they start scrolling

Missing captions

For the hard of hearing, captions for video content is essestial. On youtube viewers can add captions, but that’s relying on users. Add captions!

Animation

Slowing down animation can reduce risk of seizures. W3C advises less than 3 flashes/movements per second (e.g. flashing parrot)

Overuse of uppercase

People with dyslexia struggle to read all uppercase - We don’t read words but shapes of words, having all uppercase slows reading down for everyone.

Disabled highlighting of text & right click

Give users the opportunity to use accessibility tools

There are lots of resources available about accessibility that go into more detail about how to ensure your website is accessible, and just some of them are:

• The World Wide Web Consortium (W3C)
• W3C Web Accessibility Initiative
• gov.uk: Making your service accessible
• www.web-accessibility.org.uk

Lastly, here is a great talk by Seren Davis on accessibility from this years Render conf: "Accessibility Is More Than Just Supporting Screenreaders".