Card content grouped vs not grouped for screen readers

[aweell]

Context

There is a debate in terms of usability about the best experience for screen reader users consuming the content of a card and in extension what experience cards in Mística should provide.

The use case is a card that has actions and in not entirely interactive, a card with onPress that is entirely tappable would not enter in this discussion and will be discussed in #2149.

The options are:

• Programatically concatenate all text elements in one group that is read as a single paragraph.
• Not concatenate elements so the user should access them using screen reader focus. (Current Mística behaviour)

This debate has its origin in this component:

https://www.figma.com/design/EqWUjrLq7xwz9ywsuUKrcQ/-MeinO2--Usage-Monitor---Upselling-button-Q1-2025-PRODUCTDSN-2928?node-id=467-120074&t=WCkTdICpAeoXxGg6-1

Where is recommended to concatenate all text elements into one for screen reader focus stop.

[aweell]

Our initial approach

When we made the accessibility research for documenting screen reader behaviour in Mística's cards we stated that the behaviour when cards are defined as informative or have associated actions would be the following:

Cada uno de los elementos recibirá el foco por separado y no se leerán los elementos en secuencia

Specs for reference:
https://www.figma.com/design/tKdPOfcUALzVIh5oizFbm7/%F0%9F%94%B8-Cards-Specs?m=auto&node-id=9507-6893&t=jIsVH1yMgUzZYWWu-1

This was based in multiple examples that serve us as a precedent for this decision:

• Material 3 design - Cards accessibility
• Inclusive components - Cards
• W3C Design system - Cards
• Kitty Giraudel - Accessible cards
• Scott O'hara - Cards example

About aria-label and non-interactive content

Another problem we already encounter is the usage of aria-label in particular type of content:

Don't use aria-label or aria-labelledby on any other non-interactive content such as p, legend, li, or ul, because it is ignored.

https://www.w3.org/TR/using-aria/

When we were researching about lists accessibility one of the requests was to also concatenate the content when lists are informative. The solution was to hide the default content to screen readers using aria-hidden and have a screen reader only content programatically concatenated so we can provide that experience. In that moment we believed that was not a good practice and the ideal solution would be to offer screen reader user the same elements we are presenting to other users.

That doesn't mean we are against using screen reader only elements, but we felt that in that case was not necessary.

Additional questions

If we move towards programatically concatenating content is the best experience:

1. Should we allow to configure in Mística cards a way to focus elements individually also?
2. What happens with content that are included in slots? We cannot control what is included inside them so will be concatenated also or avoided.

The second question raised a problem when we were implementing the lists, since we are hiding all content and extracting the text to create this custom paragraph, if a button is included in the slot, we will hide it to screen reader user also, this is far from desirable.

We included in list specs:

Está desaconsejado introducir elementos interactivos en los slots de una lista informativa si se le pasa una label, ya que es posible que se oculten al lector de pantalla y provocar un fallo de accesibilidad.

A solution of this problem would be to exclude slot content from programmatic concatenation, but we cannot foresee the type of content that would be included in them.

3. In a context a card is semantically and article (A card can have a different role but to simplify the problem), does this means that all articles by extension should concatenate all text elements? What are the key reasons to decide when the content should be concatenated and when should be not?

In an article that has a heading, will only provide the heading when focused, then, the next focus stops will go trough article contents one by one.

A personal note about usability benefits

Thinking about use cases, would be beneficial for a user to read all concatenates contents in a card if is a summary of an article with 50+ words?

If we put in a matrix the benefit of programmatic concatenation vs amount of content, I believe it would be proportionally inverse, as the number of content elements or their size increases, the benefit of the programmatic concatenation decreases.

As I title the section this is a personal note and should be supported by user research.

And extract from ebay Mind Patterns:

For tiles with longer text and structural elements such as lists, subheadings and tables, the contents cannot simply be wrapped in an anchor tag for fear of the link text becoming too verbose and unwieldy for assistive technology.

https://ebay.gitbook.io/mindpatterns/navigation/tile#heavy-tile

Another important topics:

• The relationships of the content also play an important part about when to concatenate and when to live, there will be cases where content will not work concatenated.
• Lose of granularity, we are removing granularity of the content a user can access, I would do this really carefully.

Because of the previous points and answering my first question:

1. Should we allow to configure in Mística cards a way to focus elements individually also?

If we allow to configure the content altogether, we need 100% to still provide this experience.

I add some ideas of how this can be solved for that card in particular

One of my concerns is how use of screen reader only impacts users that are sighted and don't see a relationship between the visible content and what's being focused.

[AnaMontes11]

Our initial approach of not concatenating all the elements into a single block of text and allowing the screen reader to access each one individually is supported by three key principles:

• Accessibility: It facilitates navigation for users with assistive technologies, allowing them to interact with the content independently.

• Usability: It prevents overwhelming the user with a long block of text, improving comprehension and reading efficiency.

• User Autonomy: It provides fast and flexible navigation, allowing users to move between different elements according to their needs.

Leading inclusive information platforms, such as BBC News, use cards to present articles, where each element within the card (title, image, description) is individually accessible to screen readers. This allows users to navigate and understand each part of the content without confusion, promoting a clearer and more accessible user experience.

We would like to learn more about the reasons behind the need to concatenate all the content into a single block. We believe that maintaining the current structure offers significant advantages for accessibility, but we are open to understanding other perspectives that may justify a different approach.

[aweell]

This was solved in: Telefonica/mistica-web#1523