Accessible resources allow everyone (including people with disabilities) to access the digital content we create. The current accessibility guidelines is WCAG 2.1 which has three levels A, AA and AAA – the golden standard of accessibility.
I was talking to my colleague Asma about accessibility and we thought that the following 10 accessibility tips would be useful to keep in mind when creating content.
#1 Alternative Text for Images
Screen-reader users listen to what is there on the screen read to them by the screen-reader. Using alternative text for images will make sure that they too get the visual clues conveyed by the image. In Microsoft Office Products such as Word and PowerPoint you can include alternative text for an image by right clicking on the image and selecting Edit Alt Text… or under Format Picture… > Layout & Properties. Now that you know about alternative text whenever you create a document, web page or presentation containing images don’t forget to insert appropriate alternative text for these.
However, describing images in alternative text can be difficult if the image is complex. If this is the case, the image can be described in text.
#2 Use Heading Styles
We all use titles and subtitles in our documents. Have you ever used a larger, bold font rather than using heading styles? If you have, then not using heading styles reduces the accessibility of your documents. When Heading styles are used there is a hierarchy of heading levels which allows screen reader users to quickly navigate the document. Not only that, you can create an automatic table of content too.
#3 Meaningful Captions
Using meaningful captions for images and tables help the readers. If a table shows the marks obtained by students for each subject for semester 1, it is more meaningful to say “Mark Sheet – Semester 1” rather than just saying “Table 2”.
#4 Creating Tables Using Software Tools
When you want to include a table in a presentation do you feel like taking a screenshot and put it in a slide? Well if you do that, the resource you are creating is going to be not very accessible because screen-readers cannot read images and users who are only able to use a keyboard cannot tab through it. Always use the software to create your tables.
#5 Descriptive and Meaningful URL Links
We have seen plenty of “Click here” links. But it is much more accessible if you provide the context to the URL you are referring to in the link itself. So instead of saying “More information on WCAG 2.1 click here” I can say “More information on WCAG 2.1” creating a URL link with context. It is only a small change to make the link context relevant but it makes the resource much more accessible to screen-reader users.
#6 Good Contrast
Have you ever been in a presentation where you could not see the words clearly because the background and foreground contrast was so poor? or the background was so busy you couldn’t make out the text? Well, having sufficient colour contrast and not putting text over complex backgrounds are very basic things to make a resource accessible. You can check colour contrast of your choice of colours using this Web AIM Colour Contrast Checker (see I have used a link URL with context 🙂 )
Whenever possible do not use images of text. Using images of text makes these non-accessible to screen-reader users (unless you put all of it as alternative text). If this cannot be avoided try to use high quality image where even at 200% zoom the letters are legible. But rule of thumb should be “No images of text” 🙂
#8 Transcripts and/or Captions for Audio/Video
Providing transcripts/captions not only help people with hearing impairments. It also helps people working in noisy environments, people with poor internet connectivity, and also people who may speak a language as a second or subsequent language where they may not be able to understand the speaker’s accent.
#9 Avoiding Differentiation only on Colour
There are many people with colour blindness (about 8% of men and 0.5% of women). There are three main kinds of colour blindness: red-green, blue-yellow and complete colour blindness. So if a piece of information is only differentiated by colour, this become an accessibility barrier. Correct answers given in green and incorrect answers are shown in red – this is an example of differentiating by colour. Instead of this, we can say correct answers are marked with a green tick and incorrect answers are marked with a red cross. Here the use of colour along with tick and cross makes the information accessible.
#10 Checking for accessibility
There are many tools that allow you to check your content for accessibility issues. But remember, these are only able to check what it has been programmed to check. I have already mentioned about the Web AIM Colour Contrast Checker. There is also WAVE Website Accessibility Checker where you can check a web page’s accessibility. In Microsoft Office Products you can check accessibility by File > Inspect Document (Check for Issues) > Check Accessibility. It is always a good idea to check accessibility issues in any document/resource you have created.
To understand how screen-reader users navigate documents you can try using a free screen-reader with your eyes closed. Try and see whether you can navigate a document you have created. If you are using Chrome browser you can install ChromeVox the screen-reader extension to Chrome. If you are using Windows you can try Windows Narrator . Good luck!