Web Accessibility tool

Introduction

The Yuja Panorama Website Accessibility” tool provides several options to adjust the colour and content of Moodle web pages and labels. This does not include files such as word documents and slides that are uploaded to Moodle as the alternative formats menu deals with these.  

Both students and teachers can make adjustments in the “Content Adjustments” or “Color Adjustments” tabs, or choose one of the “Accessibility Profiles” which will automatically set the website to suit their specific needs. Once satisfied with their results, the user can save their adjustments for future use. 

Screen shot of the main options for viewing and accessing website accessibility features.
Website Accessibility menu

Accessibility Profiles tab

The “Accessibility Profiles” tab enhances the experience of users based on a predefined set of profiles. These include the following profiles: Mobile Impaired, Color Blind, Dyslexia, Visually Impaired, Cognitive & Learning, ADHD and Seizure & Epileptic. When a profile is selected, different features are provided depending on the need. These are outlined below.

Screen shot of the profiles in the Accessibility Profiles tab, with the ADHD profile selected along with the Reading Mask..
Accessibility Profiles

Motor Impaired: Choose to Pause Animations. 

Color Blind: Alter the colour palette by setting High Contrast and Medium Saturation.

Dyslexia: Focus attention on crucial sections of the website by activating Dyslexia Font and Pause Animations.

Visually Impaired: Enhance the website visuals and increase the size of text and graphics.

Cognitive & Learning: Increase the size of text, create borders around titles, headings, and links, and activate the Reading Guide.

ADHD: Reduce or eliminate distractions and enable the Reading Mask, which spotlights targeted areas of the website. 

Seizure & Epileptic: Eliminate blinking, flashing, or flickering visuals as well as certain color combinations.

 

Content Adjustments tab

 

The “Content Adjustments” tab also has a predefined set of features. These are outlined below.

Content Spacing: Choose to add light, moderate, or heavy horizontal spacing to your content. For more precise adjustments, select the Gear icon in the top-right corner of the feature to adjust horizontal spacing using a slider.   

Font Sizing: Adjust font-sizing on your website by selecting to apply small, medium, or large font sizes. For more precise adjustments, select the Gear icon in the top-right corner of the feature to adjust font size using a slider.

Line Height: Choose to add vertical spacing to your content by selecting one of the three levels of adjustments. For more precise adjustments, select the Gear icon in the top-right corner of the feature to adjust vertical spacing using a slider.

Letter Spacing: Choose to add light, moderate, or heavy letter spacing to your content. For more precise adjustments, select the Gear icon in the top-right corner of the feature to adjust letter spacing using a slider.

Readable Fonts: Apply a different font to your website by selecting between Arial, Times, Tahoma, and Comic Sans fonts.

Alignment: Select to align your text content to the left, right, or center. 

Cursor: Select to increase the size of your cursor. 

Hide Images: Select to hide all images on your webpage.

Pause Animations: Select to pause all animations on your webpage. 

Reading Mask: Choose to focus on a specific area on the webpage. 

Reading Guide: Choose to focus on a specific line on the webpage.

Color Adjustments tab

The “Color Adjustments” tab offers a range of features depending on requirements. These are outlined below.

Contrast: Choose to adjust the contrast of the website between dark, light, and high contrast.   

Saturation: Choose to adjust the saturation of the webpage between low, medium, and high.

Monochrome: Select to remove all colors from the webpage. 

Text, Title, and Background Colors: Choose to adjust the color for your text, title, and background by selecting the desired colors and their opacity from the Gear icon. 

Highlight and/or Outline Titles, Links, and Buttons: Select to add highlights and outlines to your titles, links, and buttons by selecting your desired color and it's opacity from the Gear icon.