Web Accessibility Widget

Introduction

The Yuja Panorama “Website Accessibility Widget” is accessed via the purple icon that sits on the side panel menu in Moodle.

Open

Panorama accessibility widget

The tool provides several options to adjust the appearance of Moodle courses. Accessibility adjustments can be applied to Moodle menus, content labels and some resources created natively within Moodle (for example the Book resource) Adjustments cannot be applied to files created in third party applications, such as word documents or slides that are uploaded to Moodle. Instead, the Panorama alternative formats menu can be used to interact with these.

Both students and teachers can use the Website Accessibility Widget make adjustments in the “Color Adjustments” or “Content Adjustments” menus, or choose one of the “Accessibility Profiles” within the “Summary” menu which will automatically apply a suggested profile to suit their specific needs.

Open

Website Accessibility Widget menu

Accessibility Profiles menu

The “Accessibility Profiles” menu enhances the experience of users based on a predefined set of profiles. These include the following: Visually Impaired, Motor Impaired, Color Blind, Dyslexia, Cognitive & Learning, ADHD and Seizure & Epileptic. When a profile is selected, suggested adjustments are made depending on the need. Some information on these is provided below.

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

Motor Impaired: Pause animations. 

Color Blind: Alter the colour palette by setting contrast and saturation. Also includes filters for colour blindness.

Dyslexia: Focus attention by activating readable fonts and pausing animations.

Cognitive & Learning: Increase font sizing, create outlines around titles, headings, and links, and activate the reading guide.

ADHD: Adjust website colour saturation, pause animations to reduce distraction, and enable the reading mask, which spotlights targeted areas of the website. 

Seizure & Epileptic: Eliminate blinking, flashing, or flickering visuals, adjust colour saturation.

Below the profiles is quick access to colour and content menus.

Color Adjustments menu

The “Color Adjustments” menu offers a range of features depending on user requirements.

Contrast: Adjusts the contrast of the website between dark, light, and high contrast.   

Saturation: Adjusts the saturation of the webpage between low, medium, and high.

Color Blind Filters: Adjusts web content to improve accessibility for colour blindness.

Text, Title, and Background Colors: Adjusts the colour for text, title, and background by selecting from the available colours or click the three dots to adjust using the slider.

Highlight and/or Outline Titles, Links, and Buttons: Select to add highlights and outlines to your titles, links, and buttons by selecting from the available colour or click the three dots to adjust using the slider.

Content Adjustments menu

The “Content Adjustments” menu offers a range of features depending on user requirements.

Content Spacing: Choose light, moderate, or heavy horizontal spacing adjustments to your content. For more precise adjustments, select the three dots on the right of the menu to adjust horizontal spacing using the 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 three dots on the right of the menu to adjust font size using the slider.

Line Height:  Add vertical spacing to your content by selecting one of the three levels of adjustments. For more precise adjustments, select the three dots on the right of the menu to adjust vertical spacing using the slider.

Letter Spacing: Add light, moderate, or heavy letter spacing to your content. For more precise adjustments, select the three dots on the right of the menu to adjust letter spacing using the slider.

Readable Fonts: Apply a different font by selecting between Arial, Times, Tahoma, Comic Sans and Open Dyslexic fonts.

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

Cursor: Increase the size of the cursor. 

Hide Images: Hide all images on the webpage.

Pause Animations: Select to pause all animations on the webpage

Reading Mask: Focus on a specific area on the webpage using an adjustable mask. 

Reading Guide:  Focus on a specific line on the webpage whilst reading.