Launching into accessibility with our TEF submission

Summary

  • The TEF submission is an important document, contributing to the university’s future.
  • Digital Learning made a significant contribution to improving the digital accessibility of our university TEF submission.
  • In this post we share examples of improvements to:
    • alternative text
    • the semantic structure of the document
    • how we use colour to present information in graphs
  • There are opportunities to learn lessons for the future.

What is the TEF?

The Teaching Excellence Framework (TEF) is a national exercise organised by the Office for Students (OfS). Universities submit an entry every five years, resulting in bronze, silver, or gold ratings.  These ratings represent increasing degrees of excellence above minimum quality expectations. An expert panel makes the decision. In England the results of the TEF can affect the limits to tuition fees that Universities can charge. The deadline for the latest round of TEF submissions was 24 January.

What does this have to do with accessibility?

Like the University of Southampton, the OfS must follow The Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018. The OfS will publish university TEF submissions on their website. Therefore, the submissions must at least meet the Web Content Accessibility Guidelines. The TEF submission guidelines state, “As we would normally expect to publish the submission, it should be fully accessible and comply with the Web Content Accessibility Guidelines. This means, among other features, it should use structured headings, accessible colours, and alternative text for images. For further guidance see information published by the World Wide Web Consortium”.

How were we involved?

We were invited to take part in improving the accessibility of the submission. We worked with a Corporate Writer & Editor in the University Communications department. Our role was to explain the changes needed and help diagnose and resolve any problems. The Corporate Writer & Editor role in the accessibility work was to implement the changes.

Let’s look at some of the ways we were able to help.

Alternative text

Alternative text is the written description of an image that we write for those who do not see it. Five images required alternative text. An interesting example is the use of the university’s Triple Helix.

We use a scientific graphic to demonstrate how our education, research and KEE are all intertwined, with our people at the centre. The graphic is similar to a DNA double helix, but with three different coloured elements representing education, research and KEE wrapping around a core representing our people.
The triple helix within the university’s TEF submission.

The basic rule of alternative text is to convey the intended meaning of the image whilst accounting for its context, audience, and function. When text is present in an image, we must ensure we include that text within our alternative text.

What was the original alternative text?

The original alternative text was, “Diagram. Description automatically generated”. Whilst Office can generate alternative text automatically it is invariably inaccurate.

How did we improve it?

After explaining the principles of writing effective alternative text and giving some suggestions, our colleague wrote the following alternative text. “We use a scientific graphic to demonstrate how our education, research and KEE are all intertwined, with our people at the centre. The graphic is similar to a DNA double helix, but with three different coloured elements representing education, research and KEE wrapping around a core representing our people”. The acronym KEE (Knowledge Exchange and Enterprise) is already explained in the document so was not expanded within the alternative text.

Who benefits when we write alternative text?

When we write alternative text for images a number of groups of people benefit:

  • those who do not see the image and rely on assistive technology such as screen readers to read out the alternative text so that they do not miss our intended meaning.
  • those who create an alternative version of the file, such as an audio version. The alternative text is included as part of the audio file.
  • those who find that having a text alternative helps them to concentrate on or validate their understanding of an image. Some readers with cognitive impairments or conditions find this useful.

For future consideration

In the future, some changes could make the triple helix image even better:

  • The contrast of the words “Research” and “Knowledge exchange and enterprise” is insufficient against the white background and would fail an accessibility check. We should use text colour with a contrast ratio of ≥4.5:1 to the background colour. The contrast of the word research is 2.8:1 to the background. The contrast of the phrase, “Knowledge exchange and enterprise” is 2.49:1.
  • Images containing text can cause problems for those who rely on screen magnification. Bitmap text can appear blurred when zoomed in. A vector version, such as an SVG (Scalable Vector Graphic), may be a better way to distribute this image because the text will scale better when zoomed in.
  • For reasons unknown, the phrase “Italian Trulli” appears as alternative text for the triple helix graphic in other University web pages and presentations.
The word "research" from the triple helix image, viewed using a screen magnifier. The text is blurry because the text is embedded within a low-quality image. The result is that the image is harder to read than it should be. The text is also in low contrast which makes the reading experience harder.
When text is embedded within a bitmapped image, the artefacts and pixelation that appear can cause a blurry reading experience for those who rely on screen magnification tools.
Using developer tools, we find that “Italian Trulli” is the alternative text for a triple helix graphic on a university web page.

Headings and Spacing

Headings communicate the organisation and structure of a document. In Word we can create headings by using Styles. The TEF document did use headings but the navigation view in Word showed that something was not right.

Screenshots of the heading structure of the original and remediated documents. In the original document there are gaps between headings that should not be there. In the remediated documents there are no unwanted gaps.
Original document heading structure compared with the remediated document.

Large gaps between some of the headings in the original document’s heading structure suggested something was awry. Empty headings can confuse and frustrate those who rely on page navigation features, especially those who use screen readers.

Pilcrows to the rescue!

Using the show / hide paragraph marks button in Word, also known as the Pilcrow button, we found examples throughout the document where spaces and carriage returns control the spacing of the document. Furthermore, some of the carriage returns were set as headings.

Four paragraph marks, three of which have been marked as headings.

We explained how to remove these superfluous spaces and carriage returns and demonstrated how to use page breaks in Word. Rather than using carriage returns to control spacing, we can set how much space should appear before and after paragraphs.

The paragraph options box for a style in Word. Among other option the "spacing after" setting is set to 8pt.
Editing the “normal” style and setting the spacing that appears after a paragraph finishes is a better way to handle spacing than using superfluous carriage returns.

Who benefits when we use headings?

When we use headings, particularly in long documents:

Use of colour

We shouldn’t use colour alone to express meaning. The TEF submission includes a number of graphs that use colour to differentiate sets of data. When we use colour, an effective way to check that we are not using colour alone to express meaning is to use greyscale and check that we have retained the meaning we intended.

Let’s review an example graph from our TEF submission in both its original form and in greyscale.

Sets of graphs indicating student satisfaction. The graphs represent student satisfaction compared to a benchmark. Each set of graph shows student satisfaction measured in yearly intervals from year 1 (2019) to year 4 (2022). One graph is shown in colour, shades of blue and orange represent the different measurement intervals. The graph is duplicated in greyscale to illustrate the similarity between the shades of grey that result.
A set of graphs from the original submission, first in its original colour and then duplicated in greyscale.

While the bars in this set of graphs are presented in sequence of year, we can only know this for sure when we view the graphs in colour. Viewing the graphs in greyscale we assume that the logical sequence of year 1 to year 4 is represented in the order of the bars.

Again, one graph is shown in colour. We use different patterns to fill the bars and a strong black border between each bar. The pattern styles from left to right are: thin vertical lines, dots, diagonal lines, and a transverse wave a little like a repeating “w” letter. The graph is duplicated in greyscale. The difference is barely perceptible because the pattern fill differentiation is so visibly clear.
The same set of graphs from the remediated submission, first in its original colour and then duplicated in greyscale.

Using a pattern fill for each bar in the graph, we no longer need to assume the order when viewing in greyscale. As well as benefiting those who may be colour blind, this adjustment also benefits those who use a black and white printout of the document.

Who benefits when we ensure colour alone is not used to convey meaning?

The one that got away: reading order

The submission uses call-out boxes to highlight certain pieces of information. One issue we could not resolve perfectly in the document within the time available was the reading order in which these boxes were read aloud by assistive technology in relation to the paragraph text. While testing with a screen reader produced a satisfactory result, with more time we could have produced a better outcome.

Conclusion

The final submission passed all automated tests, including a 100% score in Blackboard Ally. We also passed our manual tests with satisfactory results. The process was a great learning exercise and provided hands-on experience for those involved in the principles of accessible documents.

Lessons and recommendations

  • As a university we should “walk the talk” when it comes to accessibility and inclusion. We may lose credibility and respect if we do not.
  • All documents should have accessibility built into their creation process so that accessibility is considered from the start. For institutional resources such as the TEF submission, accessibility checkpoints can be added in the editorial and review process.
  • The accessibility checker is enabled by default for Office apps on University PCs. While automated tests can’t find all issues, it’s more efficient to resolve all issues the accessibility checker identifies before seeking further help.
  • Accessibility is a journey. We are all at different stages of this journey. There are places to find help.
  • An institutional accessibility policy and strategy could help to increase engagement and resourcing into building digital accessibility into all we do.
  • While we should aim for perfection, progress is often more important and achievable.
How did we make the University’s Teaching Excellence Framework (TEF) submission more accessible?

Post navigation


What do you think? Leave us a comment to share your thoughts...