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 – https://jackdawwebdesign.co.uk/what-is-web-accessibility-and-why-is-it-important/
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’.
One thing to note is that not all alt text should be the same. You can see detailed guidelines on writing alt text at the W3C alt decision tree, but briefly they are:
- for a descriptive image which adds to enjoyment of the page, describe the image
- for an infographic, use the alt text to explain what the infographic says
- for graphics which are purely decorative, leave the alt text empty
- for graphics used as a link to another site page say where the link is going to (but don’t start with ‘leads to’ or ‘click here for’ because the screen reader will add that for you)
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? If you’re unsure, get the hex codes of your colours and run them through the WebAIM colour contrast checker.
- 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).
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, and make them at least 14px. 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:“Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed. When sites are correctly designed, developed and edited, generally all users have equal access to information and functionality.”
6. Provide subtitles and/or 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.
If you’re worried about how long it will take to write subtitles or transcripts you can get some great tools to do it for you. They’re not perfect and have an annoying habit of adding all the ums and ahs, but they’re a great starting point and make the job much quicker. There are loads around, but SubtitleBee is my current favourite, especially as it has a free, if somewhat limited, plan.
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.”