OER Dev

Universal design

Short film showing visually impaired children reading on digital devices

Universal design means to make content accessible for everyone, regardless of their functional ability. It is both a goal and a commitment for Education.dev to develop technology and content that is accessible to all users. Often, just implementing a few changes will help improve the user experience for many people.

There is a set of rules and recommendations for projects working with design, development and content creation. A standard defined in the Web Content Accessibility Guidelines, WCAG 2.1, has four principles for universal design. They can be summed up in the word “POUR”:

  • Perceivable: Is it possible for all users to perceive the content?
  • Operable: Is it possible for all users to operate the website?
  • Understandable: Is the content understandable for all users?
  • Robust: Is the content accessible for all users regardless of device, plattform and technology?


In the following we present the rules that are relevant for you if you create content online. 

The content is structured and easy to read

Structured texts are easier to read and understand. A good structure makes it easier to spot all the elements in the text. Correct coding is important for the computers that are interpreting the information and making it readable. Make sure headings, introduction, paragraphs, text and lists are clear, and that they easily can be separated from each other. 

Headings

Headings help the reader to understand the text. They must be precise and describe the content. In the editor we choose “Heading 2”, “Heading 3” and so on for different headings. The different levels of headings in the editor match H-tags in the html-code: H1, H2, H3, H4, H5 and H6. H1 is the most visible one, both for the user and for the computer. 

  • We must choose a Heading-format for all headings, so they get an H-tag. If we for example only use bold fonts, browsers and screen readers will not be able to pick up what parts of the text that are headings. 
  • H1 must be used only once per page, and is the main heading on the page. It is coded automatically from the heading field in the template. 
  • H2 must be used on headings one level below the main heading, and H3 two levels below. H2 and H3 can be used more than once on a page. In other words, we choose H2 in the editor if we want the level below the main heading, and H3 if you want the next sub level. 
  • When you choose between H2, H3 and so on, do not focus on what looks better, but on what level you want the computers to interpret the headings as.

Introduction

The introduction is usually the first part of a text the user reads. It is supposed to prepare the reader for what the text is about. 

Body and paragraphs

The body or main part of the text is divided into paragraphs to make it possible for the reader to relate to the text bit by bit. The purpose is also to make it easier to consume the content and the coherence. In the code, all paragraphs end with a P-tag. The synthetic voice in the screen reader interprets this tag so that it makes a natural pause in the reading. 

Lists

Using lists is a great way to structure the content, both visually and in the code. There is a function for creating lists in the editor. Use this function to make sure the lists are coded correctly. Do not copy and paste lists with style rules from other documents. Even though it looks correct, it may not be the case. A good alternative is to copy and paste the text as “clean” text and convert to a list in the editor. 

Signs

In written text we have signs that can be used to create nuances in the presentation. However, they are not obligatory to use. Especially the parenthesis, the dash and the hyphen. Screen readers will try to read these signs in synthetic speech. We should therefore try not to use these signs when the text works just as well without them.

URLs must be descriptive and precise

URLs must tell the reader what kind of information they lead to. We use URLs like:

  • “download digitallibrary.io”
  • “the book I need help (pdf 2mb)”

These URLs let the users know what is downloaded, or what they can expect to find. Note that the second example also explains the file format and file size of the download. 

Since the URL is supposed to tell us what content it is leading you to, it can consist of more than a couple of words. A useful test is to remove the text around the URL and check if it is still meaningful. 

Avoid URLs like

  • “click on this URL to download”
  • “read more about…”
  • “click here to read….”

The user does not need to be told what a URL does. We all know that. What the users want to know is where the URL leads them. 

Images are relevant and have alt-texts

Images are used to help the readers understand the content. It is therefore important to consider if the images you choose are descriptive and relevant for the content or just chosen as decoration. Images chosen as decoration should be avoided if possible. 

All images used must have an alt-text. The alt-text describes the motive in the image for blind or visually impaired users. It is also useful if the image for one reason or another cannot be uploaded. The exception is images used as decoration. When you add these images you should use the alt-attribute, but not write anything. This way, the screen reader is told that it can skip the image.

Tables are tidy

Tables are first and foremost used to present different kinds of data. To make sure that all users can read the data in your table, you need to remember the following:

  • All cells must contain content so they can be read by everybody.
  • Give the table a suitable title. 
  • Use cell headings for headings and groups in the table.

You may use supplementary images to explain the data in the table.

Videos have subheadings and transcription

Video is a great learning tool with both voice and images. Videos are especially useful for users who struggle to read texts. To fully understand the content, you have to be able to see, and for the most part also hear. To optimize the accessibility, you must remember two things:

  • Subtitles to help the users who can not hear the sound from the film, or those who may have trouble understanding the spoken language. 
  • Transcription of the content and the dialogue, so those who use a screen reader due to visual impairment, can understand the content. It is also useful if the video does not play. 
%d bloggers like this: