cgkineo / adapt-visua11y

An extension which provides visual accessibility improvements

adapt-visua11y

Visua11y is an extension for the Adapt framework. It provides visual accessibility improvements.

• Color profiles (achromatopsia, protanopia, deuteranopia, tritanopia, dyslexia)
• High contrast
• No transparency
• Low brightness
• Invert
• No animations
• Hide decorative images
• Font size (small, medium, large)
• Line height (small, medium, large)
• Paragraph spacing (small, medium, large)
• Letter spacing (small, medium, large)
• Word spacing (small, medium, large)

Note

• IE11 cannot apply filters. This means that images and videos will not be transformed in IE11.
• Invert only inverts brightness, not colour.
• Line height, paragraph spacing, letter spacing and word spacing are all ratio based. 1 is the current value, 1.2 is and uplift by 20%, 0.9 would be a shift downwards by 10%.
• In order to support paragraph spacing, all body text needs to be wrapped in paragraph tags.
• Font size medium is the default font size (16px usually), large is 18pt, small is 9pt.
• Hide decorative images is contingent on alt text.
• No transparency removes box-shadow (where transparency is used), text-shadow and opacity styles.

Theme considerations

• All colour transformations are applied by mathematical shifts. It is therefore important that the course start from AA colour contrast for the algorithms to be applicable.
• Any custom CSS background-image will need to explicitly define support for colour profiles. For example:

html:not([data-color-profile=default]) {
  .selector-with-css-bg-image {
    .visua11y-filters;
  }
}

• For any text that overlays a background image, ensure an appropriate background-color is set to provide sufficient contrast in the instance decorative images are hidden ("_noBackgroundImages": false).

---

Author / maintainer: Adapt Core Team with contributors
Accessibility support: WAI AA
Cross-platform coverage: Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 12+13 for macOS/iOS/iPadOS, Opera

adapt-visua11y's Issues

NVDA - reads both reset and close buttons simultaneously

Issue

NVDA reads both reset and close buttons simultaneously. Issue is due to reset and close buttons being inline within the pop up.

Proposed fix

Introduce a container that has display: flex; to restyle the buttons visual appearance and resolve the NDVA reading error

'no background images' no longer hides Vanilla and Boxmenu background images

This is since the following amends were made to apply the background-image to it's own div.

adaptlearning/adapt-contrib-vanilla#334
adaptlearning/adapt-contrib-boxMenu#119

modifiers.less just needs updating to target the .background element instead.

Schema title clean up

In the schema there are some defaults and titles they need tweaking to mirror other entries.

No option to show Close button at the top

There is currently no option to show the Close button at the top of the popup.

Applying tranform to .page can break fixed-position elements

adapt-visua11y/less/modifiers.less

Line 78 in 91e51ab

transform: translateZ(0); /*for older browsers*/

The .page div is using transform: translateZ(0px). Any fixed-position element that's inside of .page will now be positioned relative to .page rather than the viewport since applying a transform creates a new stacking context. https://www.darrenlester.com/blog/why-fixed-position-element-not-relative-to-viewport

For example, in Scrollsnap 3.1.4 (not sure about the latest version), the Scrollsnap button bar is using position: fixed and bottom: 0 to put it at the bottom of the browser window. This button bar lives inside of the .page div. Once a block is unlocked, the .page div naturally expands in height to show the next block. This causes the button bar that should be docked to the bottom of the browser window to now be docked further down and offscreen since bottom: 0 is relative to .page and not the viewport. I've also had this issue with trying to show a fixed position Trickle bar at the bottom of the window.

There is a comment in the .less that the transform is "for older browsers." Is this still needed? Which older browsers need this style? Is it possible to remove this style without breaking overall functionality?

Visua11y settings

Options in Visua11y settings pop-up, can get confused. Noted behaviour:

New projects appear to have all options preselected (needs confirming)

De-selecting options sometimes aren't remembered. User needs to deselect one option, close. Reopen deselect another option, then close etc

Checkbox labels

• Add aria-hidden='true' to label element
• Add aria-label={config._highContrast.title} to each checkbox

<div className='visua11ysettings__item highcontrast'>
  <label className='visua11ysettings__item-label' htmlFor='highContrast' aria-hidden='true'>
    <div className='icon'></div>
    {config._highContrast.title}
  </label>
  <input type='checkbox' id='highContrast' name='highContrast' checked={visua11y.highContrast} onChange={onChange} aria-label={config._highContrast.title} />
</div>

NVDA reads: Checkbox, not checked. High contrast.

Will need testing in JAWS

Visual display settings don't get applied to CSS background-image

Visual display settings don't get applied to css background-image (whether Vanilla theme config or defined in the LESS) but they do get applied to content graphics <img>. I think either the same settings should apply to background-image otherwise these should be removed. Without settings being applied this causes further display issues e.g. black text is inverted to white but the background image remains light coloured.

I can provide project examples.

Sole use of color to convey selection

Bug Description:

Readability radio options in the accessibility dialog rely on a background color change alone to indicate selection of a radio item. For users with low vision or color blindness, this change may not be perceivable.

Steps to Reproduce:

1. Using a keyboard, activate the "Accessibility" button in the header.
2. Navigate to the readability section and note the difference in presentation between the selected options and unselected options.

Actual Behavior:

Selected options are presented with black text on a gray background, while unselected options are presented with black text on a white background.

Expected Behavior:

Provide a non-color dependent visual indicator of selection, for example and underline to ensure clear and consistent identification of the selected option for all users.

Groupings

• Remove list w/ items and replace with multiple groups

<div className='visua11ysettings__group visua11ysettings__group-visualdisplay' role='group' aria-labelledby='visualdisplay'>
  ...
</div>

<div className='visua11ysettings__group visua11ysettings__group-distractions' role='group' aria-labelledby='distractions'>
  ...
</div>

'No background images' doesn't apply to background-image configured via Vanilla theme settings

When _noBackgroundImages is enabled, any background-image configure via Vanilla remains within the course. I would expect this to get background-image: none.

When background-image is configured via Vanilla, the element gets the class .has-bg-image. I tried overriding this with the following but the !important gets stripped out.

.a11y-no-background-images .has-bg-image {
  background-image: none !important;
}

Any thoughts?

Fix nesting on v1 schema _globals

Subject of the issue/enhancement/features

The globals need to be nested inside an _extensions object (in legacy AAT this was added automatically).

Debugging Visu11y CSS

Suggest changing the visua11y modified CSS to building its own selectors / stylesheet rather than injecting new css to aid debugging in complex courses.

Add support for tooltip API

For consistency with other navigation buttons when tooltips are enabled, Visua11y should support the Core tooltip API adaptlearning/adapt-contrib-core#207

Note, Visua11y does already include a tooltip which also acts as the button aria-label but I think it makes sense to align this with other navigation buttons for consistency unless there's good reason for this to remain as is? I've already had to implement this on a project so it just needs tidying up.

Add 'a11y-invert' class selector for custom theme styles

When 'invert' is enabled, I've had instances where contrast is quite poor for the inverted colours or further styling might be required for readability.

For some settings (high contrast, no animations, no background images), a class gets appended to the html. I'd like to see similar for 'invert'.

Add data-order to support the sorting of navigation buttons

For consistency with other navigation buttons, Visua11y should support data-order to meet AA accessibility adaptlearning/adapt-contrib-core#61

Unless all navigation buttons support data-order the display order won't be entirely configurable.

Form fields unresponsive no effect (uncaught error: Cannot convert string to number)

Hi,

I would love to use this but having some issues with it in practice.

Issue

Each checkbox has to be clicked twice before the checkbox shows as unchecked. However, no effect is had after selecting these.

Additionally selecting any of the colour profiles from drop-down menu has no effect, as well as the readability settings.

On selecting any of these options an uncaught error is shown in the console:

I'm not sure if this is perhaps a conflict elsewhere with other extensions. In the test these are the active extensions;

When testing in a project with the vanilla theme and only a text component, the functionality worked as intended.

I've tested with the current master branch, framework 5.19.5 and the authoring tool.

Apologies in advance if this isn't specific enough but I will try and provide more info if required.

Thanks
Ross

Requesting event trigger

Subject of the issue/enhancement/features

I would like to add an event trigger to this plug-in for the purposes of enhancing other experiences & capabilities such as data gathering. I will create a pull request for this enhancement.

Missing guard clause

The guard clause is missing in the onAdaptStart() function.

line 204

safari not applying filters immediately

Theme background images break styling

Theme background images should be in their own element rather. This is to prevent filters from bleeding into their descendants.

a11y-no-background-images breaks Narrative when img tags have aria-hiddden

a11y-no-background-images hides img tags that don't have alt text. For Narrative, the controls become hidden as the height of .narrative__slide-container becomes 0 and overflow-x: hidden hides the controls preventing navigation between the items.

I suggest we include a component override in the modifiers.less when no background images are enabled.

Missing RTL support

A few CSS tweaks needed to reverse the checkbox, icons and item padding for RTL layout.

Readability padding amend

Issue

Out of the box, some of the readability options drop onto two lines due to some additional padding.

Solution

Add a padding override in for the readability section to widen the space available.

Contrast

Issue:
Low brightness text and background colour both converge to either black or white

background: #e2acff
text: #58009c

Solution:
Override output of specific colours OR change colour high contrast brightness threshold

Missing heading semantics for section headings

Bug Description:

Headings in the accessibility dialog do not have equivalent heading structure associated.

Steps to Reproduce:

Using a screen reader, activate the "Accessibility" button in the header.
In the accessibility dialog, use the H shortcut or the virtual cursor to identify any headings in the dialog. 

Actual Behavior:

Immersive experience heading without heading structure:

Immersive experience

Expected Behavior:

Apply heading structure for screen readers with 'role' & 'aria-level' attributes much like our other headers.

Missing label for dialogs

Bug Description:

The visua11y dialog does not have a meaningful label to identify its purpose.

Steps to Reproduce:

Using a screen reader, activate the visua11y button in the header.
On entry into the accessibility dialog, note the dialog description. 

Actual Behavior:

Dialog with aria-labelledby referencing an invalid id:

Expected Behavior:

Ensure a valid label is associated with the accessibility dialog using either aria-label or aria-labelledy with a valid id reference.

Firefox filters not applying

Colour Profiles in Safari

Currently the colour profile options do not work in Safari.

No visual keyboard focus on Readability options

Bug Description:

Readability radio options in the accessibility dialog do not display a visual indication of keyboard focus. This makes it difficult for keyboard only users to target a specific grouping and change the selection of the grouping.

Steps to Reproduce:

1. Using a keyboard, activate the "Accessibility" button in the header.
2. Navigate to the readability section and note the presentation of visual focus.

Expected Behavior:

Ensure a clear and consistent indication of visual focus is applied to all Readability options. Visual focus is most commonly implemented using the CSS outline property. The visual focus must be well-defined with a minimum color contrast of 3.0:1 with surrounding content.

Add support for modifying CSS via keyframes

Subject of the enhancement

CSS applied via keyframes are excluded from site of visua11y.

Expected behaviour

Open up CSS applied via keyframes so visua11y can apply filters to them as required.

Colour profile namespace conflict

The colour profile filters can cause conflicts with other plugins. Adding an adapt-visua11y prefix resolves the issue.

CSS inherit

Visua11y seems to be nescient of css inherit. So colours inherited from higher up the tree will be overwritten with colours in selectors set on that node. Especially problematic if visua11y is installed at a later date.

It maybe that we just need to set colours explicitly and avoid using inherit altogether if this adds too much complexity to the processing.

Reading order of elements in accessibility dialog is illogical

Bug Description:

The reading order of elements in the help dialog currently places all accessibility settings before the dialog heading and description at the top of the dialog. This may generate a different understanding of page content for screen reader users as that received by visual users.

Steps to Reproduce:

1. Using a screen reader, activate the "Accessibility" button in the header.
2. On entry into the accessibility dialog, begin navigating through the dialog contents and note the order in which content is read.

Expected Behavior:

Ensure the reading order is organized in a manner that preserves understanding of the contents of the accessibility dialog. The reading order can be adjusted by rearranging the order of elements in the DOM to match their visual reading order.

Hover state sticking when nav button selected

I've had this issue reported on a project and I've been able to replicate elsewhere.

When selecting the nav button .visua11y-btn to open the visua11y settings, the hover state remains on the button until you hover over the button again.

The hover state itself is inherited from the generic nav button class .nav__btn which styles are set in Vanilla's nav.less - the issue only occurs for this button however....

UI

ui elements

0. Preview of impact
   a) Image of mini adapt
   b) Reset button
1. Color profiles
   a) Default
   b) Greyscale (Achromatopsia)
   c) Red/green (Protanopia)
   d) Green/red (Deuteranopia)
   e) Blue/yellow (Tritanopia)
   f) Yellow tint (Dyslexia)
2. High contrast / Default
3. Low brightness / Default
4. No transparency / Default
5. Invert / Default
6. No animations / Default
7. No background images / Default
8. Fonts
   a) Size
   b) Line height
   c) Paragraph spacing
   d) Letter spacing
   e) Word spacing

Visua11y / PLP line-height conflict

The line height manipulation within the visua11y plugin is causing a conflict with the PLP navigation btn.

The PLP plugin has a style that sets the line height of the PLP nav button to 0. This style is required to ensure the height of the parent container matches that of its children.

When installed and enabled, the visually plugin is overriding this line height value and setting it equal to the default set in course json. This default, presumably, is required for the main body text so can't be removed.

If a style is added to the build to force the line height to 0 line-height: 0 !important;, this value is subsequently overridden and changed to 1.

Unfinished

TODO

• Finialise UI
• Finialise visual profiles for different user groups

Add new schema files

Subject of the issue/enhancement/features

Updated schema missing from repo

Default

Is it possible to have the 'Reset' status as the default initial view and then learners select the options to apply?

Add event trigger for tracking

Subject of the issue/enhancement/features

I require an event trigger to begin gathering data on what options are being selected by users.

Accessibility settings enabled by default (Even in incognito window and from different urls)

Hi,

When I preview a course from the authoring tool with the plugin enabled, even in an incognito window all the settings appear to be applied by default when the course loads.

The modal looks like this:

As you can see multiple colour shifts are happening because multiple options are checked by default.

There is an issue appearinng when I inspect with browser tools

It's receiving a string it's not expecting rather than a boolean value.

Aria Labels for settings pop

Aria labels are required on the following items to prevent them being read out by aa screen reader.

Preview:
Title & para drop cap.

Options:
All icons

Additionally some of the options aren't being read out.

text-shadow + box-shadow support

Subject of the issue

Add support for text-shadow and box-shadow

cookie storage rules

Is there a potential issue with storing the selections in a cookie without informing users or at least making the client aware?
Not all Adapt content is built for internal client use, so not sure if this impacts the decision on whether cookies can be used without agreement. There isn't any personal data stored but not sure on the rules for The Cookie Law.

Could the data be saved to via Adapt.offlineStorage for use with SCORM or xAPI, or does it take up too much space for SCORM cmi.suspend_data?

Sluggish behaviour in Safari and iOS

The filter that is applied to images is causing the slowdown on Mac Safari & Safari OS. See line 24 of modifiers.less

needs:

transform: translateZ(0); /*for older browsers*/
will-change: transform;

Consider changing 'no background images' to 'hide decorative images'

Subject of the issue

The checkbox 'no background images' is rather confusing as it refers more to decorative imagery rather than exclusively background imagery (in HTML terms).

Your environment

• Master

Expected behaviour

Change 'no background images' checkbox title to 'hide decorative images'

Add aria hidden to preview

• Exclude preview from screen reader, does not seem to provide any context to user

<div className="preview" aria-hidden="true">
  ...
</div>

modifiers.less

Could we make the two selectors that contain filters utilise a mixing please?

This will make it easier to add additional selectors for unsupported plug-ins and extensions without the need to modify the visua11y plug-in.

Considerations for custom theme styles

When creating custom themes there's additional effort required for setting up custom styles to support the Visua11y settings. It would be useful to capture these and document in the README etc.

To get started but please add any further in comments.

• Any custom CSS background-image should support colour profiles

html:not([data-color-profile=default]) {
  .selector-with-css-bg-image {
    .visua11y-filters;
  }
}