How Learnosity helps you create accessible content

Learnosity is always improving the accessibility of the product, ensuring user facing functionality can be easily interacted with by all users. 

Our intent is also to assist our clients in creating accessible content, while not restricting flexibility in content creation. We offer specific tool enhancements and minor automation to assist the content accessibility during creation. 

We have added hardcoded ARIA and screen reader only text within the page as part of the process to make Learnosity functionality accessible. Considering the diversity of our clients and the content they create, we have aimed to be as generic as possible with these decisions, offering a base level out-of-the-box experience for the accessible user. 

 

ARIA and screen-reader-only content

Our hardcoded ARIA or screen-reader-only text may not suit all clients' needs depending on their markets, regions and the language of their products. Therefore, all hardcoded ARIA or screen reader only content can be customized by the client. Label bundle overrides can be passed at initialisation to reword this content or internationalize it for non English languages.

This ARIA or screen reader only text customisation may suffice for general content of whole user sessions, but we understand that there can be more specific ‘per Question’ cases that need customisation. For example text input fields:

 

WCAG Success Criterion 3.3.2 Labels or Instructions

Labels or instructions are provided when content requires user input.”

 

One way to achieve this could be to label the field by wrapping it within the form field <label> tag using the Question stimulus content as the label.

Text along with rich content such as images, tables, math, audio and video can be added to the Question stimulus. We just cannot know what the Question stimulus will contain, so it is not possible to programmatically associate this content to the label, partly as some rich content would not transfer simply into text, nor can we assume clients want the Question stimulus associated with the field.

The approach we have taken is applying an ARIA label to the field. For example in cloze with text Questions we have applied aria-label="Response area" as a generic global label for the text inputs. At a base level, this makes the inputs accessible and globally can be customized with a label bundle. However there could be multiple inputs within the text which could lead to confusion on what is expected to be input in any one case.

Where multiple form elements are used in one Question, all individual instances can be customized in the authoring environment. In all Question types that include a form element, be it dropdown, drag and drop or user input including short text, essay and math, there will be an associated ARIA label field in the Question Editor. When populated, these labels will be stored with the Question and added to the page when loaded. This customisation overrides any defaults label or label bundle that has been added.

 

Screen_Shot_2021-02-09_at_4.06.09_pm.png

Figure 1: options available for individual input fields in the cloze with text Question type

 

Images

Success Criterion 1.1.1 Non-text Content

“All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.”

 

Correct accessibility of images should include text alternatives for users who cannot discern the visual content of the image. Images uploaded into Learnosity Questions are stored in our servers and the HTML <img> tag is generated on load by our Questions API. Adding ‘alt text’ content to these images on load would require clients to manipulate the page built by our Questions API and although possible it’s a heavy lift. 

Learnosity authoring offers an 'alt text' input wherever images or graphics can be added to content, allowing authors to assign text alternatives to graphic content. This 'alt text' is stored within the Question and added to the <img> tag when the page is built by our Questions API.

 

Screen_Shot_2021-02-09_at_4.10.08_pm.png

Figure 2: Alternate text option for image upload

 

Media

Success Criterion 1.2.1 Audio-only and Video-only (Prerecorded)

“For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such:

  • Prerecorded Audio-only

An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content.

  • Prerecorded Video-only

Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content.”

 

Audio and video can be uploaded to accompany a Question stimulus or as a stand alone feature in Learnosity Items. Within the audio and video feature authoring we offer an option to add a transcript text file. When added, the transcript text is stored in the Question metadata allowing clients to access it on load and choose where and how it is displayed.

NOTE: to display the transcript requires code in the client page.

 

Success Criterion 1.2.2 Captions (Prerecorded)

“Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.”

 

The Learnosity video player features an option to upload a caption file in .vtt format. The uploaded .vtt can be enabled by the user via the CC button, which automatically displays in the player control bar if the video feature includes a caption file.

Vimeo or YouTube content will require captions to be embedded when creating the video content for the captions to be available in the video player.

 

Screen_Shot_2021-02-09_at_4.10.57_pm.png

Figure 3: options available for the video Question type showing caption and transcript inputs

 

Color contrast

Success Criterion 1.4.3 Contrast (Minimum)

"The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

  • Large Text

Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.

  • Incidental

Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

  • Logotypes

Text that is part of a logo or brand name has no contrast requirement."

 

We ensure the color contrast of all Learnosity controlled UI elements meet requirements. 

Any client CSS overrides of the Learnosity default UI will need to take contrast into consideration and it is the client's responsibility to test and confirm contrast of any color override meets requirements.

Similarly, any image or graphic content added using Learnosity authoring tools and any application of color to text where available will also need to be tested to confirm the contrast of any color meets requirements.

There are various tools available to test color contrast (and other accessibility conformance). A useful tool used internally by Learnosity engineers is the Axe (https://www.deque.com/axe/) accessibility testing tool. 

Note: when it comes to accessibility testing, its estimated only around 30% of issues can be identified with automation tests. Color contrast falls into this 30% of issues, so it is a very simple process to ensure your color use meets requirements. 

There is only one case among Learnosity Question types that needs further authoring control to help create accessible content. In the hotspot Question type we have assigned default colors for active, non active and focus states of hotspot zones. 

However we cannot know what background image will be added or where the hotspots are applied over the image. All colors of the hotspot zones can be customized giving complete flexibility to ensure the hotspot zone fills and strokes meet contrast requirements against the background image. This customisation can be controlled globally for all zones or set individually for each  zone. Additionally each zone can have an assigned ARIA label allowing full customisation of what the assistive user will be described.

 

Screen_Shot_2021-02-09_at_4.14.48_pm.png

Figure 4: options available for individual zones in the hotspot Question type

Was this article helpful?

Did you arrive here by accident? If so, learn more about Learnosity.