Most of us take the web for granted. However, 20% of people in the UK have problems accessing websites. Some users are blind or have a visual impairment that prevents them seeing sites clearly. Some have problems holding or controlling a mouse to navigate the web. Others are deaf or have hearing impairments that prevent them experiencing multimedia content.

How much do we consider these users when we create our business’s website? In most cases the answer, sadly, is not much.

In this article, we consider the top ten things you can do to ensure that your website is accessible to all of your current and potential customers.

1. Words and Pictures

The web is a predominantly visual medium. However, many people are unable to see your website clearly due to blindness or other visual impairments. The World Health Organisation estimates that there are more than a quarter of a billion visually impaired people in the world.

Many blind and visually impaired people use Screen Reader software to access the web. Screen Readers takes the text content of a website and reads it aloud to the user, or presents the content on an electronic Braille reader. This output includes both the text that is visible to sighted users, and other text information that is present in the underlying code of the website.

Of course, many visually impaired users will be unable to see the photos, illustrations or other design elements on your website. At best this will detract from their experience of the website and, at worst, could mean that much of the site content is totally inaccessible to them.

To address this, most web editing software or Content Management Systems will allow you to add what is called “Alt text” to images. This is text that will be read out to users of Screen Readers in place of images to describe the visual content they are missing.

For each image that add meaning or context to your website, you should aim to add meaningful Alt text content. For instance, if you have a photo of Edinburgh Castle set against a backdrop of fireworks to illustrate an article about Hogmanay in Edinburgh, you could add the following Alt text…

“A photograph of Edinburgh Castle at Hogmanay with fireworks exploding in the night sky.”

In the early days of web design, it was common practice to use images containing text instead of using the text itself on a website. If your website uses images that contain text, including logos, these will not be accessible to screen readers, and you should ensure these have Alt text set.

However, it is not required or helpful to add Alt text for every single image on your website. Where an image is decorative or simply adding to the design, and not integral to the context or meaning of the content, then it is appropriate not to add Alt text.

2. Contrasting Colours

The use of colour is an important part of web design. However, if the colour you use for the text on your site does not contrast sufficiently with the background colour behind that text, then many people will find it difficult to read.

Web Content Accessibility Guidelines requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text to achieve AA accessibility rating. The WebAIM website has a useful tool. Here you can check if your own website colours conform to this standard, by entering the colour reference numbers of the foreground and background colours on your website.

On the other hand, too much contrast between text and background colour can also cause problems. The highest possible contrast is pure black text on pure white. Such high contracts can prove difficult for dyslexic users, who experience such text as blurry or swirling. As a result, it is usually best to use a very dark grey text or a slightly off-white background to avoid too much contrast.

3. Stay Focussed

Most users of the web are most familiar with using a mouse (for desktop computers), a mousemat (for laptops) or their fingers (on touch screen devices) to navigate around websites. However, navigate the web this way required great dexterity and good eyesight, and many users with visual, physical and mobility impairments are unable to navigate this way.

For these users, the only way to navigate the web is via a keyboard, or other simple input device, that will allow them to move the “focus” of their cursor on the screen from one functional element to the next. In fact, we can see this in action ourselves in most browsers by clicking the “TAB” key on our keyboard.

On most browser software, by clicking the “TAB” key, we should be able to see each link, button or input box on a website become highlighted in turn. This is called “focus” – by clicking the TAB button, we move focus from one functional element of the website to the next. And by clicking “Enter” we can then follow the link that we are focussed on.

This ability to use a keyboard or other simple input device to shift focus and navigate a website is integral to accessibility for many users, and you should ensure that your own website clearly displays which link, button or input box the user is currently focussed on when tabbing through your website, and that they can navigate your website without being required to use a mouse or other pointing device.

4. Access All Areas

Further to (3) above, many sites contain sub-menus that can be hidden to users until they hover their mouse over the menu. For users without a mouse, you should ensure that sub-menu items are accessible to them through the keyboard navigation described above. You should ensure that “tabbing” through the links on your website opens up otherwise hidden submenu items, or you should ensure that these submenus are available to users within each section of the website once the user has navigated to the new page.

The main requirement here is that every page should be accessible to every user, regardless of what device they are using to navigate the website.

5. Skip to content

We have seen how users with visual or physical impairments use “tabbing” as a way to quickly skip from one link, button or section of your web page to the next. For users with Screen Readers, remember that the Screen Reader software will read out loud every bit of content it finds, starting from the top of the page, through each menu item, headers, content, sidebars and footers.

In most modern websites, much of the content is repeated on every page – particularly the navigation menus. We shouldn’t force users with Screen Readers to listen to the navigation menu being read out every time they visit a new page on our site – if we do, they will soon get tired of our site and abandon it altogether.

It can be useful to include a “Skip to content” link near the top of the page to allow users with Screen Readers to opt to jump past the navigation to the content of the page that they want to read. We don’t need to show these “Skip to content” links visually on the site – they can simply be available to Screen Readers to allow users to bypass information that is repeated on every page.

6. Hierarchical Headings

Blind and visually impaired users aren’t able to orientate themselves to our web page quickly by scanning content by sight. However, Screen Reader software does allow users to jump from one section of content on our site to the next using Headings.

Most web editing software and Content Management Systems allow us to add different levels of headings and sub-headings to our content – usually from Heading 1 to Heading 6. Heading 1 is usually the largest heading visually, with Heading 6 the smallest. When used correctly, this gives structure to our content, and allows us to signpost the hierarchy of the content.

Screen Readers will allow users to skip from one Heading to the next Heading of the same level.

Ideally, we should use the same heading number for information of similar importance. So, for the name of our website we may use Heading 1. Then we could use Heading 2 for the title of each main article on a web page. Then Heading 3 for sub-headings within each article, then Heading 4 for sub-sections without those sub-headings. And so on. This will allow users of Screen readers to jump from one Heading 3 directly to the next Heading 3. By doing so they can quickly jump from one Article to the next. Or it would allow them to jump from one Heading 4 sub-section to the next within an article.

It doesn’t matter what Heading levels you use, but you should ensure that you use them regularly, hierarchically, and in a logical and internally consistent way, so users of Screen Readers have a quick way to skip through the content of your site to find what the content they are interested in.

7. In-form-ation

How often have you filled in a form on a website, only to click “Submit” and find that you have forgotten to complete a question, or have answered something incorrectly that means that the form cannot be processed?

Usually when this happens, the website presents visual indicators showing where you have gone wrong – either displaying your error in red or showing some text explaining the problem. For blind or visually impaired users, however, visual indicators may be little help, and they may struggle to work out why their form hasn’t submitted as expected.

When building forms on your site, you should ensure that any errors on form submission are displayed and explaining as text that can be read by Screen Readers.

It can be useful to install Screen Reader software on your computer to test whether error messages or your site are read out for users. Windows users can download the free NVDA Screen Reader software. Users of Apple products can use iOS’s built in Voiceover feature – find out more about using Voiceover screen reader.

8. Be Responsive

In 2014, website access from mobile devices – phones and tablets – overtook access from desktop and laptop computers for the first time. Mobile internet access is now so prevalent that Google has started to penalise websites that are not “mobile friendly” within their rankings.

“Responsive Design” is web design that responds to the type and size of device that the user is using, and presents the website in way that is appropriate to the user’s device.

For instance, a user accessing a website on their mobile phone will usually browse that site by touching their finger on the phone screen – they do not have a mouse that they can move very precisely around the screen to click on links. Therefore, they will usually need websites to display bigger links and buttons and text that is large enough to read comfortably without having to move around the screen constantly. That is why mobile friendly websites use a single column layout that scrolls only vertically, with large menu items.

Many modern web authoring tools will offer responsive layouts as standard. When commissioning any new website work, you should ensure that it will be fully responsive to different screen sizes.

9. Keep it short

With today’s wide screens and websites that display text responsively at different widths on different devices, lines of text on websites can end up running very long. Long lines of text can prove difficult to read, as users find it difficult to move from the end of one line to find the beginning of the next. For optimum readability, you should aim to have a line length of between 50 and 75 characters (including spaces).

Justifying text to both left and right margins can also make it harder for users to find where they are in text. This can prove problematic for dyslexic users for whom the different spacing between words caused by fully justified text can cause unwanted visual effects that disrupt their reading. As a result, it is usually best simply to justify text to the left.

10. Caption Audio and Video

Within this short guide, we have placed a lot of emphasis on the needs of users with visual impairments. However, we also need to consider deaf and hearing-impaired users, and these users will have particular requirements when it comes to multi-media content – particularly audio and video.

If we are using audio on our website, we should consider adding a full text transcript of any speech or dialogue from the audio track.

If we are using video, we should consider subtitling any speech or dialogue. YouTube has very user-friendly tools for captioning video.

If time and budget permits, it can also be useful to consider including a signed version of the video. However, remember that British Sign Language (BSL) is not intelligible by users of other types of sign language, and so if you want to reach an international audience, captioning will be more widely accessible. As always – know who your audience is.

Conclusion

Accessibility shouldn’t be a bolt on to your website, and any good web design and development project should consider it from the outset. It is also important to implement accessibility features intelligently. What can help some users can also hinder others, so often accessibility is about finding a successful compromise for the widest possible range of users.

For more information on web accessibility, including accessibility standards, visit the World Wide Web Consortium.

Marcus J Wilson
A shorter version of this article was first featured on the ETAG website.