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.”
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.
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.
4. Access All Areas
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.
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.
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 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, and so on. This will allow users of Screen readers to jump from one Heading 3 article directly to the next Heading 3 article, for example.
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 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.
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 be 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).
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.
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
Pooka web development
For a PDF version of this document – click here Top Ten Tips for an Accessible Website