What is web accessibility?
According to The World Wide Web Consortium (W3C), who are an international community that develops open standards to ensure the long-term growth of the Web, and who also define the standards for making websites more accessible, “Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them”
The number of people with “disabilities” includes many more people than you may think it does. It also includes people with more minor impairments such as hearing loss or colour blindness, or even just large fingers, and it includes people who have temporary problems such as a broken arm.
If you’d like to know more about web accessibility and why it is important, have a look at my other blog post on the subject:
Or check out the W3C page on accessibility for a much more detailed look.
How can you make your website more accessible?
Web accessibility is a huge subject and some of the changes you need to make can seem off-puttingly complex, but remember that you don’t need perfection, you need to improve (or you probably need to improve if you’re reading this article!).
I’ve gathered together ten things that you can do to achieve this, and all of them need little or no technical know-how.
1. Make use of ‘alt txt’
This is an extra behind-the-scenes piece of information that’s attached to images on a web page. It means ‘alternative text’ and isn’t usually visible to the naked eye, but it’s critical for visually impaired people who use screen readers to find their way around the web page. For example, you may have inserted an image onto the page about, say, a trip to Sri Lanka, and when anyone clicks on that image it takes them to the page to book a holiday to Sri Lanka. But without the alt text his is effectively invisible to anyone reliant on a screen reader, so your alt text would say something like ‘click on this image of a sun-soaked beach in Sri Lanka to book your next holiday’.
How you would add alt text depends very much on how your website has been built, so you may have to do a little bit of research to find out how, but if you use WordPress, have a look at this little video I did to show you how.
2. Choose your colours with care
When you’re choosing the colours to use on your website, think about these three things
- Contrast. Is the difference between the foreground and background colours large enough to make the text readable?
- Colour blindness. Have you chosen a set of colours that people with different types of colour blindness find hard to differentiate? If you don’t know what various colours look like to people with this condition, have a look at the RNIB website to see some examples. It’s really difficult to choose a set of colours that will look clear to all different types of colour blindness, so the easiest way to make sure that your site is still usable is to make sure that important messages on your site are highlighted by a symbol as well as a colour –
- Confusion and comprehension. There are all sorts of mental health problems which can cause people to be easily confused, so when you’re picking your colours make sure that your colours have a purpose. For example, you may want to always highlight key information in green, or make calls to action red (click here to talk to me about accessibility for your website).
This text is hard to read
This text is much easier to read
But always keep in mind too that a lot of colours can make your site confusing. Check out this site for an example on now NOT to design the colours in your site – https://www.lingscars.com/
3. Get the spacing between elements on your page right
Make sure that any clickable items aren’t too close together so that anyone with a tremor (or large fingers) can easily click the correct link. If you’re not sure how far apart they should be, the Google mobile friendly test will tell you if they’re too close together.
4. Check that your site can be used on a variety of devices with a variety of screen sizes
Again, this is really easy to check – all you have to do is go to Google and search for ‘google mobile friendly test’, or go directly to https://search.google.com/test/mobile-friendly. That will give you a box where you put a link to your website and then you just click ‘RUN TEST’ and wait for the result.
If you fail this test, please feel free to get in touch and we can talk about how best to fix it – it might be a two minute job, it might be a total rebuild, or anything in between.
5. Think carefully when choosing fonts and font size
Stick to fonts which are easy to read. The ones to avoid are fancy fonts, such as scripts or handwriting fonts, or ones which are too thin, too fat, or too small. See what a difference it makes when you try to read this paragraph, which is a definition of web accessibility courtesy of Wikipedia:
6. Provide transcripts for videos and audios
If you use videos on your website, remember that it’s not only the visually impaired who may use your site, but people with hearing problems too. Transcripts immediately solve this problem, plus they’re great for your SEO since they also make all those lovely keywords available to Google.
7. Use Headers to Structure Your Content Correctly
Headers are another great tool which aren’t just about accessibility but which help everyone to use your site. Headers are all about making your site easy to read and to navigate: think of them a bit like a table of contents, so if you have them well formatted it should be easy for people (and screen readers) to skim the site and target the information the visitor needs.
When you’re adding content to your website you can use up to 6 types of header, which are notated in html as h1, h2, h3, h4, h5 and h6. How you access these depends on how your website is built, but if you’re using WordPress then you’ll find them in the page (or post) editor in the dropdown box beside all the formatting tools.
H1 should only be used once per page, and should only be used for the page title. H2 is used for section titles, and the rest are used for lower level sub section titles, like this:
H2 Section title
H3 Sub section title
H4 sub section title
H5 sub section title
H6 sub section title
H2 section title
H3 sub section title
H2 section title
H3 sub section title
H4 sub section title
H3 sub section title
and so on. However you decide to use headers, just make sure that you keep them consistent throughout your site.
8. Design Your Forms for Accessibility
When you add a form to your site, no matter how simple it is, remember to add labels to the fields so that screen readers know which field is used for what, and make it clear which fields are mandatory and which are not. It doesn’t matter whether the labels are above, below or inside the form fields, as long as they’re there.
9. Avoid Automatic Media and Navigation
This refers to things like videos that start playing as soon as the page loads, or to sliders or carousels.
Autoplay videos are an issue for the visually impaired because it can be so difficult for them to find out how to stop them playing, but they are also an issue for just about everyone. Imagine yourself in the quiet carriage of a train and you’ve forgotten to turn off the volume on your phone. You’re surfing round the internet killing a bit of time and you happen upon a page where the video immediately plays and starts blasting out heavy rock without so much as a by-your-leave!
Sliders and carousels cause problems because, unless they’re set to move very very slowly, it can take time for the screen reader to work out what the image is about, read out any text, and then for the visually impaired visitor decide if he wants to take action on that slide.
10. Use Descriptive Link Text
Link text is the text that you click to take you to a different place. It’s often underlined or a different colour to the main text. Once again, the issue is with screen readers. The screen reader will read the text aloud as the site visitor steps through the links on the page. So if you have links in your page which say things like:
“For more information, click here.”
“To see our portfolio click here.”
“To book a holiday, click here.”
you can see how all the screen reader user would get would be a series of links saying ‘here’ which wouldn’t be at all helpful. There are no hard-and-fast rules about writing descriptive links, just keep your site visitor in mind and think what would be best for them. You could, for example, change the above to:
“Click here to book a holiday.”