Learning materials must be accessible to those using screen readers and other assistive technologies. This means graphics must have alternative text, navigation must be planned, fonts should be easy to read, and contrast and colour should be used with care. Follow the simple rules below to ensure you meet these requirements.

What is accessibility?

"Accessibility is all about the ability to access. In other words, how easy is it for people with different needs to access your services or materials?" (JISC TechDis, 2014). This includes, but is not limited to, people with disabilities.

Why should I make my learning materials accessible?

Making accessible content is not difficult and benefits everyone. It is also a legal requirement that reasonable measures are taken to provide accessible content in anticipation to those with disabilities (JISC TechDis). By following the rules below you can start making reasonable adjustments to the teaching and learning materials you provide to students before a specific need arises.

4-8% of school children have dyslexia (NHS 2012) and it can affect their ability to read and understand text (British Dyslexia Foundation).
4.5% of the UK population, including 8% of all UK men, have some form of colour blindness (Colour Blind Awareness).

What is recommended practice at UCL?

UCL provides guidance for the development of accessible learning materials via the E-Learning Baseline. The following recommendations explains in further detail how to make teaching resources accessible. Following these straightforward recommendations when developing your content will ensure that the majority of your students (including those with disabilities) can reach and understand your materials:

Note: The majority of these recommendations are to keep in mind while creating content, rather than requiring additional work post-hoc.

* Make your lecture materials available 48 hours in advance

Provide course materials in advance (including reading lists and lecture notes), so students can prepare for teaching sessions.

1. Ensure high text colour contrast

Have you ever tried to read yellow text on a white background from the back of a lecture theatre, or in a room where there is a lot of light on the screen? It is very difficult to read. By making sure you use colours for your text that have a high contrast to the background it will be easier to read from a distance and also helps those with visual impairments.

High contrasting text will also print more clearly, especially when printed in black and white.
If using colour to emphasise something, you need to also emphasise it in another way as well, so those who are colour blind are not disadvantaged.
Use this accessible colour picker tool to find colours that are accessible: http://snook.ca/technical/colour_contrast/colour.html (avoid NO in the results boxes for WCAG 2 AA compliance).
- This will tell you whether the colours contrast enough to be seen by both those with good vision and those who have certain common visual impairments (like colour blindness). The tool works by colour picking the background RGB colour code (e.g. #FFFFFF is white) and the foreground colour and inputting these in the appropriate fields for the website to check the contrast is high enough. If any No’s appear in the results boxes you need to change the background or foreground colours accordingly to ensure the text is readable.
- You will notice when you select a colour in Moodle that an RGB colour code is displayed in the colour picker (e.g. white is #FFFFFF). This describes the colour for the web browser to render and is what you need to enter into the colour checker.

2. Use legible font sizes and styles.

Websites

Paragraph text should be 16px, which is medium in the Moodle text editor (W3C 2010, Tennant 2011).
Font sizes should never be smaller than 10px (extra small in the Moodle text editor) for screen or print - this might be suitable for copyright information (W3C 2010).
Use a browser extension to see what font sizes are being used on Moodle or other websites:

PowerPoints and projected materials

Absolute minimum 18 point text size for presenting in small (< 50 seat) lecture theatres (Microsoft 2017).
Minimum 28 points for text projected in large (50+ seat) lecture theatres (Holzl in Apperson, Laws & Scepansky, 2006).
When projecting Moodle, or a website, you can zoom in to make the font size larger. Use the browser menu or these keyboard shortcuts on Windows:
- Ctrl+plus key to zoom in.
- Ctrl+minus to zoom out.
- Ctrl+0 to reset the page to the default size.

General advice

Use sans-serif, cross-platform compatible fonts (W3Schools):
- E.g. Arial, Helvetica, Verdana or Tahoma

Avoid fully-justified text (which aligns to both the left and right edges), as it creates rivers of white space and slows reading.
Avoid italicised text - it is more difficult to read on a screen.
Avoid CAPITALISED text - IT IS MORE DIFFICULT TO READ.
Use bold text for emphasis.
Only use underlines for links.

3. Check your files are accessible.

As well as adhering to the above rules, you should make sure you are providing files that are accessible to students.

Accessible PDFs

If your document is a PDF, make sure that the content can be read by screen readers and is appropriately tagged e.g. as a heading, image, table, etc.

Depending on the method you use, saving a document as PDF sometimes converts text to images. An easy way to determine whether the text in a PDF is still text, is to select, copy and paste the text from the PDF into a text editor like Notepad or Word. If you can't do this, it is likely the PDF conversion process has changed the text into an image, which is not accessible to screen readers. Saving documents directly from Microsoft Word, rather than printing to PDF, should create accessible PDFs for you.

With sufficient care, PDFs can be read by a range of technologies and on different devices, such as smart phones, tablets and computers.

The UK Government has guidance on creating accessible PDFs.
We offer guidance to help you choose a format for your document.

Accessibile Microsoft Office documents

You can check PowerPoint, Word and Excel files for accessibility issues using the inbuilt Accessibility Checker. This tool then explains why it's important and how to fix each issue.

Accessible video files

Make sure that the videos that you provide on Moodle / in class are accessible. This could be done in a number of ways:

Existing videos:

For videos that are already online and not your own, subtitles are often available already. Check to see if this is the case. (E.g. in YouTube, hover at the bottom of the video window and tick the Subtitles/closed caption button if there is one.) If you see subtitles, check them. These are sometimes done automatically and some of the text may be inaccurate, however, accuracy is improving all the time.
If there are no subtitles already, or if the automatic subtitles are poor quality, contact the owner and let them know about this problem. You could also suggest one of the solutions to them below.

Videos you have created:

Upload video transcripts or notes (where these already exist):
- Often when you produce videos you will write a script, or notes to outline what you will cover. These can be very useful for students, especially those with disabilities. If you have this text it is good practice to upload a copy alongside your video. This may be in Moodle, or within YouTube or Vimeo.
Create subtitles:
- A best practice guide on subtitling at UCL (2018) has been authored by Neil Roberts from the UCL Ear Institute.
Add visual descriptions
- Visual, or audio descriptions are narration that describes actions on the screen, usually between pauses in dialogue, or sometimes during dialogue, if necessary. Here's how to add audio description to YouTube videos.

Subtitling/transcript provision has also been shown to benefit students with English as an additional language or who have specific learning difficulties. Also consider how video is generally watched online these days, especially on mobile devices: videos overwhelmingly are subtitled. Students expect this and are more likely to watch your video if it has subtitles, because they’ll be able to watch it anywhere, whether or not they have headphones. The bottom line is: subtitling benefits everyone.

Accessible audio files (e.g. podcasts)

A written transcript should be available for any audio resources you share with your students.

Existing audio:

Many podcasts do offer transcripts already – check. If not, ask the owner if they can.

Audio you have created:

If you are providing your own audio file, there are many easy ways to create a transcript from this: e.g. Go-Transcribe, Voicebase, or here is a list of other transcription software including some that are free.

4. Provide accessible PowerPoint slides prior to lectures and alongside screen recordings.

Students who have a visual impairment can have the PowerPoint slides read aloud to them using screen-reading software.
- Use headings, so students can use them to navigate.
- Use standard slide layouts and check order of information in outline view to ensure accessibility for those reading slides using screen readers.
- Ensure writing is in a dark font and that the background is light enough to provide clear contrast. A cream background is often more accessible than pure white. Avoid backgrounds which are overly 'fussy'.
- Use a sans serif typeface (Arial is best) of font size 24 or above (45 bold for titles).
- Bullet points assist in making slides easier to follow.
- End all sentences and list items with a full stop or semicolon; otherwise screen reading software may not pause between each point.
- Avoid adding text boxes.
- Do not use colour as the only indicator of meaning, such as priority items shown in red.
- Avoid animations and sounds if not crucial to content of presentation. Animations may cause screen readers to read the slide twice.
Avoid using Prezi, as it is not compatible with screen reading software.
Preliminary research shows that there is no difference to knowledge retention when slides are provided before the lecture (British Psychological Society, 2010), however students may prefer to print a copy in notes format that they can then bring to class and write alongside each slide.

5. Open links in the same window (unless they are to help fill in a form).

A recent study at UCL has found that some students find links opening in new windows annoying.

It is also an accessibility issue as everyone, (but especially those with visual impairments and inexperienced web users), sometimes rely on using the back button.

Students who want links to open in new windows can right-click or Ctrl+click to do this, but blind and non-technical people are less likely to know how to open the link in the same window.

The only time you should open links in a new window is:

When you have warned the person this is about to happen; and
If the link is taking the person to a page to help them fill in a form - opening in the same window would mean they are taken away from the form they are attempting to complete, potentially losing the information they have input.

This article makes a good case for opening links in the same window, with reference to usability expert Jakob Nielson's research: https://managewp.com/should-you-open-links-in-new-windows.

6. Don't use "Click here", but describe where the link leads.

When linking text, don't use 'Click here', instead describe what will happen when someone clicks on the link (W3C 2016):

E.g. 'Subscribe to the UCL e-learning newsletter'.

Therefore, when it is read out loud with a screen reader a visually impaired person knows where the link will take them. Often, a blind user will navigate a page using the headings and links, so understanding the link's purpose without having the refer to the surrounding text is useful. This helps everyone understand what the link is for and can help people who are scanning text quickly to more easily identify a link they wish to access.

7. Provide concise image descriptions.

People who have a visual impairment using a screen reader to view a web page or a document (such as PowerPoint) will have image descriptions read to them in lieu of seeing the image. Make sure you describe your images concisely and accurately.
Rewrite any text that appears in an image.
The UCL Accessibility website contains a video demonstrating how a blind person would listen to a website with ALT image tags.
However, if using the image in a quiz, be careful not to give away the answer in the image description.

8: End every bullet point with a full stop, or semi-colon.

Some screen-readers will only pause when they encounter a full-stop, question mark or semi-colon. Therefore, if you don't add these to the end of each bullet point, visually impaired students may hear each point read out in quick succession, without any pause indicating the end of each point.

9. Ensure that color is not the only means of conveying information.

4.5% of the UK population are colour blind (Colour Blind Awareness). If you use colour to help people understand something (e.g. green to indiciate something is correct), you also need to provide another way for people who are colour-blind to understand this distinction.

E.g. using a green tick allows everyone to see something is correct.

10. Use headings in the correct order.

People using screen readers rely on headings to navigate web pages. If you jump from a heading 2 (the name of your Moodle course for example) to a heading 1, or a heading 4 in the content, those using screen readers will not understand the correct heirachy of the page.

In the (default) Atto text editor that means using the large, medium, small headings in the correct order, starting with large. If you are using TinyMCE text editor you need to use headings 3-5 and avoid levels 1-2, which are already used for the page and section titles.

11. Only use tables for tabular data and always use proper table headings.

11a. Tables are for tabular data

Tables should only ever be used to display tabular data. They should not be used to control where items appear on your page. There are other, accessible ways, to lay out elements on your page.

For example, if you need an image to appear alongside some text on a web page, you should change its alignment instead.

11b. Table headings

If you use the default Atto editor in Moodle, you can specify whether the table headings are at the top of the columns, in the first row, or both. If you need to check this you can click on the table and then click the table icon and choose Edit table from the drop down list. Your headings will also appear in bold automatically within the table to help distinguish them from the data.

12. Check external tools for accessibility.

If you use any external digital tools you should check them for usability and accessibility using www.web2access.org.uk.

How accessible is the online tool you want to use? Use this JISC TechDis endorsed tool to check online tools you wish to use with students. For example, find out:
- Why is Prezi not considered an accessible presentation tool?
- How accessible is Moodle?

Enhanced E-Learning

As well as demonstrating to your students good accessibility practice by providing them with accessible learning materials, you may also like to teach them how to consider accessibility when creating their own documents.

Students learn about accessibility and how they can create documents, presentations and other work that adheres to accessibility guidelines.
This could be done in several ways:

Provide links to accessibility guidance (such as this wiki page) in your Moodle course
Highlight and provide feedback when you see a student has broken one of the 6 accessibility rules in the E-Learning Baseline (above).

Students receive a small percentage of marks (e.g. 5%) for adhering to accessibility guidelines. For example, accessibility grading criteria for a PowerPoint presentation may require the work produced to adhere to the relevant rules in the list of 6 accessibility rules in the E-Learning Baseline (above) - rule 5 is probably irrelevant in this case.

Frequently Asked Questions

Q. None of my students are disabled. Do I still have to make my web pages 'Accessible'?

A. Under the Act, there is a responsibility to make anticipatory adjustments. This means that institutions should consider what adjustments future disabled students may need, and make them in advance.

Q. Will my web pages look less attractive?

A. The short answer is "No", you can still apply good design to web pages which are also accessible. Most measures taken will make web pages more accessible will help everyone. It’s similar to using ‘plain English’ techniques – everyone benefits!

Useful resources and tools

These are some useful information on accessibility.

Jisc Getting Started with Accessibility and Inclusion
UCL Accessibility guidelines:
- Experience a screenreader for yourself.
- Making your documents dyslexia friendly.
How accessible is the online tool you want to use? Use this JISC TechDis endorsed accessibility checker.
WAVE is a web browser add-on which renders an accessibility report as visual markers on any given web page, along with commentary in a sidebar.
Evaluera is another accessibility checker yielding a more technical report.
AbilityNet: Standards of Accessibility.
WCAG. Web content accessibility guidelines.
MOOCAP. MOOC accessibility project.
Web2Access. App accessibility ratings.
eAccess+ Document accessibility.
UCL eLearming Baseline.
Built-in Accessibility, by Jisc.
Cambridge Inclusive design toolkit.
Difficulty Simulations.

References

Jisc TechDis (2014) Definitions. Available from: http://www.jisctechdis.ac.uk/techdis/resources/definitions (no longer available). Accessed 22 July 2015.
Tennant, D. B. (2011) 16 Pixels: For Body Copy. Anything Less Is A Costly Mistake. Available from: http://www.smashingmagazine.com/2011/10/16-pixels-body-copy-anything-less-costly-mistake/. Accessed 6 October 2015.
W3C (2010) Quality Assurance Tips: Care With Font Size http://www.w3.org/QA/Tips/font-size. Accessed 6 October 2015.
W3C (2016) Link Purpose (In Context): Understanding SC 2.4.4 https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/navigation-mechanisms-refs.html. Accessed 8 January 2018.
W3Schools (date unknown) CSS Font http://www.w3schools.com/css/css_font.asp. Accessed 6 October 2015.

Save

Save

Save

Save

Save

Browser not supported