[Rating indicator]: Read only state not announced by screen readers

[PlutaKatarzyna]

Bug Description

When Rating indicator has "readonly" attribute, its state is not announced by screen readers.
Reading is the same as normal state: "4 of 7, Rating, rating indicator" .

Screen.Recording.2024-10-15.at.10.51.15.mov

In addition disabled states is read as "dimmed", can it read "disabled"?

Affected Component

ui5-rating-indicator

Expected Behaviour

When accessing component in read only mode, it's state should be announced by screen reader.
For example, reading should announce "4 of 7, Rating, Read only, rating indicator"

Isolated Example

https://sap.github.io/ui5-webcomponents/components/RatingIndicator/

Steps to Reproduce

1. Open UI5 Rating Indicator documentation
2. Open a Screen Reader
3. Navigate to Read Only rating indicator
4. Screen reader doesn't read "read only" state

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

1.24.8, 2.3.0

Browser

Chrome

Operating System

MacOS

Additional Context

UDEx components bug reported:

https://github.tools.sap/sapudex/digital-design-system/issues/940

Organization

SAP / UDEx components team

Declaration

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

[PetyaMarkovaBogdanova]

Hi colleagues from @SAP/ui5-webcomponents-topic-rl ,
indeed in openUI5 the reading of readonly state of Rating Indicator points "unavailable".
Maybe you should consider adding aria-disabled along with aria-readonly attribute.
Kind regards,
Petya Markova.
(UI5 Web Components Dispatcher)

[ivoplashkov]

Hello @PlutaKatarzyna,

Thank you for reporting this issue!

This seems to be an issue related to Jaws, which was already repoorted to them and you can track the progress there - FreedomScientific/standards-support#620.

Since the problem is not related to the component itself, I am closing this issue.

Best regards,
Ivaylo

[PlutaKatarzyna]

Hi @ivoplashkov , issue was actually reported using VoiceOver on Mac, not Jaws. Could you verify it again please?

[ivoplashkov]

Hello @PlutaKatarzyna,

UI5 Web Components are designed to support screen readers by adhering to HTML, ARIA, and WCAG standards. All screen readers that follow these standards should generally work well. However, variations in behavior may occur based on the specific screen reader and browser combination used. Our primary focus is to ensure compliance with these standards, which we validate through automated accessibility checks and manual testing in designated environments.

In this case, UI5 Web Components meet ARIA standards. Therefore, we recommend raising the issue directly with the screen reader provider you’re using. As shown in the linked Jaws issue, this behavior can also be reproduced with native HTML, as demonstrated in this isolated example.

Since we are aligned with ARIA requirements and the issue appears with native HTML as well, I will be closing this ticket.

Best regards,
Ivaylo

[PlutaKatarzyna]

Hi @ivoplashkov , I would like to ask about suggestion in comment that @PetyaMarkovaBogdanova added. Readonly state should be announced by screen reader as "dimmed" or "unavailable" that comes from "aria-disabled" attribute. But disabled attributes is not present in rating indicator readonly. Would it be possible to add this?

Edit: also this ticket is similar #10025 and the resolution in that aria-disabled attribute is missing in readonly state.

[ivoplashkov]

Hello @PlutaKatarzyna,

Sorry for the delayed response!

I will check the suggestion with our Accessibility experts and will get back to you, as soon as we have a response.

Thank you for your patience!
Best regards,
Ivaylo

[elenastoyanovaa]

Hello @PlutaKatarzyna ,

Readonly state should be announced by screen reader as "dimmed" or "unavailable" that comes from "aria-disabled" attribute.

Readonly should not be announced in the same way as disabled as these are 2 different states. If we add aria-disabled for both readonly and disabled rating indicators, the screen reader user cannot distinguish which component is readonly and which is disabled. For the ticket you mentioned I have contacted the accessibility expert of the team owning the radio button and he will drive the topic there, but there the scenario is different because aria-readonly is not supported for role=radio at all https://www.w3.org/TR/wai-aria-1.2/#radio , which is not the case for the rating indicator.

aria-disabled should be added for the for the disabled ui5-rating-indicator only. Not reading out the aria-readonly of an element is a screen reader software issue, that should be solved on vendor side. From component perspective everything is implemented in accordance of the ARIA standard. Changing something that is actually correct may result in future issues related to this (once the screen reader software corrects their lack of support for the scenario).

If you insist that this should be fixed on component side, please raise an InnerSource request for design change, since the accessibility support is implemented by design. In this way the design responsible along with the accessibility team will discuss the matter and decide if a fix should be provided on our side and what is the correct way to do it.

Kind Regards,
Elena