Need template/process for communicating accessibility related aspects of design

[seanforyou23]

Design template needed for identifying accessible names in interactive components

I'd like to propose we introduce a somewhat formal means of identifying accessibility-related design concepts in design deliverables to be used as part of the design documentation for every component. Ultimately, this would be an enhancement to the existing design process.

Today, it's almost always the case that we end up with duplicate accessible names for critical interactive controls, which makes the accessible experience (AX) not great. For example, we end up with views that are represented as like below (Notice the duplicate text "Actions collapsed popup buton" which doesn't distinguish between table items)

This problem exists across many of our existing components and it would be good to solve them all in a simple and same manner.

Here's an example of a simple way we can document what the accessible names should be for component elements that may have many instances on a same page.

The main thing to notice in this example is that the accessible name for the edit icon button uses a format which is the text "Edit" followed by the name of the thing it is going to edit. This is critical because, without it, every edit button simply reads "Edit" to assistive technology - which doesn't signify which thing the user is actually editing.

This format should be used for all labels in similar interactions like expanding/deleting/selecting/etc.

IMO the definition for done for this issue would be to have delivered said design documentation for the existing components which currently exhibit this problem. These cases are easily identifiable by driving the documentation site with a screen reader of your choice.

What do others think? Is it something we can commit to or want to do at all? Ping @mcarrano & @mmenestr