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
429 stars 82 forks source link

grid-pro: inline edit fields lack an accessible name #169

Open TetraLogicalHelpdesk opened 3 years ago

TetraLogicalHelpdesk commented 3 years ago

WCAG Level

Level A

Priority

High

Pages/screens/components affected

Description

Without an accessible name, interactive controls will simply be announced as generic "link", "button", "edit" or similar by assistive technologies. Without a role the control will be announced only as text (if an accessible name is provided), or "Clickable" without any further information if the control is interactive but lacks an accessible name or role, or "Blank" if no information at all is provided in the accessibility API.

In vaadin-grid-pro, when a cell is being edited, the control that is presented inside the cell lacks an accessible name - as a result, it is simply announced as a generic "edit" field (or checkbox, radio button, or whatever variation has been set for that cell).

A grid-pro example with a cell being edited

User impact

When an assistive technology user reaches a control without an accessible name or role, they will not be able to ascertain what the control's purpose is. Depending on the browser/assistive technology combination they are using, and how they navigated to the control (using browse mode or forms mode) they may also not be able to activate the controls altogether.

Required solution

Make sure that all form controls have an appropriate accessible name that is conveyed to assistive technologies.

Implementation guidance

The simplest approach for the inline editors is to provide an explicit accessible name using aria-label. We would recommend including information about the specific row number that the editor is in, and any relevant header cells - for instance, taking the example of the simple text editor shown in the description section of this issue, the aria-label could be aria-label="row 2, Last name".

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-pro with inline editing and activate one of the cells for editing.
  3. Make sure that the form control is announced with an actual name and role (e.g. "row 2, Last name, edit") rather than just as generic nameless controls (e.g. "edit")

Definition of done

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

Related standards

More information

Test data

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

web-padawan commented 3 years ago

It should be possible to set aria-label on the field component during its initialization:

https://github.com/vaadin/web-components/blob/69c4b2d896eb087c9933a0380321a0f0c0a5e205/packages/vaadin-grid-pro/src/vaadin-grid-pro-edit-column.js#L348

rolfsmeds commented 2 years ago

This could be fixed in two steps:

  1. Automatically apply an aria-label to edit fields with the same text as the column header.
  2. Provide an aria-label generator so that developers can provide a customized aria-label to each field depending on the item.