{"id":733,"date":"2019-01-14T16:33:49","date_gmt":"2019-01-14T16:33:49","guid":{"rendered":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/?p=733"},"modified":"2019-07-16T14:45:51","modified_gmt":"2019-07-16T14:45:51","slug":"10-tips-for-creating-accessible-resources","status":"publish","type":"post","link":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/posts\/733","title":{"rendered":"10 Tips for Creating Accessible Resources"},"content":{"rendered":"

Accessible resources allow everyone (including people with disabilities) to access the digital content we create.\u00a0 The current accessibility guidelines is WCAG 2.1<\/a> which has three levels A, AA and AAA – the golden standard of accessibility.<\/p>\n

I was talking to my colleague Asma about accessibility and we thought that the following\u00a0 10\u00a0accessibility tips would be useful to keep in mind when creating content.<\/p>\n

\"Image<\/a><\/p>\n

#1 Alternative Text for Images<\/h2>\n

Screen-reader users listen to what is there on the screen<\/a>\u00a0read 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.\u00a0 In Microsoft Office Products such as Word\u00a0 and PowerPoint you can include alternative text for an image by right clicking on the image and selecting\u00a0 Edit Alt Text…<\/strong><\/em> or under Format Picture…<\/strong> <\/em>> Layout &<\/strong> Properties<\/strong>.\u00a0<\/em>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.<\/p>\n

However,\u00a0 describing images in\u00a0 alternative text can be difficult if the image is complex. If this is the case, the image can be described in text.<\/p>\n

#2 Use Heading Styles<\/h2>\n

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.<\/p>\n

#3 Meaningful Captions<\/h2>\n

Using meaningful captions for images and tables help the readers.\u00a0 If a table shows\u00a0 the marks obtained by students for each subject for semester 1, it is more meaningful to say\u00a0 “Mark Sheet –\u00a0Semester 1” rather than\u00a0 just saying “Table 2”.<\/p>\n

#4 Creating Tables\u00a0 Using Software Tools<\/h2>\n

When\u00a0 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\u00a0 to create your tables.<\/p>\n

#5 Descriptive and Meaningful URL Links<\/h2>\n

We have seen plenty of “Click here” links. But it is much more accessible if you provide the context to the\u00a0 URL you are referring to in the link itself. So instead of saying\u00a0 “More information on WCAG 2.1 click here<\/a>”\u00a0 I can say “More information on WCAG 2.1<\/a>” 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.<\/p>\n

#6 Good Contrast<\/h2>\n

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,\u00a0 having sufficient colour contrast and not putting text over complex backgrounds are very basic things to make a resource accessible.\u00a0 You can check colour contrast of your choice of colours\u00a0 using this Web AIM Colour Contrast Checker<\/a> (see I have used a link URL with context \ud83d\ude42 )<\/p>\n

#7 Images<\/h2>\n

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” \ud83d\ude42<\/p>\n

#8 Transcripts and\/or Captions for Audio\/Video<\/h2>\n

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.<\/p>\n

#9 Avoiding Differentiation only on Colour<\/h2>\n

There are many people with colour blindness<\/a>\u00a0(about 8% of men and 0.5% of women). There are three main kinds\u00a0 of colour blindness<\/a>: 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.<\/p>\n

#10\u00a0 Checking for accessibility<\/h2>\n

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.\u00a0 I have already mentioned about the\u00a0 Web AIM Colour Contrast Checker<\/a>.\u00a0 There is also\u00a0 WAVE Website Accessibility Checker<\/a>\u00a0 where you can check a web page’s accessibility.\u00a0 In Microsoft Office Products you can check accessibility by File<\/strong><\/em> >\u00a0 Inspect Document (Check for Issues)<\/strong> <\/em>> Check Accessibility.\u00a0<\/strong><\/em> It is always a good idea to check accessibility issues in any document\/resource you have\u00a0 created.<\/p>\n

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<\/a>\u00a0 the screen-reader extension to Chrome.\u00a0 If you are using Windows you can try Windows Narrator<\/a>\u00a0. Good luck!<\/p>\n","protected":false},"excerpt":{"rendered":"

Accessible resources allow everyone (including people with disabilities) to access the digital content we create.\u00a0 The current accessibility guidelines is WCAG 2.1 which has three…<\/p>\n","protected":false},"author":10,"featured_media":734,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[69],"_links":{"self":[{"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/posts\/733"}],"collection":[{"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/comments?post=733"}],"version-history":[{"count":11,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/posts\/733\/revisions"}],"predecessor-version":[{"id":804,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/posts\/733\/revisions\/804"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/media\/734"}],"wp:attachment":[{"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/media?parent=733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/categories?post=733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/tags?post=733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}