Online accessibility guidanceThis guide is an introduction to creating accessible online materials.

Content Use headings to structure your page – make use of built-in heading styles

(Heading 1, Heading 2, etc.). [How to use heading styles]

Write titles that accurately reflect the content of the page.

Break content into short blocks and make vital information clear.

Layout Use left aligned text, not justified as this spaces out characters.

Use good colour contrasts and a readable font.

Don’t underline words (unless they are hyperlinks), and avoid using all capitals or italics.

Don’t put text over images or patterned backgrounds.

Avoid using only visual characteristics to communicate information (e.g., click the red image on the left).

Don’t used scanned PDFs as these cannot be read by screen readers.

Tables Make sure all tables have column headings. [How to create table column headings]

Make sure tables are only used for tabular data, not for layout.

Do not merge or split cells, or embed tables within tables/cells.

Links Write descriptive link text – for example ‘Contact us’. Do not use ‘click here’ or the page URL.

Make sure there are no links on a page with the same text that go to a different location.

Images Add alternative (alt) text to all images and visual content, which conveys the full meaning

of the image. [How to add alt text]

When using graphs or diagrams always include accompanying text to explain the meaning.

Video and audio Provide a text alternative for audio and video content, for example captions or a transcript.

[How to provide a text alternative]

Using Heading Styles

lli@le.ac.uk | @uniofleicslli | www.le.ac.uk/lli

Using headings to structure your pages makes the material easier for everyone to read and understand. It is particularly important for visually impaired people who use a screen readers, as they can skip through the headings to find what they need, rather than having to go through the entire page. For screen readers to be able to detect headings, you need to use built-in heading styles rather than just changing the font and colour of text.

Make sure you use headings in a logical, hierarchical way; for example use heading 2 for sub-sections of heading 1, don’t jump straight to heading 3.

Microsoft Word heading stylesAs well as enabling screen reader users to navigate through your documents, using Microsoft Word heading styles has the added benefit that you can change the font and colour of all your headings by simply altering the style. They can also be used to create an automatic table of contents and you can navigate through the document quickly using the Navigation Pane.

See Microsoft’s help page for instructions on how to use heading styles: Microsoft Word heading styles.

PowerPoint titlesWhen creating a PowerPoint presentation, use the University’s PowerPoint templates and choose from the accessibility layouts when adding a new slide. Make sure you put a title in the title box provided.

Sept 2019 v 1

Sept 2019 v 1

Sept 2019 v 1

BlackboardWhen adding text to a Blackboard item, select heading styles to structure your content. To do this:

1. Click in the heading and choose Heading from the Format drop-down list:

2. For sub-sections, choose Sub Heading 1 for the first level and Sub Heading 2 for the second level.

SitecoreWhen adding text using the Rich Text Editor (RTE) in Sitecore, select heading styles from the ‘Paragraph Style’ dropdown. To do this:

1. Within the Rich Text Editor, click in the Paragraph Style box.2. Select the appropriate heading.

Never use ‘Heading 1’ this is the heading used for the page title and can only be used once.

Sept 2019 v 1

Your first sub-heading will be ‘Heading 2’, if you need another heading underneath, select ‘Heading 3’ and so on. If you then have a new piece of text at the same level of ‘heading 2’ use ‘Heading 2’ again.

Table column headings

Microsoft WordWhen adding a table in Word, click on the Table Tools Design ribbon and tick to show that the table has a Header Row.

If the table may span more than one page, choose the option to repeat the header row on each page:

1. Right-click on the table and choose Table Properties.

2. Click the Row tab.

3. Select Repeat as header row at the top of each page.

PowerPointWhen adding a table in PowerPoint, click on the Table Tools Design ribbon and tick to show that the table has a Header Row.

Sept 2019 v 1

Sept 2019 v 1

BlackboardTo add column headings to a Blackboard table:

1. Click in a cell in the row that contains the headings.2. Click Table Row Properties:

3. Set the Row Type to Header:

4. Click Update.

SitecoreTo add column headings to a table in Sitecore using the Rich Text Editor (RTE) follow these steps:

1. Right-click on the table to open the context menu.2. Click Table Properties to open the Table Wizard.3. Click the Accessibility tab.4. Type 1 into the Heading rows field.

5. Click OK to close the Table Wizard

This will make the cells in the first (top) row of the table into heading cells.

Add alternative text to imagesYou need to add alternative (alt) text for all images and visual content to convey information about the image. If you do not add alt text then visually impaired readers may miss out on

lli@le.ac.uk | @uniofleicslli | www.le.ac.uk/lli 8

important information. When someone uses a screen reader to read documents, the alt text will be read out to them. Without alt text, they will know there is a picture there but will have no information about what the picture shows.

You should add alt text for all images; if the image is purely decorative then just put a space so that screen readers will ignore the image. Alt text should be a short phrase or sentence describing the contents of the image. For more information see AbilityNet’s Five golden rules for compliant alt text.

Word and PowerPointThe method for adding alt text to images is essentially the same in Word and PowerPoint:

1. Right-click on the image and choose Format Picture….2. In the right-hand pane, click on the Layout and Properties tab

3. In the Alt Text section, add a short description that conveys the essential information in a concise way. You do not need to say ‘picture of’ or ‘image of’ as this is added by the screen reader. If the image is purely decorative, add in empty alt text by typing “” in the Description box

Blackboard1. Edit the item that contains the image.2. Right-click on the image and choose Image.3. In the Image Description box, enter a concise description of the image conveying the

main points.

4. Click Update to save.

lli@le.ac.uk | @uniofleicslli | www.le.ac.uk/lli 9

SitecoreTo add alt text to an image in Sitecore, follow these steps:

1. Open the Media Library.2. Opening folders: Media Library > UoL > images.3. Scroll through to locate the image to add alt text to.4. Click Lock and Edit.5. Add your alt text in the ‘Alt’ field. A red vertical line denotes a mandatory field.6. Click on the disc icon, top left of the ribbon, to save changes made.

Provide a text alternative for audio and video content

BlackboardWhen adding an audio file to Blackboard using the Build Content > Audio option, you can include a transcript to provide a text alternative for people who cannot hear the audio.

If you are adding a video file using the Build Content > Video option, you can add a transcript as a separate item in the same folder.

For Reflect recordings, Panopto has the option to provide automatic captions. However the quality of these is variable and you will need to edit them. It would not be feasible to add captions for recorded lectures, but you could add them if you are making short recordings for other purposes.

lli@le.ac.uk | @uniofleicslli | www.le.ac.uk/lli 10

To add automatic captions to a Panopto recording:

1. Open the recording for editing.

2. Click Captions on the top left, then choose Import captions > Import automatic captions.

To edit the captions:

1. Move your mouse over a caption and click the three vertical dots. Choose the Edit option.

2. Correct the caption text then click Save.3. When you have finished, click Apply on the top right to implement your changes.

SitecoreTo add alt text to audio or video files follow these steps:

1. Open the Media Library.2. Opening folders: Media Library > UoL > Video.3. Scroll through to locate the video to add alt text to.4. Click Lock and Edit.5. Add your alt text in the ‘Alt’ field. A red vertical line denotes a mandatory field.6. Click on the disc icon, top left of the ribbon, to save changes made.

lli@le.ac.uk | @uniofleicslli | www.le.ac.uk/lli 11

lli@le.ac.uk | @uniofleicslli | www.le.ac.uk/lli 12