A starter's guide to web accessibility

Written by Owen Priestley on 13th June 2017

(Last updated 21st June 2017)

No comments

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:

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

This article was posted in Development, Quick Tips by Owen Priestley

  • Owen Priestley

    Owen Priestley

    Owen is an award winning designer, strategist and user experience practitioner with over 20 years experience working within the digital design and communication industry.

    @owen20three

Comments

No comments have yet been posted, be the first to comment by using the form below:

Post a comment

*
*

Sign up to the Liquid Light newsletter

Subscribe to our Newsletter and stay up to date with all things web related. It's crammed full of useful articles, tips and knowledge, invaluable if you have a website or are starting a new web project.