[Avatar group][A11Y]: [A] 2.5.3 The accessible name of any interactive element should contain its visible text label.

[MaksymZahreba]

Bug Description

Issue found by a11y tool Siteimprove, caused by difference in naming of button and its label.

Note: in v1 button in shadow dom did not have the label attribute and issues is not triggered

Affected Component

Avatar Group

Expected Behaviour

No [A] level a11y issues found.

Isolated Example

No response

Steps to Reproduce

1. launch Siteimprove tool on page with avatar group component

Log Output, Stack Trace or Screenshots

Individual type set:

Same issue is triggered for Group type:

Priority

Medium

UI5 Web Components Version

2.10.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

SAP \ UDEx

Declaration

• [x] I’m not disclosing any internal or sensitive information.

[nnaydenow]

Hi @SAP/ui5-webcomponents-topic-p,

Could you please check?

As I understand the issue it's about that the descriptive text doesn't corresponds to the one used into the content.

Regards, Nayden

[dobrinyonkov]

Hi @MaksymZahreba,

We usually check accessibility using Axe and AMP (Access Assistant). I just ran both on the Avatar Group component and neither showed any issues with the labels.

Can you point us to a specific WCAG requirement that isn’t met? It would also help if you explain how this affects users. That way, we can understand the impact and prioritize the fix.

Also, just to confirm: are you expecting the "+N" button (that shows how many avatars are hidden) to include the "+N" text in the label - for both individual and group types?

Thanks. Dobrin

[MaksymZahreba]

Hi @dobrinyonkov , The WCAG requirement 2.5.3 https://www.w3.org/WAI/WCAG22/Understanding/label-in-name.html

This for example affects users that use voice controls which makes them unable to interact with elements due to difference in label and displayed content.

The set text to display and its aria-label should be the same. To add description for elements it is recommended to use <aria-labeledby>

//rough code example// <ui5-button class="ui5-avatar-group-overflow-btn ui5-avatar-group-overflow-btn-s" ui5-button="" design="Default" type="Button" accessible-role="Button" desktop="" id="1" aria-labelledby="1 2">+6</ui5-button> - here added id="1" and aria-labelledby="1 2" , removed accessible-name <button type="button" class="ui5-button-root" data-sap-focus-ref="true" tabindex="0" part="button" role="button"> - aria-label removed <span id="2">more avatars</span> - added, it is supposed to be hidden with CSS styles and used for aria-labeledby

Regards, Maksym

[github-actions[bot]]

Hello, everyone! The issue has been inactive for 21 days. If there are still questions or comments, please feel free to continue the discussion. Inactive issues will be closed after 7 days!

[MaksymZahreba]

Hi, any progress on the issue?

[dobrinyonkov]

Hello @MaksymZahreba,

Apologies for the late response. In the latest version of the Avatar Group:

• For type individual, the overflow button is labeled: “+N Activate for complete list.”

• For type group, there was no change as the whole group was labeled with custom text: “Conjoined avatars. Y displayed, N hidden. Activate for complete list.” This ensures users are clearly informed about how many avatars are shown and hidden.

I hope this helps. Let me know of any additional concerns.

Kind regards, Dobrin

[github-actions[bot]]

This issue has been closed. To reopen, just leave a comment!