WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Design recommendations for complex grids

for

From: Dean.Vasile@outlook.com
Date: Jul 19, 2023 2:22AM

Personally, I did not know the answer to this.
However, I asked my friend chat, GPT, and this is the response. 1. The use of row headers in grids depends on the specific context and requirements of your application. While the APG samples may not include row headers, there are cases where row headers can provide important context and improve accessibility. Row headers can help users understand the relationship between the checkboxes in the first column and the corresponding data in other columns.

If you choose to use row headers, make sure they are associated correctly with the checkboxes and provide clear and concise labels. To ensure that screen readers announce the associated column headers when moving left or right, you can use the `aria-describedby` attribute on the checkboxes, referencing the ID of the corresponding column header. This will provide the necessary context for screen reader users.

It's important to consider the specific requirements and user experience of your application, so consulting with accessibility experts and involving user testing can help determine the most effective approach.

2. When there are multiple interactive assets within a grid cell, it's essential to provide clear and consistent interaction patterns to avoid confusion for users. You can consider using appropriate ARIA roles, states, and properties to describe the interactive elements within the cell.

For example, you can use the `aria-haspopup` attribute to indicate that an interactive element, such as a button, has a popup or dropdown associated with it. You can also use ARIA roles like `role="textbox"` for input fields and `role="combobox"` for combo boxes.

Providing clear instructions or labels for each interactive element and ensuring proper keyboard focus management are crucial for a better user experience. It's recommended to conduct usability testing and gather feedback from users to refine and improve the design of complex interactive grids.

Unfortunately, I don't have a specific reference link to a working sample with all the mentioned interactive assets in a grid cell. However, there are several accessible pattern libraries available that provide examples and best practices for designing complex grids, such as the WAI-ARIA Authoring Practices guide, the Inclusive Components website, or resources from reputable accessibility organizations like WebAIM or the Paciello Group.

Remember to consider the WCAG success criteria and aim for a design that is both accessible and usable for all users.

Dean Vasile


617-799-1162

> On Jul 19, 2023, at 3:22 AM, megha patangi < <EMAIL REMOVED> > wrote:
>
> I have two questions with regards to complex grids, as follows. Even
> referred APG samples, but could not find similar ones.
>
> 1. Do we need row headers in grids? APG samples do not have, and also
> its mentioned that role="rowheader" is not required in grids, but we
> have clients requirements for this.
> We have grids (interactive tables) where first column is checkboxes
> followed by data columns. if we navigate vertically in checkbox column
> there is no context what to select. for this if we try rowheader then
> observed that while moving left/ right when we come to this column
> (which is assigned as row header), SR is not reading its associated
> column header. it is read for other columns.
> Question - do we need row headers in these use cases? if we provide
> some context only to checkboxes by any means and avoid row header
> concept for overall grid (which will not give context while navigating
> in other columns), will this be fine in terms of WCAG as well as user
> experience?
>
> 2. When we have input/ combo boxes in grids APG samples show them as
> button and then in turn activating this brings the input box.
> What if we have multiple interactive assets in a cell like - multiple
> input, combination of combo and input, list of links or buttons, etc?
> how to design it better?
> Any reference link of working sample will be of great help.
>