Authoring accessible questions

This is available for Authors. You can author questions for candidates that have visual impairments using best practice methods explained within the article.

Some examples of visual impairments are:

  • Low-level vision
  • Color Blindness
  • Blindness

Content

Keys to Visual Accessibility

A screen reader is a form of assistive technology that renders text and image content as speech or braille output. In this article, we will provide you with best-practice methods when authoring within Inspera. The following methods we will cover:

  • Ensuring image quality
  • Labeling questions/prompts
  • Writing alternative text
  • Writing good alternative text

Ensuring image quality

It is recommended that authors within Inspera ensure high-quality images by zooming in at 400% to check for pixelation. This is particularly important for users with low vision who often magnify the page, making images appear pixelated and difficult to comprehend.

Color contrast

When using a question such as the Hotspot-type, you can choose to display the hotspot areas to the candidates and select the color of the border that outlines the hotspot areas. This helps to visually distinguish the selectable areas from the background, making it clear to candidates which areas they can select from.

It’s important to choose a color that provides enough contrast against the background color, in order to ensure clear visibility for users with low vision or color blindness. The WCAG 2.1 guidelines for accessibility recommend a minimum 3:1 contrast ratio between foreground and background colors.  By meeting the WCAG 2.1 guidelines, you can ensure that your Hotspot-type question is accessible to a wider range of users, including those with visual disabilities.

To check if your chosen color meets the recommended contrast ratio, you can use a color contrast checker or a similar tool.

Example

We need to mark the hotspot where the figure is standing.

If the image is dark

The dark color border makes it hard to see the marked spot.

The light color border and reduced opacity of the background makes it easy to see.

Example

We need to mark the hotspot in Australia on this map

If the image is light

The light color border and lesser background opacity make it hard to see the marked spot.

A slightly darker color border and increased opacity of the background make it more visible.

Example

We need to mark the hotspot to the circular windows.

If the image is very busy

The light color border and lesser background opacity make it difficult to see the marked spot.

The fluorescent-colored border and increased opacity of the background make the hotspots more visible.

 

Labeling questions/prompts

A prompt is used to write an explanation of text for a question. A prompt can help differentiate between where the question description ends, and where the alternatives begin. The prompt will appear underneath the question text and is displayed above the alternatives. "Select one alternative" is set by default. 

default_view_MCQ.png Image text: Default view of multiple-choice questions in the authoring tool.

The prompt of the question can be edited by clicking on the interaction in the text editor and then picking the Prompt option.

editing_a_prompt_after_selecting_the_interaction_editor.png

Image text: View of Prompt editor after selecting the Multiple choice interaction element.

 

Adding rich text

Plain text can be formatted by clicking Edit rich text, available under each Prompt. 

Within rich text, you have the option to make the text Bold, Italic, Underline, Subscript, Superscript and Math.

Note: The prompt text is bold by default and will revert to plain text once you begin editing rich text.

Edit_rich_text_window_editor.png

 

Writing alternative text

Alternative text is added to images so that assistive technology can give blind and visually impaired users a description of what’s shown on the image. If an image is unable to load, the alt text will be displayed instead as well.

Adding alternative text to images from Inspera

After uploading an image in the authoring tool, alternative text can be added from a pop-up dialogue. All images should have well-written alternative text.

After uploading an image, optional alternative text can be added.

To update the alternative text of existing images, right-click an image in the editor and choose the Edit alternative text option.

large_white_poodle.png

 

Writing good alternative text

Good alternative text is sufficiently descriptive, so that blind students get access to the same level of information as sighted students. The alternative description can be as long as it needs to be to reach the right level of detail, but should ideally be kept short and to the point. If an image contains text, the text should be included in the alternative description as well.

Screen readers already tell the user that an image is an image, so including “Image of” at the start of the alternative text is redundant and should be avoided. In some cases, it can be allowed, for example when comparing a photograph and an illustration of the same subject.

Cosmetic elements without meaning do not require alternative text. For example, a decorative image could be used as a separator between two blocks of text.

Example: huskies_pulling_sled.jpg

  • Bad alternative text: “Image” (doesn’t say what the image is about)
  • Bad alternative text: “Image of dogs” (“image of” is redundant)
  • Okay alternative text: “Dogs” (it mentions the subject of the image, but nothing else)
  • Good alternative text: “Huskies in the snow” (it gives a more accurate description of the subject)
  • Better alternative text: “Five Huskies pulling a sled in the snow“ (it also describes what the subject is doing)

The alternative text should not reveal any answers. Let’s take another example where the picture above comes with the following question: “What breed of dog is displayed here?”. In that case “Huskies in the snow“ would give away that the dog is a Husky, and better alternative text could be a description of the dog’s physical characteristics.

Alternative text for charts and complex images

When including charts and complex images on questions, the alt text should give context for understanding the visual. Information to be included can be the type of data, and the reason for including the chart. You can include a link to the data or source of the chart within the question, but it should not be included within the alt text.

Example: 

line_chart_of_clicks_within_the_help_center_for_the_past_7_days__where_clicks_reached_a_maximum_of_1700.png

  • alt = Line chart of clicks within the Help Center for the past 7 days, where clicks reached a maximum of 1700 and a low of 500.

Alternative text in PDFs

When using alternative text in PDFs, our recommendation is as follows:

  • Avoid images.
  • Add alt text and export properly.
  • Write alt text as a caption underneath.
  • Other pdf:
    • Ensure that headlines are in the right order and your headlines are correct. 
  • Avoid using binary images, but rather, have text or vector graphics that a screen reader can access directly, or avoid the use of PDF entirely.

 

Artikler i denne seksjonen

Var denne artikkelen nyttig?
1 av 1 syntes dette var nyttig