Top 6 tips for improving website 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
Paragraph text

Sub section to section 1 – use H3
Paragraph text

Sub section to section 1 – use H3

Section 2 – use H2
Paragraph text

Sub section of section 2 – H3
Paragraph text

Sub section of section 2 – H3
Paragraph text

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.