Tovuti was founded on the initiative to bring online learning to people of all backgrounds and ability levels. As part of that initiative, Tovuti operates with a variety of accessibility options to help a broad majority of users with differing abilities.
This article outlines the following concepts:
Keyboard Navigation
All learner portal pages can be navigated using only keyboard inputs.
- Tab - cycle to the next element
- Tab + Shift - cycle to the previous element
- Enter - select element
Color Contrast
Color accessibility refers to the design and use of colors to ensure information is easily perceivable and understandable by all individuals, including those with color vision deficiencies or other visual impairments.
Accessibility is achieved by using properly contrasting colors, making text easy to read against the background.
Default Tovuti Colors
Many user interface elements in the Learner Portal have a default background color and a default text color. The contrast of these colors is aligned with WCAG 2.1 AA standards. Note that Admins can update these colors with custom code, which may break the required color contrast standards.
For example, the background around the default Course title below is white and the text is black to meet the WCAG standards.
Admin-configured Colors
Tovuti allows Administrators to select custom coloring that achieves both color accessibility and a branded experience. Color options are configured through Three-Color Design, Design Quick Start, and the User Portal editor.
Proper color contrast levels are set according to Web Content Accessibility Guidelines (WCAG).
The minimum requirement (AA level) for WCAG compliance is a 4.5:1 contrast ratio.
The enhanced requirement (AAA level) for WCAG compliance is a 7:1 contrast ratio.
Test contrast level between various colors to check for WCAG compliance and find the best color combination for the LMS Learner Portal.
For example, test that text on top of buttons is properly contrasted for optimum visibility.
Text-to-Speech
Tovuti is enabled to function with most screen reader browser extensions.
Screen readers are assistive technology tools designed to make digital content accessible to individuals with visual impairments or blindness. These tools convert digital text into synthesized speech or present it through braille displays, enabling users to navigate and interact with digital interfaces.
Closed-captioned Videos
Closed captioning refers to the display of text on a screen to provide a visual representation of the audio content being presented. This feature makes audio content accessible to individuals who are deaf or hard of hearing. This ensures that people with hearing impairments can understand and enjoy the content.
Tovuti offers a variety of video configuration options, each of which can be enabled with closed captions.
Uploaded videos
When uploading a video, Admins can include a captions file (VTT file) to accompany the video. Multiple files can be uploaded to support various languages.
Content Library videos
eLearning Packages from the Content Library include videos with captions already enabled.
Learners may select their desired captions when viewing them in the learner portal.
Interactive Videos
When configuring an Interactive Video, Admins may also upload a captions file (VTT file) to accompany the video.
Other tips for Video Accessibility
Tovuit’s media player includes buttons and functions that favor mouse-only and keyboard-only users.
When selecting which videos to include in the LMS, the following points should be considered to maintain user accessibility:
- Avoid flashing or flickering content
- Avoid videos that have patterned or intricate backgrounds (this may make content difficult to perceive)
- In transcripts, make sure to identify each speaker
- Ensure videos include fonts and font colors that are properly contrasting and easy to read
If customers create their own video content, consider the Video Accessiblitiy Checklist.
Image Accessibility
When uploading images in Tovuti, it is important to include an Alt Tag. Alt Tags provide a textual reference for the image that is read when a Screen Reader is used.
Other tips for making images as accessible as possible include:
- Complex images such as diagrams or graphs should include a textual description in the Learner Portal. This ensures that all readers have the details necessary to understand the information conveyed with the image.
- Avoid using images that only display text. The information in these images can be included in a text block for the lesson, course, event, etc
- Decorative images that don’t present usable information can be given a null alt attribute to hide them from screen readers
- A null Alt Tag can be written as “” (no spaces between the quotation marks)
For additional information on accessible images, view the Yale University training slides for image accessibility.