Top 6 tips for improving website accessibility
Firstly, here’s what we mean when we refer to ‘website accessibility’ and why it’s an important thing to consider if you run a website.
Making a website or app ‘accessible’ means making sure it can be used by as many people as possible and that includes those people with:
- impaired vision
- physical difficulties
- cognitive, neurological or learning disabilities
- deafness or impaired hearing
The story so far
At least 1 in 5 people in the UK have a long term illness, impairment or disability. Many more have a temporary disability.
Some people have disabilities that require them to use assistive technology to help them use a computer and surf the web, such as screen readers for those with sight-related challenges as well as a host of hardware technology to assist those with physical disabilities. However, websites are for the most part not built to work with these bits of tech. Especially older sites that are more than a couple of years old.
Those who use an assistive tech interface face huge challenges navigating a website and finding the information they need. Whether it’s using a Government website through to buying shopping online or dealing with everything else that has gone online.
Thankfully, recent laws mean that all public bodies have to get their websites accessible and achieve WCAG2.1AA – a rating that sets a standard for how websites achieve accessible benchmarks. The public sector is getting there but there are still many government sites for councils and organisations that need to improve their websites.
Unfortunately, there are no such requirements for privately-owner websites. That’s why it’s important as a business owner with a website to consider those customers that may face challenges when using your website.
The changes to a website from a technical point of view can be a bit tricky, though and are really suited to a web accessibility expert. But if you are searching for a quick solution, don’t fall foul of the ‘accessibility plugins’ that can be installed on websites for free in minutes. Most are terrible and often create even more barriers for people who use assistive technology as they require the user to interact with the plugin first before using the website – and that just adds to greater challenges and frustration.
Online spending of the ‘Purple Pound’, as it is known of those with disabilities but still transact online, is vast. And with recent figures suggesting that, of the 7 million working adults with a disability, the purple pound adds up to a whopping £249bn to the UK economy with an estimated £11.75bn of that being spent online.
So, not only is it the right thing to do to make sure your website is accessible, but it is vital to an online strategy and makes good business sense, too.
Here’s some tips and tricks you can use on your website to improve the overall experience for those with disabilities.
Tip 1 – Images and graphics for the visually impaired
Make sure that you add ALT TEXT – a textual description for every image on your website. Those with visual impairments may not be able to physically see the image but their assistive tech on their computer – such as a screen reader – will be able to tell them what the image represents.
Often images that are uploaded to websites are just left as they came off the camera or phone – so you end up with ALT TEXT of DSC38475.jpg – completely useless and not helpful, so rename the file before uploading it and if you are using a web tool like WordPress, add the ALT TEXT when it’s in the media library.
If you are using graphics and icons – if they don’t really add anything to the information you want to get across, they can be marked as decorative and so don’t create a barrier or hurdle someone using a screen reader has to hurdle. If you are using infographics – natively a visual display of information in a pictorial way, make sure that the information and data captured in the infographic image is also typed out on the web page so that the anyone with visual impairments can access that info – screen readers cannot tell the user what words and numbers are on a graphic as the text will have been converted to a picture.
As a side point, not really related to accessibility, Google prefers websites where images are handled this way, too – so there’s even more reason to consider it. If you needed one.
Tip 2 Documents and accessibility
Another trip-up for many. Your website may be accessible to those with disabilities but what about the content you put on the page? Those PDFs you upload and link to – are those documents accessible? Often, they aren’t. They will be nicely-designed PDFs and be very graphical and fancy but a complete nightmare to navigate for those who use assistive technology. How many times have you had to pinch and zoom a PDF – well if you have visual impairments, have motor or physical difficulties, that makes it almost impossible to know what’s in the document.
If your PDFs were originally created from an MS Word document then go back to that original, enable the inbuilt accessibility checker (yes, it’s had one since 2016!) and fix the things it picks up as a problem – the tool is excellent, points out all the problems and tells you how to fix them. Then you can save the PDF knowing that it’ll be easier for those with disabilities to access. Aim to get the PDF in a PDF-A format – most PDF readers will tell you whether if a document is when you open it.
Linking to Word, Excel or other proprietary software formats also creates barriers. Not everyone has an MS Office subscription so if at all possible, try and get the information that’s in the PDF actually on to the web page – then users of assistive tech are much more likely to be able to interact with it.
Also, by adding an editable file format, such as Word or Excel to a website means that, whilst someone can’t edit what’s on your website, they can download it, edit it and distribute it without permission with inaccuracies – so you’ll increase the likelihood of version control problems.
Tip 3 – Links and the link text
This is a regular offender on almost all websites. Links that have the text ‘click here’ or ‘read more’ or ‘download’ – click to what, exactly or download which file?
Making the link text a description of what the user will get or where they are going means that, as a user of a screen reader, they know what to expect. Simply using ‘click here’ doesn’t tell them where they are going. Whereas, using the text ‘visit the Small Business Britain website’ as the link text says exactly what will happen if the link is selected.
In the same regard, linking to a document with link text that describes the document helps a great deal, such as ‘The Small Business Britain Resilience Report (PDF)’ is better link text than ‘click here’ – it provides a better experience for everyone, not just those with additional accessibility needs.
Tip 4- Web page headings
This is one aspect that most web administrators aren’t aware of, but the skills and knowledge are completely transferrable to MS Word and other text editing applications and aren’t just limited to web pages.
Headings are important to a document’s construction – not just for those that use screen readers but everyone. You’ll have seen in MS Word in the top bar a formatting option for different headings and styles. Well, these are, for the most part, misused. Most people select the headings based on what the text font looks like.
But this is completely wrong. The styling is second to the heading classes H1, H2, H3 etc, being used to structure the document.
By making sure each section in a page, whether a Word page or web page, has a main heading (the H1) and then the other main sections having H2 and then H3 as sub sections of those, ensures that for users that have to navigate using a screen reader, they can skip to the section that is of specific interest, rather than have to wade through lots of text that may present a concentration challenge or just be hard to get through.
So, making sure the headings are well written and describe the section, it helps both users of assistive tech and those who don’t tab through to the exact content they need more easily.
A good tip is to make sure you also use the heading classes in sequential order – don’t use H2 and then jump to H5 and then back to H3 – Think of it like a hierarchy of the page’s content – the order of the content in sections. Here’s an example:
The page title – use H1 (you should only have one H1 per page)
Section 1 – use H2
Sub section to section 1 – use H3
Sub section to section 1 – use H3
Section 2 – use H2
Sub section of section 2 – H3
Sub section of section 2 – H3
By following this principle in both webpages and Word documents, your users – especially those that use screen readers, will have a much easier time and a better experience.
A good tip is to make sure the heading classes are set up to look the way you want before you get started. In MS Word, it’s easy – simply right-click on the style bar at the top where the heading classes are listed, select ‘modify’ and away you go.
For a website, you may need to get your web developer to help but it would take less than an hour to make sure the styling of the heading classes all visually look the way you want. That will help prevent you selecting a heading class based on what it looks like, rather than the actual correct heading class.
Tip 5- Text: typefaces, sizes and font weights
The size, colour and typeface all contribute to a great deal of website accessibility problems.
The biggest issues are where text is either too small or coloured in a light colour or tone, making it difficult to see by those with visual impairments.
The choice of a website’s typeface, for example Arial or Times, makes a difference, too. Some fonts are more difficult to read for those not only with sight issues but reading challenges, such as Dyslexia. But it’s not just about those with identified disabilities – the elderly also struggle to read small text or fussy-looking typefaces.
The best practice is to make sure that you use a clear, clean typeface that has a few versions available – such as Arial. You might sigh and think it’s boring. However, it is a clear, defined typeface that is available in different font weights and scales up for those that use screen magnification. There are many other web fonts similar to Arial and you can find them to use on your website at https://fonts.google.com – all free to use and you can check their accessible nature there, too.
Tips when setting up the text on your website:
- Use a clear and clean typeface
- Make sure you use black or dark colours on white or very light backgrounds to ensure contrast
- Use the heading classes as previously mentioned
- Don’t over style – don’t use long lengths of bold, italic or underlined text
- Avoid colouring the text where possible
- Use a font size with a minimum of 12px, 14px is better
- Avoid using all-capital letters unless it’s an acronym (and always write out what the acronym stands for – e.g. ‘SBB’ should really be written SBB – Small Business Britain
- Use Sentence case or Camel Case when creating headings
The last tip is to ensure the line height is set well. Line height is the space between each line of text. Set too tightly and it can be tricky to read, set to much (or ‘open’ to which it is referred) and it’ll potentially introduce comprehension problems as the lines of text won’t look connected.
As a general rule, setting the line height to 150-160% of the font size is just right.
Tip 6 – Colours and contrast
This aspect of running a website and its accessibility is sometimes overlooked or not understood because the experience for those with full vision won’t necessarily experience the difficult nature of a website that has colours and contrasts that aren’t set correctly.
As we have mentioned in our previous tips, the colour and size of the text is vital for those with sight related disabilities as well as those that have learning challenges, Dyslexia and the elderly who may not have an identified disability but struggle to see the content of a web page.
The principles are very simple – here’s some tips to help improve the accessibility of your web pages:
- Make sure the background of the page is white, very light (<10% of colour) to create the correct contrast with the text.
- Make sure the text is black, dark grey or a very dark colour. Using coloured text, such as red or green creates difficulties for those with colour blindness. It’s also hard to read on the page.
- When choosing a colour palette for you website make sure there’s a good balance of very dark and very light and avoid choosing pastel or muted colours.
- If you are using large blocks of dark colour as a background make sure the text you place over it is white and of a sufficient font size and line height.
- Website menu bars and drop-downs are best when then have a completely contrasting colour when moused-over, along with a contrasting colour for the text so that it’s really clear the user has selected an option. E.g a dropdown menu may have a very pale grey background with black text and then, when moused-over, the background changes to black and the text white.
We recommend you download the free Google Chrome browser extension WAVE by Webaim – once installed on your browser, this little tool will allow you to visit a web page and run the checker for texting contrast, colour, fonts, sizes, headings and all the points we’ve covered in our tips so far.
If you are looking for help and guidance to get your website accessible please visit www.aubergine262.com/blog for the latest tips.