Practical guide to creating accessible resources

Introduction

Elsewhere on the LSE website there is guidance on ensuring online teaching is accessible that explains the importance of making your course materials accessible to all, and what steps you need to take to achieve that.

This page explains how to take those steps in practice.

How do I … ?

Use headings and subheadings

How you do this depends on the source of your text. In general, your text will be most accessible in the form of HTML, less so in Word and PowerPoint documents and PDFs produced from them, and even less so in PDFs produced from LaTeX.

Remember:

• Always respect the hierarchy of headings - start with "Heading 3" for the main title, then "Heading 2" for the next level down, and so on.

• Avoid creating "false headings" by changing the size or weight of the text - when you do this, assistive technologies are unable to navigate the document properly.

In HTML

As in Word, the Moodle text editor ("HTML editor") has a paragraph styles that allow you to create headings.

You can highlight a text and you will be given the option to change the style to a heading (H3, H4, H5, H6).

Moodle HTML editor toolbar

You can also change the style going to Format > Paragraph styles and selecting the relevant heading style.

 

In Word & PDF

You can apply headings consistently in Word using the Styles menu, located on the Home tab.

Word 365 for Windows ribbon

Word 365 for Mac ribbon

You can click anywhere within the line of text that you want to turn into a heading, and choose the heading style you want from the Styles menu.
Remember:

• Always respect the hierarchy of headings - start with Heading 1 for the main title, then Heading 2 for the next level down, and so on.

• Avoid creating "false headings" by changing the size or weight of the text - when you do this, assistive technologies are unable to navigate the document properly.

• If you need to change the way the headings look, you can edit them (see Customise or create new styles), or choose a whole new "style set" (you'll find these on the Design tab in Word).

When you convert Word to PDF, all the heading information is carried over, so you don't need to do anything additional to the resulting PDF document.

In PowerPoint & PDF

The easiest way to make sure you are using appropriate headings in PowerPoint is to use slide layouts. In fact, you are almost certainly already using slide layouts: either the default ones, or those that come with a specific template. In general, your headings will be set up correctly if you stick to these layouts. However, problems may arise if you choose to edit these slide layouts.

This guide from WebAIM, PowerPoint Accessibility: Slide layouts, gives a simple explanation of how to set up your slides correctly.

In Latex & PDF

Unfortunately, it is very difficult to produce accessible PDFs from a LaTeX source. Some accessibility-related packages do exist, but they are very limited in what they can achieve, and in our testing we have been unable to create PDFs that meet the minimum accessibility requirements.

The workaround for this is to convert LaTeX content into HTML, which can then be uploaded to Moodle. Either of the following applications are suitable for carrying out this conversion:

• tex4ht

• pandoc

Both are free to download, and both are command-line applications, which means they are for the slightly more technically-savvy user; but if you use LaTeX, then that may well describe you! Both tools will convert TeX to HTML5, with an option to convert mathematical notation to MathML - this will improve accessibility further, giving users with visual impairments alternative ways to access the mathematical notation.

Use alt-text for images

The aim of alt-text is to provide an alternative for those who cannot see the image. It need only describe the most important features that the image is intended to communicate. When an image is purely decorative, it does not need alt-text.

For example,

A suitable alt-text might be:
'Plot of price vs. quantity, showing supply and demand curves crossing at the market price, E. A price floor is set at a level F, which is greater than E. At the price floor, supply exceeds demand, causing a surplus.'

This communicates the key points of the diagram (I hope - I'm not an economist). Note that it assumes a certain level of prior knowledge that might be expected of the intended audience.

Conversely, there should be no need for this level of detail:
'Black lines form a right angle, with "Price" and "Quantity" written alongside each one. A blue line slopes up from left to right while a red line slopes down from left to right, and they meet at point E. A green dotted line labelled F runs horizontally across the upper part of the diagram etc. etc.'

The way you add alt-text depends on the application you are using:

Moodle HTML editor

Moodle makes it very simple. When you add an image using the HTML editor, you'll see the following window:

Moodle does not let you save the image until you either provide the alt-text (in the "How would you describe this image to someone who can’t see it" box) or else tick the "This image is decorative only" box to indicate that the image is purely decorative.

Word & PowerPoint

When you add a picture to a Word or PowerPoint document, you may find that the application automatically creates the alt-text for you, using machine learning to generate a description for the picture.

If it does not do this, or if you want to change the text, you can right-click on the picture, and choose "Edit Alt Text…" from the menu. This will give you a box where you can add the text. There is also a "Mark as decorative" checkbox for images that do not require alt-text.

LaTeX

Unfortunately, it is very difficult to produce accessible PDFs from a LaTeX source. Some accessibility-related packages do exist, but they are very limited in what they can achieve, and in our testing we have been unable to create PDFs that meet the minimum accessibility requirements.

As it stands, we have not identified a reliable way to add alt-text to images within LaTeX, even when that LaTeX is converted to HTML. Unfortunately, the only solution we can offer at the present time is to edit the HTML after conversion, and manually add the alt-text to the HTML.

These instructions will be updated when a better solution is identified.

Use text boxes over images

The following images show an example of the problem of laying text over an image. The text here is not easy to read, even for a reader with no visual or learning difficulties. Even changing the text colour will not help, as the underlying image is a mixture of colours and shades.

The next image shows a simple fix for this problem. By changing the background colour of the text fields to a pale, semi-transparent shade, the text stands out without completely obscuring the image.

You can achieve this effect in Word or PowerPoint as follows:

1. Move the mouse over the text, right-click, and choose "Format shape…". The Format Shape panel will open on the right.

2. Make sure the "Shape options" tab is selected, then click the paint bucket button:

   Open

   

3. Choose "Solid fill", then colour white (or black, if your text is light-coloured). Then set the transparency to 50%.