Submit a request
Submit a request

Displaying and Configuring the Accessibility panel in an Assessment

This article details the Accessibility Panel within the Items API.
 

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.

The accessibility panel can be launched via the accessibility panel icon accessibility_latest.png

available in the Items App.

 

The accessibility panel is not loaded by default, but can be added and configured in the navigation properties of the Items API initialisation object.

The property to set in the initialisation object is show_accessibility and can be a boolean true/false OR an object with the following properties:

  • show_colourscheme - (boolean) show the color scheme selection tab, default false
  • show_fontsize - (boolean) show the font size selection tab false
  • show_zoom - (boolean) show the browser zoom instructions tab false

 

All properties are false by default, and show_accessibility will initialise as false if assigned an empty object, or, an object with no enabled properties.

{
    "name": "My activity title",
    "navigation": {
        "show_accessibility": true // show ALL accessibility panel tabs
    },
    // ... other properties ...
}

OR

{
    "name": "My activity title",
    "navigation": {
        "show_accessibility": {
            "show_colourscheme": true, // specify specific tabs (Default false)
            "show_fontsize": true,
            "show_zoom": false
        }
    },
    // ... other properties ...
}

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",
    "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"
                    }
                }
            ]
        }
    },
    // ... other properties ...
}

 

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.

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"});

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);
    }
});

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"
}
Was this article helpful?
0 out of 1 found this helpful

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