In this blog post series I will provide practical, usable tips for anyone who manages or runs a website to improve the accessible nature of the site and its content for those with disabilities. But first, a brief reminder of what web accessibility is and why it’s important.
WCAG – Website Content Accessibility Guidelines
Pronounced differently depending on where you are in the world, in the UK, it’s generally spoken ‘wick-ag‘ and refers to an international set of guidelines set down by the W3C – the Worldwide Web Consortium on best practice methods for the coding and creation of web pages and the content published on them.
In September 2020 it became law under the Disabilities Act for all public bodies to ensure their websites met this standard. It is not law on private websites (yet).
Why is web accessibility important?
Put simply, it’s the right thing to do. The internet is for everyone and the content on websites, especially those that are publicly funded, should be inclusive to all. 1 in 5 people in the UK have a disability or situation that means it’s hard for them to use a website that is not accessible. That means a greater barrier for them to find information that they are entitled to.
But also from a commercial point of view, why make it difficult for 20% of your potential customer base to buy from you online? The ‘Purple Pound’ in the UK represents the amount of money spent by those who have a disability – and it runs in hundreds of billions. Why exclude them and yourself from that trade?
Top website accessibility tips 1-10
- Lots of PDFs are simply images of text created by scanning hard documents. These PDFs cannot be ready by assistive technology, such as screen readers. If you have the original Word document, run the inbuilt accessibility checker, address any issues and then save is as a PDF. For extra help add both PDF & Word files to your website.
- When you create a PDF from MS Word – avoid using the ‘print as PDF’ function as this converts the document to one image. Even although the text can be seen by those with sight, it cannot be read by assistive technology. Select ‘save as’ or ‘export’ and choose the PDF format. The text can then be read by most OCR and screen reading software and the heading structure will be maintained.
- Screen readers will read aloud the text description of an emoji. If you use the “Rolling on the floor with laughter” emoji lots of times in a row, the screen reader will read out loud “Rolling on the floor with laughter” over and over. Limit the number of emojis you use in Tweets and web page content.
- Headings create structure to a web page and Word document for users and help them understand the sections of the document or page without having to read or trawl through it to find the section they need. For example, a section with a level 3 heading(H3) provides information that supports that provided in the previous level 2 heading (H2), and so on. It allows the user to navigate through the page without having to read and digest everything unnecessarily.
- Avoid using colour alone to present important information, such as on a website form. Marking required fields by only using coloured labels won’t help people who use screen readers or who have sight disabilities. Add text, like asterisks and/or “required” to the form so the user knows the key.
- Always add ALT text to an image when adding to a web page, Word document or social post. Not too long, not spammy but descriptive. If the image is a stock image or is purely for decoration, mark the image as “decorative” so the user does experience being audibly read ‘image of green tick symbol’
- When adding ALT text to images, don’t make it too long as screen readers will read out loud each image description which may create frustration and unnecessary distraction.
- Don’t add ‘picture of..’ or ‘image of…’ to ALT text – this will be audibly read by screen readers as ‘image of image of a golden retriever.’
- Don’t use lots of text embedded into images. The words cannot be read or accessed by those with sight loss or use assistive technology. If you have an image of a poster for an event or piece of marketing, make sure the important information that’s in the image is also added to the text on the page or post so those without sight aren’t being excluded.
- Infographics and graphs are great for those with sight but terrible for those without. When you include infographics & graphics that portray information or data on a webpage or in a document, ensure the same information is in the text, too.
More website accessibility tips in our next blog post.