The importance of website accessibility

A good website is accessible to anyone, anywhere. Often when people talk about accessibility, the first things that come to mind are text size and colours, however there are many other dimensions which need to be considered - from the device that the user is using, to how good their connection may be, whether they have any visual, hearing or cognitive challenges which you need to bear in mind.

In this weeks blog post, we’d like to talk a little about some of the main accessibility considerations we discuss with our clients when creating a new or updated website, to do our best to ensure that all users have equal access and a good user experience.


Navigation

A really easy place to start with accessibility, is being mindful of the organisation of the content itself. Ensuring that you have a simple and easy to navigate website so that a user can engage with your content in a way that suits their particular needs is vital.

  • Is it easy to move from one page to another? Are there links between pieces of relevant content on your website?

  • Are the page titles clear and concise?

  • If there is repetitive content on your website, is this separate to the main body of content on the page, allowing the user to ignore it if they want to?

  • Is your main navigation simple and clear?

  • Is the purpose and availability of links clear?

Language

When developing a new or updated website, an important step is to take the time to understand your core audience. By catering to the specific language needs of your target audience, you can ensure that it’s easy for them to understand your content, improving overall engagement with your website.

Once you’re comfortable that you’ve met the needs of your target audience, it’s worthwhile doing an exercise to review your content and see where you may have terms, phrases or abbreviations which require further explanation. If too much explanation is required, maybe it’s worth considering simplifying your language to engage a wider audience?

Screen readers

Some users may be accessing your website using a screen reader. There are a few things that you can do to improve the accessibility for this particular user group on your website:

  • Ensure that page titles are clear and concise (also mentioned above, under ‘Navigation’)

  • Ensure that all images have text alternatives (otherwise known as ‘alt text’)

  • Ensure that language is easily understandable and you’re not using too many abbreviations or acronyms (also mentioned above, under ‘Language’)

Proper and consistent use of heading styles

Typically a website will have 3-4 different styles of text. This text hierarchy allows a user to understand in a quick and visual way, the importance of that piece of text and scan through pages looking for specific pieces of information.

When building a website, we usually use these heading styles in the following way:

  • Heading 1: traditionally the largest piece of text at the top of a page, often forming part of a banner or header. Short and punchy to quickly show the user the purpose of the page that they have reached.

  • Heading 2: to identify key blocks of information on a page, these again should be larger in style and allow the user to scan down the key pieces of information on the page.

  • Heading 3: often used to pick out additional pieces of information which are less important but the user may quickly want to find.

  • Paragraph: this is your standard text style, to detail the bulk of the information you’d like to convey to the user.

Colour contrasts

Colour contrast is really important and often gets overlooked in favour of ‘what looks nice’. Many people are unable to read text if there isn’t enough difference in the contrast between the text colour and the background that the text is on. For example, white text on a light blue background is very popular on a number of well established websites - however this is actually virtually impossible for someone with a visual impairment to read.

There is often a balance to be had between what looks great and what works for the largest audience and at Juniper, we run websites through a colour contrast tool before we finalise the colour palette. Sometimes however, it’s more important to a business that their brand colours are used (which may not meet contrast requirements) and so we work with our clients to find the best possible outcome for everyone.

Text size

Some users may need to increase the standard size of your website text in order to read it, it’s important therefore that you either provide them with a tool to do this (e.g. the BBC allows people to change the text size to small, medium, large) or check that if the user chooses to zoom in, this doesn’t break your website design. Most websites are fully responsive these days and so this is becoming less of a challenge, however it should form part of your website testing before you go live.

Keyboard access

To ensure that a user who isn’t accessing your website with a mouse can still have a good user experience, you should ensure that all parts of your website function with a keyboard:

  • Can the user scroll by using the up and down arrows?

  • Can a user move between fields on a form on your website using the tab button?

  • Can a user open a link or submit a form by tapping enter on their keyboard?

It helps as well to consider how a user using only a keyboard would experience your website when creating your design. Thinking about the placement of buttons, labels and text in relation to images so that they don’t have to press a million buttons just to get to the bottom of the screen!


This is just a taste of some of the things you should consider for accessibility when developing a new website and, as mentioned earlier in this article it may be that you have to choose which you’re going to prioritise due to budget, design desires or your target audience. If you would like some advice or think we can help you in developing your new, accessible website though - please do get in touch, we’d love to speak to you.

Previous
Previous

What is Product Strategy?

Next
Next

Data Security Basics