Skip to Main Content

Digital accessibility guide

Explore how to create, design and structure your content to ensure that is is accessible to your students.

About accessible documents

Digital documents have accessibility features to support the needs of all users under the accessibility regulations. The following guidance can help you create learn to content in a more inclusive and accessible way, as well as give you long-term and transferable skills. 

SCULPT

The SCULPT model was developed at Worcestershire County Council as a guide to the basics of everyday inclusive digital practice. It can be used to apply the basic principles of digital accessibility into documents and content. It is an acronym which stands for:

  • S for Structure (use headings and styles)
  • C for Colour and contrast
  • U for Use of images
  • L for Links (hyperlinks)
  • P for Plain English
  • T for Tables

Structure (headings and styles)

Using headings and styles in your documents will make it easier for screen readers to read your documents in a logical order. 

You can do this by organising the information in your documents into small sections with headings and sub-headings to create a logical structure and order. Ideally, each heading would include only a few paragraphs so the information is better organised, as well as easier to read and understand:

  • In Word, use the built-in headings and styles
  • In PowerPoint, create a reading order for content in your slides and use unique slide titles
  • For web development, use headings and styles in your code or editor to structure and organise content.

Colour and contrast

Users with visual impairments may miss out on information or meaning of content that is conveyed by colour. Ensuring that your elements are not using colour as the single means of conveying meaning but employing alternative ways of emphasis will help users distinguish content in their purpose. e.g., highlighting text in yellow as the only way of emphasising text will not come across to a user that is not sighted. Consider making the text bold or using an alternative solution. 

Aim to make it easier for users to see your content and separate foreground from background by using colours in your text and other elements that have sufficient contrast. 

To check colour contrast is sufficient: 

Use of images

All non-textual elements, such as images, graphs, etc., must have an alternative text that describes the content or the information it is trying to convey. It is then possible for users to change it into large print, braille, speech, symbols or simpler language.

The image can be marked as decorative if it conveys no necessary information. Complex images, such as a chart, graph or map, may require an additional long description to the alternative text. The W3C guidance on complex images has examples of how to provide long descriptions.

To add Alt-text to an image on Office documents such as Word, PowerPoint, Excel, Outlook:

  1. Right-click or select the applications key when focused on an image or object and select Edit Alt Text.
  2. Enter a description of the image in the Alt Text field or Mark as decorative. Select "Generate a description for me" to enable AI to create alternative text.
  3. Alternatively, the Accessibility Checker can generate a list of images that require alt text for you.

Example of inputting alt-text:

Person pouring coffee from silver pot

Alt text: A person pours coffee from a silver espresso pot into a blue and white striped mug. 

Avoid: 

  • Using screenshots of text – insert the text instead 
  • Using phrases referring to images, such as “a photo of” 

Image from UnSplash, credit Annie Spratt.

Complex images

Complex images are a type of visual content that contain considerable amounts of information and details, more than could be conveyed by alt text alone, or just one sentence. These can be: 

  • Graphs and charts (images generated from tabular data), including flow charts and organisational charts 
  • Diagrams, including mind maps, blueprints, and sketches (content that is pictorial yet abstract) 
  • Photographs, illustrations, and paintings 
  • Maps showing locations or weather systems 

In cases where complex images are used, you should endeavour to include a longer description of the content alongside the alt text to fully convey the information – this practice will ensure you are meeting WCAG 2.1 success criteria. Some examples of what you can do are: 

Links (hyperlinks)

Links will be more useful if they describe the destination in a meaningful way. Screen-reader users can skip from link to link and it is therefore important that the text is also unique. Avoid “Click here” and “Read more” which are confusing out of context and are likely to be used repeatedly. Before linking a full URL, consider whether it is simple or you want users to become familiar with it as screen-readers read it out entirely. WebAim guidance on Link Text and Appearance has more information on the readability and length of links.

Meaningful text for hyperlinks tips: 

  • Use unique, descriptive link text. 
  • Be concise (though full sentences are also OK, use your judgment). 
  • Give information on the target destination of the link. 
  • Be contextually relevant. 
  • Warn users if the link opens in a new window or different format. 

Avoid:

  • Inserting full URL text directly in your content. Consider whether the URL is short and descriptive e.g., www.city.ac.uk, as screen readers will read out the entire URL if inserted as is. 
  • “Click here” or “read more” text. A user tabbing through these links will not know where the links are destined to go. This can be confusing for users when a screen reader reads the links out of context. 

To insert meaningful hyperlink text: 

  1. Use the cursor to highlight the text (this may be simple text or a URL) to which you want to add the hyperlink text, and then right-click. 
  2. Select Link or Edit Hyperlink. The text you selected will display in the Text to display box. This is the hyperlink text. 
  3. Add or change the hyperlink text to something meaningful and descriptive. 
  4. In the Address box, enter the URL for the hyperlink. 
  5. Apply the changes by selecting OK. 

Plain English

Complex language can be difficult for some people, especially when English is not their first language or for those with learning differences or reduced cognitive abilities. Readability and legibility help people with reading difficulties which affect even highly educated users with specialised subject knowledge. A "specific learning difference" which includes dyslexia, is City's largest disabled group for staff and students (City, 2022).

Some tips:

  • Write in short, clear sentences and paragraphs.
  • Group related ideas under a heading.
  • Use bullet lists to arrange similar items.
  • Avoid complex terminology and include a glossary.
  • Expand acronyms on first use.
  • Include multimedia to support comprehension.

Example (W3C, 2022):

Unnecessarily complex

CPP: In the event of a vehicular collision, a company assigned representative will seek to ascertain the extent and cause of damages to property belonging to all parties involved. Once our representative obtains information that allows us to understand the causality, we may or may not assign appropriate monetary compensation. The resulting decision may occasion one of the following options: the claim is not approved and is assigned a rejected status, the status of the claim is ambiguous and will require additional information before further processing can occur, the claim is partially approved and reduced payment is assigned and issued, or claim is fully approved and total claim payment is assigned and issued.

Easier to understand:

  • Claims Processing Procedure (CPP): If you have a car accident, our agent will investigate. Findings will determine any claim payment. This could result in:
  • Approved claim - full payment
  • Partially approved claim - reduced payment
  • Undetermined claim - more information needed
  • Rejected claim - no payment

illustration of claims processing procedure

 

Fonts

Use an accessible font (all staff are encouraged to use Arial (part of the City brand) in all their materials, which is a dyslexia-friendly font). Research suggests that distinct types of fonts work for separate groups of people, so there isn't a one-size-fits-all font.

  • Some serif fonts are better for low vision but can be distorted on digital publications by on-screen pixelation.
  • Some sans-serif fonts are easier to read as they are smoother and less distracting. However, certain characters can look similar, and some look the same when ‘mirror’ them which can affect reading speed and comprehension, particularly for people with dyslexia  (Bird, 2021).
  • OpenDyslexic is a specialist typeface that has been created with input from dyslexic users and is a helpful resource to be aware of, for targeting specific needs that users may have. The weighted bottoms and different letter shapes offer marked improvements in experience for dyslexic people. 
    • To install it on a City device:  
      1. Navigate to the Windows search field. 
      2. Type in Software Centre. Select Enter. 
      3. Select the ‘FONT: OpenDyslexic’ font pack. Select Install. 
      4. The font pack will install on your machine for use in authoring software, such as Microsoft Word or Adobe InDesign. 

What you can do:

  • Use the Grammarly Office plug-in or Hemingway Editor to improve readability or the Editor from the Review tab in Office 365 to improve readability.
  • Ask for feedback on your font choice from your audience.

Tables and visualisations

Like their use in other Microsoft 365 products, tables can be useful content types, though they can pose some accessibility issues when used in a non-standard or overly complex format.  

Accessible tables tips: 

  • Use a simple table structure – apply an existing Microsoft table style, and avoid merged or split cells, tables within tables, and blank rows or columns. 
  • Specify the first column and header row of your table. 
  • Add alt text for your tables. (see Alt text for visual content
  • Define named regions for cell ranges to enable column and row headers to be read out optimally in screen readers. 

There are a few extra steps to be considered in making a table accessible to screenreaders:

Do add a Description to the Alt-text tab by right-clicking on your table and selecting Table Properties.

Adding Alt text in Table Properties with written example, XYZ data divided into four category columns with three rows of data in each category

Do include a Header row and First column if appropriate from the Table Design tab (with your table selected), which screen readers can use to identify cells.

Microsoft Word table design tab with header row and first column checked

Do add a Caption to the table from the References tab, and it will appear in the Table of Contents.

Microsoft Word Insert Caption from References menu

Don't

  • Use tables to create a page layout or align content.
  • Merge or split cells as it can confuse screenreading programs.
  • Add blank rows to control spacing. Adjust Table Row Height from the Layout tab instead.

Office 365 and PDF accessibility checkers

The Accessibility Checker is a built-in tool available across the suite of Microsoft Office software. It can run in the background while you work, or you can launch when needed. The checker can detect accessibility errors that your content may have, help you review the issues and recommend how to fix them.  

You can access the Accessibility Checker options from the dropdown menu to Check Accessibility, insert Alt Text, open the Reading Order Pane, and open Ease of Access Options. 

To use the Accessibility Checker: 

  1. Select the Review tab. Select Check Accessibility in the Accessibility group. 
  2. The Accessibility Checker pane will open on the right side of your window.  
  3. Review the results (this may be a list of errors, warnings, and tips on how to fix issues) and apply any recommendations you are given and amends. 

Further guidance:

References

Creative Commons Licence
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License