Universal design of web content and teaching materials

All content published online or for teaching must be universally designed. This applies to content in Vortex, Canvas, and other digital services at UiO. You can read more about the legal requirements for universal design and UiO's assessment here

Headings and Titles

Headings structure the text and help users with and without assistive technology navigate the page.

  • All pages must have a page title.
  • The main point of each paragraph should be summarized in a subheading.
  • Headings should be in the correct order and not skip levels (go from heading level 2 to 3, not 2 to 4).
  • Do not use bold text to create a heading. Use the correct heading level.
  • Ensure there are no empty headings on the page.
  • Learn more about headings and titles on W3C

Links

  • Link text should clearly describe the target of the link, for example: Guide and information for accessibility (uutilsynet). Do not paste URLs or use non-descriptive link texts like "click here".
  • When linking documents, the file type should be written in parentheses at the end of the link: Example of document linking (pdf).
  • If images are links, the alt text should describe the link's target, not the image's subject.

Language, font style, and emphasis

Use plain language

The language we use is important for making content understandable. Here are some things to consider:

  • Who are you writing for?
  • What are you trying to convey?
  • How is the text structured?
  • Write concisely and get to the point.
  • Do not refer to the visual placement of content, such as "in the box to the left". Use links to guide to the content instead.

Marking language of the content

  • Ensure the correct language is selected. If the text is in Norwegian, the page's language should be set to Norwegian. If the text is in English, the language should be set to English.
  • If parts of the content are in a different language than the rest of the page, it should be marked in the code

Emphasis

  • Do not use underline to highlight words or sentences. This can be perceived as links.
  • Use italics only to emphasize certain words or in quotes under three lines.
  • Use bold only to highlight important words, not as headings or in entire sentences.

Color and Contrast

Color should not be the only way to convey information. Colors must have sufficient contrast. The contrast requirements are:

  • Minimum 4.5:1 for small text (19 px).
  • Minimum 3.0:1 for large (24 px) or bold text.
  • Minimum 3.0:1 for graphics and non-text content against adjacent colors. This also applies to diagrams and graphs.

The design and framework should maintain good contrast. Format the content correctly and do not change colors to maintain this.

For more information on contrast:

Images and Graphics

Images can be a useful supplement to text. A text alternative to the image allows those who cannot see the image to interpret its content.

  • The alt text should describe the subject or meaning of the image. Write the alt text as you would explain it to someone you are talking to on the phone.
  • If the image is a link, the alt text should describe the link target.
  • Alt text and image captions are not the same. Alt text describes the image's subject, while captions convey the purpose of the image.
  • Avoid images of text. Text should, as far as possible, be presented as text. This allows the text to be enlarged without losing quality and is accessible to assistive devices.
  • Sometimes an image of text is necessary, such as in a diagram. The alt text should describe the purpose and main information, while the detailed information is also presented as text.
  • Information in an image should be conveyed with a text alternative. In a lecture, the lecturer can convey the information orally.

Video, Lecture Recordings, and Audio

  • To ensure everyone can access the content in videos, lecture recordings, and audio clips, it must also be available in text format. Often this means the video must have subtitles and audio clips must have a full text alternative.
  • You can read more about legal requirements and our assessment regarding video subtitling here.

Subtitling Videos and Lecture Recordings

  • Subtitles can either be burned into the video or provided as a text alternative.
  • Subtitles should convey content from audio and video.
  • Relevant audio content that is not speech should be described (music, sound effects, etc.).
  • It should be clear who is speaking, even when they are not visible in the video.
  • The content does not need to be reproduced exactly, but everything essential to the context should be included in the correct order.
  • The text alternative should be visually placed close to the clip and be accessible via a mechanism (link, button, etc.).
  • NB! Audio description of video is a new legal requirement from February 1, 2024. We currently have no good solution for this and will provide guidance on audio description later.

Audio

  • The main content of the recording should be conveyed in the text.
  • Relevant audio content that is not speech should be described (music, sound effects, etc.).
  • It should be clear who is speaking in the correct order.
  • The text alternative can be placed above or below where the recording is accessed, and be accessible via a mechanism (link, button, etc.).

Tools for subtitling

Tables

  • Tables are a great way to present tabular data
  • Tables should not be used to control the layout and design of the page.
  • Include headings in the first column, first row, or both. Do not use the "none" option in Vortex.
  • Give the table a title.

A table using more than two levels of headings is considered a complex table. If you need to set up a complex table, you can read more about in W3C?s tutorial for tables.

Documents (such as PDF, PowerPoint, and Word)

N.B: Norwegian videos with english subtitles.

How can I check if my content is universally designed?

Go through the content and check that it complies with the requirements mentioned on this page. Automated checks are helpful but may not catch all errors. It's best to manually review the content as well.

Use accessibility checks and tools while creating the content:

Published June 26, 2024 1:51 PM - Last modified June 26, 2024 1:51 PM