A starter's guide to web accessibility
Digital is now the new normal, and your online presence can often be the first point of contact a customer has with your brand. Just as high street stores have to cater for the needs of the physically impaired, businesses also need to ensure that their sites are accessible to everyone, including those who might have disabilities or physical impairments which might affect how they interact with websites or digital products.
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.
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
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!
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
Lastly, here is a great talk by Seren Davis on accessibility from this years Render conf: "Accessibility Is More Than Just Supporting Screenreaders".