search

vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
426 stars 81 forks source link

Best practice - grid-pro: editable column headers don't convey their interactive nature #170

Open TetraLogicalHelpdesk opened 3 years ago

TetraLogicalHelpdesk commented 3 years ago

Pages/screens/components affected

Description

Editable cells currently don't convey the fact that they are editable to assistive technology users.

Example of a grid with editable cells

User impact

When an assistive technology user reaches an editable grid cell, their screen reader will not announce the cell any differently from a regular "static" cell. Unless it's clear from the context, users may not even be aware that a cell is editable.

Suggested solution

There is no one clear programmatic solution to this particular issue. One approach that we would suggest is to make sure that the column header (if all cells in that column are editable, but cells in other columns aren't) could contain a hint, such as additional "(editable)" text, to inform users. Alternatively, this could be conveyed as part of an instruction/description. Lastly, if a table can include a mix of static and editable cells (not just limited to a column - any cell in a table could be either editable or static), another approach may be to include "editable" as part of the accessible name of those cells. This could be combined with the use of an actual visible icon (like a little edit/pen icon), acting as its text alternative. This would then benefit all users, not just assistive technology users.

It may be advisable to also mention this to authors in the documentation.

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 website for instances of the same issue:

  1. Turn on your screen reader
  2. Navigate through the grid with editable cells.
  3. Verify that editable cells announce the fact that they are, in fact, editable.

Definition of done

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

Related standards

Test data

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

web-padawan commented 3 years ago

Options to handle this:

  1. add (editable) suffix to header
  2. add an actual visible icon to editable cells
  3. add aria-label attribute to editable cells
rolfsmeds commented 10 months ago

In a similar scenario, the APG pattern for editable grids exposes editable cells as button elements to indicate they're toggle-able/interactive. https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/data-grids/