grid: selected rows only indicated using colour

[TetraLogicalHelpdesk]

WCAG Level

Level A

Priority

High

Pages/screens/components affected

• Grid

Description

When information is presented using colour, for example to indicate that an element has been selected, that same information must be available without colour or people who have difficulty seeing colours may not be aware that an item was indeed selected.

In the grid selection examples, the Manual Selection with Active Item and the Space Key Action and Click to Activate examples only use colour to indicate when a user has selected a row.

User impact

When colour is the only way information is presented, people with low vision or colour blindness may not realise that a row in the grid was actually selected as a result of their action, or they may miss if a particular row in a grid that was presented to them was already pre-selected.

Required solution

Use an additional visual cue, beyond colour, to indicate that a row was selected. In the case of the other examples in the grid selection page, the checkboxes for each row fulfill this requirement. However, a more subtle approach can also be used. As an example, selected rows could have an additional discreet icon, such as a small tick mark; another alternative may be to include a thicker left-hand border on the selected row.

This solution must be applied to all instances of the issue identified within the test sample, then applied to all other instances of the same issue identified throughout the rest of the components, their variants, and the documentation website.

Test procedure(s)

Use these steps to confirm that the solution has been correctly applied to issues identified within the test sample, and to test the rest of the components, their variants, and the documentation website for instances of the same issue:

1. Check that selected rows in a grid are indicated using an additional visual indicator, and do not rely only on a difference in colour.

Definition of done

Complete all of these tasks before closing this issue or indicating it is ready for retest:

• All issues identified within the test sample have been resolved.
• The rest of the components, their variants, and the documentation website have been tested for the same issue.
• All issues identified throughout the rest of the components/website have been resolved or filed as new issues.

Related standards

• WCAG 2.1 Success Criterion 1.4.1 Use of Color (Level A)

Test data

Test date: March 2021 Website: vaadin.com/components, vaadin.com/docs-beta

[rolfsmeds]

A radio-button column (similar to multiselect grid's checkbox column) would be another way to indicate both selectability and current selection: https://github.com/vaadin/web-components/issues/1334

[rolfsmeds]

The vertical line indicator could easily be provided as a theme variant, however. It would be good to offer regardless of the radio button column proposal mentioned above, for smaller viewports and cases where selectability is obvious from the context.

[jouni]

I would assume that if the selected row colors were inverted (white text on primary blue bg), then there would not be an issue. Just pointing out that option, not necessarily advocating for it.

[rolfsmeds]

That's probably an option too, although that would complicate application of custom styles like background and text colors to cells. The vertical line would seem like a natural choice as Tabs uses a similar way to indicate selection.