Visual item states rely on color alone

adaptlearning / adapt-contrib-narrative

A component that displays an image gallery with accompanying text

GNU General Public License v3.0

5 stars 39 forks source link

Visual item states rely on color alone #288

Closed kirsty-hames closed 2 months ago

kirsty-hames commented 6 months ago

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 commented 6 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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

StuartNicholls commented 5 months ago

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 commented 5 months ago

I prefer the smaller check marks, too