Digital Accessibility

Structure (use headings and styles)

A structure means adding descriptive headings such as Heading 1, Heading 2 and Heading 3. Adding these creates a map or navigation menu of headings and sub-headings for screen readers to follow. It also allows readers to scan the page for the content they are looking for.

• Break up your document to make it more readable. Use bullet points, numbered steps and subheadings

• When using descriptive section headings should be used to organise the content. Authors may also want to consider putting the most important information at the beginning of each heading. This helps users “skim" the headings to locate the specific content they need and is especially helpful when browsers or assistive technology allow navigation from heading to heading

• Do not use bold to mark up subheadings. Use styles to create a hierarchy of headings: heading 1, heading 2 and so on

• Use a sans serif font like Arial or Helvetica and use a minimum size of 12 points

• Add a table of contents and summaries to longer documents and use page numbers ensuring all page numbers are in the same location

• Use descriptive page titles that describe the topic or purpose. Any links referring to the page/content should also semantically match the page title

Colour and contrast

This will help to make your content accessible to people with visual impairments or colour blindness.

Make sure:

• Colour is not the only method of conveying meaning, e.g. using green, red and amber alone to convey a hierarchy
• There is sufficient contrast between text and background colour in your document

Ways to do this:

• Use the University web colour palette (be careful not to overuse or use similar colours)
• Use the Microsoft Accessibility Checker to list any accessibility issues in your document, including insufficient colour contrast
• In Moodle, use the accessibility checker in Anthology Ally
• Use a tool to check contrast, for example, contrast checker at WebAIM
• You can also look for text in your document that’s hard to read or distinguish from the background

Use of images

Images need to have alt text (alternative text)

If you’re using images to convey information, think about how you’ll make the content accessible to people with a visual impairment or who use text-only browsers. Never use an image instead of text.

• Provide (or give the person converting or uploading the document for you) alt text for the image which should be a short meaningful description of the image. This can include links to more accessible content or other references.
• Make the same point in the text of the document (so people with visual impairments get the information they need - the image is there as an extra for people who are able to see it).
• Complex images (charts, diagrams, maps, and illustrations) can have longer descriptions and/or links to more accessible content or other references.
• If an image is decorative (i.e. there for purely aesthetic reasons) then it does not need alt text, instead, the ‘Mark as decorative’ box can be ticked in the alt text tab when using Microsoft Office
• The description of functional images should be the function e.g. next, back
• Include alternative text with all visuals 
• In the alt text briefly describe the image and mention the existence of the text and its intent
• Avoid using text in images as the sole method of conveying information. If you must use an image with text in it, repeat that text in the document. 
• TIP: There is no need to include a 'Picture of' or 'Image of' as screen readers identify it as an image.

Groups of images

Sometimes groups of images are used together to represent one piece of information. For example, a collection of star icons that together represent a rating. In this case, only one of the images needs a text alternative to describe the entire collection, while the other images have a null (empty) alt attribute so that they are ignored by assistive technology.
In other cases, a group of images may represent a collection of related images, for example, showing a collection of thematically related art impressions. In this case, each image needs its text alternative that describes it individually, as well as its relationship within the group.

Resources

• Advice from Scope on writing better alt text descriptions for accessibility
• Advice from WCAG on complex images 
• In-depth image description guidelines from the Diagram Centre - includes detailed guidance for maths, chemistry, graphs, relational and text-only images

Links (hyperlinks)

Use meaningful links. It is particularly important for screen readers (which can scan links), that the link describes where the link goes.

• Do not use repeated link titles such as 'click here' or 'find out more', e.g. 'Web Content Accessibility Guidelines (WCAG) 2.2 '
• Do not use the full web address e.g. https://www.w3.org/TR/WCAG22/ as screen readers will read out the link letter by letter
• Links work best when written in a descriptive way, e.g. Web Content Accessibility Guidelines (WCAG) 2.2

Plain English and content

Write in language that’s as simple as possible. This makes your document accessible to people:

• with cognitive impairments and learning disabilities (such as dyslexia)
• who speak English as a second language
• who need information quickly (all of us!)

Where you need to use technical terms, abbreviations or acronyms, explain what they mean the first time you use them.

Tips

• Use descriptive section headings
• Keep sentences and paragraphs short and to the point
• Use a sans serif font like Arial, Calibri or Helvetica
• Use a minimum font size of 12 points (24 points for PowerPoint)
• Use double or 1.5-line spacing
• Make sure the text is left-aligned, not justified
• Use sentence case. Avoid all caps, text, and italics
• Avoid underlining, except for links
• Do not use colour alone to get across meaning
• Avoid footnotes where possible. Provide explanations inline instead

Resources

• University guidelines on writing for the web
• Guides from the Plain English Campaign

Table structure

Only use tables for data

• Keep tables simple: avoid splitting, nesting, or merging cells.
• Use a simple table structure and specify column header information.
• Use table headers so that screen readers can identify columns and rows and so people can tab through your document.
• Avoid blank cells as this can mislead screen readers into thinking the table has ended.
• Don't have any completely blank rows or columns.
• Add alt text to your table.

Resources

• Microsoft support: Create accessible tables in Word