Visual item states rely on color alone

[kirsty-hames]

Subject of the issue

Visual progress of items is represented via .narrative__progress, see screenshot below for progress dots below image. Item states include default, selected and visited. The change in state is represented by color change only (see plugin and Vanilla styles). This information will be difficult or impossible to perceive for individuals with visual disabilities such as low vision or color blindness.

Expected behaviour

Provide a non-color dependent means of identifying current item (selected) and completed items. Some ideas below but please input with any thoughts or suggestions.

Selected state:
Increase the size of the progress item when selected.

Completed state:
Other presentation components display a tick icon for completed items, see screenshots below. Could do similar and display the completion tick within the progress item or as a separate icon over the Narrative image.

[kirsty-hames]

What are peoples thoughts on the following suggestions?

1. Indicators remain small until visited

2. Keep indicators size uniform

Both options display a tick when visited and invert their colours when selected. The tick is displayed at @icon-size (1.5rem) for consistency with other component item visited ticks. This does mean that the indicators are larger than they currently are.

[oliverfoster]

I quite like 2, I'm mildly worried about having too many items and what the indicators would do. Do you have thoughts?

[kirsty-hames]

I quite like 2, I'm mildly worried about having too many items and what the indicators would do. Do you have thoughts?

See below for how the various layouts look with 10 items without any additional styling. "_hasNavigationInTextArea": true needs some consideration otherwise the indicators just wrap for standard layout.

Desktop view:

Medium breakpoint before single column stack:

Mobile view:

[oliverfoster]

Is it best to keep the indicators below the image always, rather moving them with the navigation buttons?

[StuartNicholls]

Is it best to keep the indicators below the image always, rather moving them with the navigation buttons?

This actually gets requested a fair bit, so yeah, let's change it.

[StuartNicholls]

I prefer the smaller check marks, too