Displaying and Configuring the Accessibility Panel in an Assessment – Learnosity Product & Developer Help

This article details the Accessibility Panel within the Items API.

Overview

The Accessibility Panel is a modal window that allows users to adjust visual settings of the Items API.
The settings are configurable when initialising the Items API.
The settings available to change via the accessibility panel are:

Ability to change the Items App color scheme.
Ability to change the font sizes of Items with the assessment.
Contextual instructions for using browser based content zooming.

Launching the Accessibility Panel

The accessibility panel can be launched via the accessibility panel icon

available in the Items App.

Initialising the Accessibility Panel

The accessibility button is displayed by default, when loading Items API with “rendering_type”: “assess”, and a preset layout.

When customising the regions (see this article for more details), you’ll have the option to specify if and where to display the Accessibility button, and display of the following properties:

Colorscheme_option - (boolean) show the color scheme selection tab. True by default.
Fontsize_option - (boolean) show the font size selection tab. True by default.
Zoom_option - (boolean) show the browser zoom instructions tab. True by default.

All properties are true by default.

{
    "name": "My activity title",
    "config": {
        "regions": {
            "right":[
            {
                "type": "accessibility_button"
            }
            ]
        }
    },
    // ... other properties ...
}

OR

{
    "name": "My activity title",
    "config": {
        "regions": {
            "right":[
                {
                    "type": "accessibility_button",
                    "colorscheme_option": true,
                    "fontsize_option": false,
                    "zoom_option": false
                }
            ]
        }
    },
    // ... other properties ...
}

Custom Color Schemes

The accessibility panel color scheme tab can be loaded with custom color schemes or palettes.

This can be done by passing in custom palette information into the configuration property of the Items API initialisation object, or via a public method after the Items app instance is ready.

There are currently 40 different colors that can be set to create a custom scheme:

content-color
content-color-subheading
content-color-toolbar
content-color-widget
content-color-hover
content-color-active
content-color-link
content-color-link-hover
content-color-link-visited
content-color-neutral
content-background
content-background-highlight
content-background-highlight-hover
content-background-correct
content-background-incorrect
content-background-selected
content-border
content-border-correct
content-border-incorrect
content-border-focus
widget-background
widget-background-hover
widget-background-active
widget-background-toolbar
well-color
well-color-highlight
well-color-grayed
well-color-toolbar
well-background
well-background-highlight
well-background-grayed
well-background-toolbar
progress-background
progress-color
button-color
button-color-highlight
button-background
button-background-highlight
button-background-hover
button-background-highlight-hover

Setting up custom color palettes within the configuration object takes the following form:


{
    "name": "My activity title",
    "config": {
        "regions": {
            "right":[
            {
                "type": "accessibility_button"
            }
            ]
        }
    },

{ 
	"name": "My activity title", 
  "config": { 
  	"configuration": {
    	//The configuration contrast property supports custom palettes when used as an object
			"contrast": { 
      	//The active property sets the initial active palette - this can be updated via public method 
        "active": "Example_1", 
        	//custom_palettes is an array of palette objects 
          "custom_palettes": [ { 
          //Each palette object has an optional name (required if you want to programatically set the palette) 
          	"name": "Example_1", 
            //... and a color scheme object that uses the color replacement keys from above. At least one valid color must be present to create a palette 
            "colors": 
            {
            	"content-background": "#ffffff", 
              "content-color": "#000000", 
              "content-color-hover": "#cccccc" } },
              { 
              	"name": "Example_2", 
                "colors": { 
                "content-background": "#ffffff", 
                "content-color": "#000000", 
                "content-color-hover": "#cccccc" 
              	} 
            	} 
           	] 
          } 
        } 
      } 
    } 
  }

Custom palettes can also be added via public the public method addAccessibilityPalettes.

This public method requires that the Items App instance is ready, and can take the following form:

var itemsApp = LearnosityItems.init(initObject, className, {
    readyListener: function () {
        itemsApp.assessApp().addAccessibilityPalettes([
            {
                "name": "Example Custom Palette",
                "colors": {
                    "content-background": "#D1E7E4",
                    "content-color": "#371B33",
                    "content-color-hover": "#52284C",
                    "button-background-hover": "#BCDCD8",
                    "button-background": "#52284C",
                    "button-background-highlight": "#7B3D72",
                    "button-background-highlight-hover": "#A45198",
                    "button-color": "#E4F1EF",
                    "button-color-highlight": "#F2F8F7",
                    "content-color-subheading": "#52284C",
                    "progress-color": "#52284C",
                    "content-border": "#52284C",
                    "widget-background": "#AFD5D0",
                    "widget-background-toolbar": "#AFD5D0"
                }
            }
        ]);
    }
);

Note Using custom palettes will replace the default accessibility palettes.
If you would like to re-use some of the defaults, the custom palette objects are included at the end of this page.

Public Methods

There are two public methods for configuring accessibility within the Items API:

setAccessibility
addAccessibilityPalettes

addAccessibilityPalettes accepts an array of color palette objects and is detailed above.

setAccessibility accepts an accessibility configuration object with two properties:

contrast - (string) (optional)
fontSize - (string) (optional)

fontSize accepts any of the following: small, normal, large, xlarge, xxlarge

contrast accepts the keyword of any of the default color palettes, as well as the assigned name of any custom palette. E.g. black-on-white, rose-on-green, yellow-on-blue, black-on-rose, light-gray-on-dark-gray, white-on-black

itemsApp.assessApp().setAccessibility({"contrast": "black-on-white", "fontSize": "large"});

Label bundle

The usual set of label bundle options are available for the accessibility panel.

var itemsApp = LearnosityItems.init(initObject, className, {
    // We assign our ready listener since accessibility public methods require all dom elements to be prepared
    readyListener: function () {
        document.getElementById('add-custom-palette').addEventListener("click", function() {
                // We add a simple limited custom palette called blue paper
                itemsApp.assessApp().addAccessibilityPalettes([
                    {
                        "name": "Blue Paper",
                        "colors": {
                            "content-background": "#D1E7E4",
                            "content-color": "#371B33",
                            "content-color-hover": "#52284C",
                            "button-background-hover": "#BCDCD8",
                            "button-background": "#52284C",
                            "button-background-highlight": "#7B3D72",
                            "button-background-highlight-hover": "#A45198",
                            "button-color": "#E4F1EF",
                            "button-color-highlight": "#F2F8F7",
                            "content-color-subheading": "#52284C",
                            "progress-color": "#52284C",
                            "content-border": "#52284C",
                            "widget-background": "#AFD5D0",
                            "widget-background-toolbar": "#AFD5D0"
                        }
                    }
                ]);
        }, true);

        document.getElementById('set-custom-palette').addEventListener("click", function() {
            // We use the setAccessibility public method to set using our custom "non accessibility panel" control
            itemsApp.assessApp().setAccessibility({"contrast": "Blue Paper"});
        }, true);

        document.getElementById('unset-custom-palette').addEventListener("click", function() {
            // We re-set the active color palette to the default black on White
            itemsApp.assessApp().setAccessibility({"contrast": "black-on-white"});
        }, true);
    }
});

Default Color Palettes

The default accessibility color palettes with their contrast ratios are listed below:

// Rose on green - Contrast Ratio: 4:62:1
{
    "content-color":                         "#a9306f",
    "content-color-subheading":              "#CE5091",
    "content-color-toolbar":                 "#962b63",
    "content-color-widget":                  "#73214b",
    "content-color-hover":                   "#4f1634",
    "content-color-active":                  "#fff5fb",
    "content-color-link":                    "#CE5091",
    "content-color-link-hover":              "#DB80AF",
    "content-color-link-visited":            "#7F2453",
    "content-color-neutral":                 "#000000",
    "content-background":                    "#C7E4D3",
    "content-background-highlight":          "#ffff99",
    "content-background-highlight-hover":    "#fcfcd3",
    "content-background-correct":            "#e7f4e1",
    "content-background-incorrect":          "#fbdddd",
    "content-background-selected":           "#fcfcd3",
    "content-border":                        "#74bc95",
    "content-border-correct":                "#62ae41",
    "content-border-incorrect":              "#da1919",
    "content-border-focus":                  "#CE5091",
    "widget-background":                     "#75BD93",
    "widget-background-hover":               "#50A573",
    "widget-background-active":              "#3C7C56",
    "widget-background-toolbar":             "#ACD7BE",
    "well-color":                            "#a9306f",
    "well-color-highlight":                  "#a9306f",
    "well-color-grayed":                     "#9e2d68",
    "well-color-toolbar":                    "#c43881",
    "well-background":                       "#E3F2E9",
    "well-background-highlight":             "#BADEC9",
    "well-background-grayed":                "#c9d8cf",
    "well-background-toolbar":               "#F1F8F4",
    "progress-background":                   "#f5f5f5",
    "progress-color":                        "#CE5091",
    "button-color":                          "#73214b",
    "button-color-highlight":                "#C7E4D3",
    "button-background":                     "#75BD93",
    "button-background-highlight":           "#CE5091",
    "button-background-hover":               "#5AAF7D",
    "button-background-highlight-hover":     "#BF367D"
}

// Yellow on Blue - Contrast Ratio: 7.15:1
{
    "content-color":                         "#fff25d",
    "content-color-subheading":              "#fff25d",
    "content-color-toolbar":                 "#f7e800",
    "content-color-widget":                  "#e8d900",
    "content-color-hover":                   "#d9cb00",
    "content-color-active":                  "#ccbf00",
    "content-color-link":                    "#FFF585",
    "content-color-link-hover":              "#FFF799",
    "content-color-link-visited":            "#FFEC1F",
    "content-color-neutral":                 "#000000",
    "content-background":                    "#2d4e84",
    "content-background-highlight":          "#ffff99",
    "content-background-highlight-hover":    "#fcfcd3",
    "content-background-correct":            "#e7f4e1",
    "content-background-incorrect":          "#fbdddd",
    "content-background-selected":           "#fcfcd3",
    "content-border":                        "#fff25d",
    "content-border-correct":                "#62ae41",
    "content-border-incorrect":              "#da1919",
    "content-border-focus":                  "#fff25d",
    "widget-background":                     "#243F6A",
    "widget-background-hover":               "#1F365B",
    "widget-background-active":              "#1A2D4C",
    "widget-background-toolbar":             "#2A487A",
    "well-color":                            "#30538c",
    "well-color-highlight":                  "#d9cb00",
    "well-color-grayed":                     "#2b4b80",
    "well-color-toolbar":                    "#31548f",
    "well-background":                       "#FFFCD6",
    "well-background-highlight":             "#1F365B",
    "well-background-grayed":                "#EBEBEB",
    "well-background-toolbar":               "#FFFDEB",
    "progress-background":                   "#f5f5f5",
    "progress-color":                        "#1A2D4C",
    "button-color":                          "#e8d900",
    "button-color-highlight":                "#2d4e84",
    "button-background":                     "#243F6A",
    "button-background-highlight":           "#fff25d",
    "button-background-hover":               "#1A2D4C",
    "button-background-highlight-hover":     "#FFF047"
}

// Black on Rose - Contrast Ratio: 10.42:1
{
    "content-color":                         "#000000",
    "content-color-subheading":              "#1F1F1F",
    "content-color-toolbar":                 "#141414",
    "content-color-widget":                  "#212121",
    "content-color-hover":                   "#292929",
    "content-color-active":                  "#303030",
    "content-color-link":                    "#292929",
    "content-color-link-hover":              "#3D3D3D",
    "content-color-link-visited":            "#525252",
    "content-color-neutral":                 "#000000",
    "content-background":                    "#d1aad5",
    "content-background-highlight":          "#ffff99",
    "content-background-highlight-hover":    "#fcfcd3",
    "content-background-correct":            "#e7f4e1",
    "content-background-incorrect":          "#fbdddd",
    "content-background-selected":           "#fcfcd3",
    "content-border":                        "#ba80c0",
    "content-border-correct":                "#62ae41",
    "content-border-incorrect":              "#da1919",
    "content-border-focus":                  "#1F1F1F",
    "widget-background":                     "#E1C8E4",
    "widget-background-hover":               "#E9D6EB",
    "widget-background-active":              "#F0E4F2",
    "widget-background-toolbar":             "#DABBDD",
    "well-color":                            "#383838",
    "well-color-highlight":                  "#141414",
    "well-color-grayed":                     "#aabbcc",
    "well-color-toolbar":                    "#aabbcc",
    "well-background":                       "#F8F1F8",
    "well-background-highlight":             "#DABBDD",
    "well-background-grayed":                "#EBEBEB",
    "well-background-toolbar":               "#ffffff",
    "progress-background":                   "#f5f5f5",
    "progress-color":                        "#000000",
    "button-color":                          "#212121",
    "button-color-highlight":                "#cfcfcf",
    "button-background":                     "#E1C8E4",
    "button-background-highlight":           "#1F1F1F",
    "button-background-hover":               "#D2ADD7",
    "button-background-highlight-hover":     "#333333"
}

// Medium Grey on Light Grey - Contrast Ratio: 5.47:1
{
    "content-color":                         "#575757",
    "content-color-subheading":              "#666666",
    "content-color-toolbar":                 "#4f4f4f",
    "content-color-widget":                  "#424242",
    "content-color-hover":                   "#3d3d3d",
    "content-color-active":                  "#333333",
    "content-color-link":                    "#707070",
    "content-color-link-hover":              "#858585",
    "content-color-link-visited":            "#474747",
    "content-color-neutral":                 "#000000",
    "content-background":                    "#e0e0e0",
    "content-background-highlight":          "#ffff99",
    "content-background-highlight-hover":    "#fcfcd3",
    "content-background-correct":            "#e7f4e1",
    "content-background-incorrect":          "#fbdddd",
    "content-background-selected":           "#fcfcd3",
    "content-border":                        "#ADADAD",
    "content-border-correct":                "#62ae41",
    "content-border-incorrect":              "#da1919",
    "content-border-focus":                  "#333333",
    "widget-background":                     "#C2C2C2",
    "widget-background-hover":               "#B8B8B8",
    "widget-background-active":              "#ADADAD",
    "widget-background-toolbar":             "#D6D6D6",
    "well-color":                            "#5b5d5e",
    "well-color-highlight":                  "#424242",
    "well-color-grayed":                     "#4f4f4f",
    "well-color-toolbar":                    "#606263",
    "well-background":                       "#EBEBEB",
    "well-background-highlight":             "#C2C2C2",
    "well-background-grayed":                "#D6D6D6",
    "well-background-toolbar":               "#F5F5F5",
    "progress-background":                   "#f5f5f5",
    "progress-color":                        "#ADADAD",
    "button-color":                          "#424242",
    "button-color-highlight":                "#e0e0e0",
    "button-background":                     "#C2C2C2",
    "button-background-highlight":           "#575757",
    "button-background-hover":               "#ADADAD",
    "button-background-highlight-hover":     "#474747"
}

// White on Black - Contrast Ratio: 21:1
{
    "content-color":                         "#ffffff",
    "content-color-subheading":              "#EBEBEB",
    "content-color-toolbar":                 "#000000",
    "content-color-widget":                  "#000000",
    "content-color-hover":                   "#000000",
    "content-color-active":                  "#000000",
    "content-color-link":                    "#EBEBEB",
    "content-color-link-hover":              "#F5F5F5",
    "content-color-link-visited":            "#D6D6D6",
    "content-color-neutral":                 "#000000",
    "content-background":                    "#000000",
    "content-background-highlight":          "#ffff99",
    "content-background-highlight-hover":    "#fcfcd3",
    "content-background-correct":            "#e7f4e1",
    "content-background-incorrect":          "#fbdddd",
    "content-background-selected":           "#fcfcd3",
    "content-border":                        "#777777",
    "content-border-correct":                "#62ae41",
    "content-border-incorrect":              "#da1919",
    "content-border-focus":                  "#f0f0f0",
    "widget-background":                     "#dddddd",
    "widget-background-hover":               "#e8e8e8",
    "widget-background-active":              "#f0f0f0",
    "widget-background-toolbar":             "#4d4d4d",
    "well-color":                            "#575757",
    "well-color-highlight":                  "#424242",
    "well-color-grayed":                     "#4f4f4f",
    "well-color-toolbar":                    "#5e5e5e",
    "well-background":                       "#E0E0E0",
    "well-background-highlight":             "#C2C2C2",
    "well-background-grayed":                "#D6D6D6",
    "well-background-toolbar":               "#EBEBEB",
    "progress-background":                   "#f5f5f5",
    "progress-color":                        "#858585",
    "button-color":                          "#000000",
    "button-color-highlight":                "#000000",
    "button-background":                     "#dddddd",
    "button-background-highlight":           "#ffffff",
    "button-background-hover":               "#CCCCCC",
    "button-background-highlight-hover":     "#EBEBEB"
}