10 Tips for Creating Accessible Resources

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.

Image of families with wheelchair users at sunset

#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 & PropertiesNow 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 🙂 )

#7 Images

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 FileInspect 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!