Usage of "aria-detailed-id"

[EdsonT-Systems]

Scale Version
Latest

Framework and version
Angular latest with auto-generated scale wrapper packages

Current Behavior
The "aria-details-id" property doesn’t work without the "helper-text" property.

Expected Behavior Code Reproduction
The expected behavior is for the property to work without relying on others.

In the project I’m working on, we use the error message in a different element without using the "helper-text". The issue is that when using "aria-detailed-id" (to link the error message with the input field) without the "helper-text", the NVDA screen reader reads the property but says it’s empty.

Is there any way to use "aria-detailed-id" and have it recognized without using the "helper-text" property?

Example:

@tshimber @acstll @felix-ico @amir-ba

[tshimber]

hi @EdsonT-Systems ! i've checked the code, this attribute doesn't seem to have any connection to helperText. if value is provided, it should convert into aria-details attribute on input, and it works for me:

-->

could you please provide how it looks for you in DOM?
if aria-details appears for you as well, it is a question why screenreader doesn't read text from 'simple-text', i guess it should.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-details

[EdsonT-Systems]

Hi @tshimber , I just replicated the same example you provided, removing the other properties to focus on the 'aria-detailed-id', and when the screen reader focuses on the input, it reads 'has details blank'."

Result:

Template:

Ui and DOM:

The properties are theoretically be well linked in the DOM, but the NVDA screen reader announces 'has details blank' when the input field is on focus, which didn’t happen with properties like 'invalid' that the screen reader does read.

[EdsonT-Systems]

Did you manage to test it with a screen reader? @tshimber

[tshimber]

@EdsonT-Systems no, I've only checked if code works, and it workes as expected: provides aria-details correctly. so it is more issue of screen reader reading from it. ChatGPT gives me some reasons, why it could not work. do you have the latest version of nvda?

whole answer:
NVDA, like other screen readers, may not read ARIA details (aria-details) for a few reasons:

ARIA Support Limitations: NVDA has to specifically support ARIA attributes, and not all ARIA attributes are fully supported by every version of the screen reader. aria-details is relatively new (introduced in ARIA 1.1), so older versions of NVDA or browsers might not fully support or expose it to the screen reader.

Browser Support: Screen readers rely on browsers to provide them with information from the web page. If the browser doesn't correctly implement or expose the aria-details attribute, NVDA won't be able to interpret it. Make sure you're using a browser that fully supports the ARIA specification.

No Direct Output: The aria-details attribute is used to associate additional content with an element, but it doesn't automatically trigger speech output in screen readers unless the user navigates to the detailed information or it’s tied to an event like focus. NVDA may not announce this information unless specifically instructed to do so by a user action.

Context and Relevance: NVDA and other screen readers often suppress extra information to avoid overwhelming users with unnecessary details. In some cases, aria-details might be seen as secondary information, which NVDA might not read aloud unless the user specifically asks for more details.

Solutions or Workarounds:
Ensure Proper Use of ARIA: Make sure aria-details is used appropriately. This attribute is meant to provide supplementary content, not essential information that should always be read.

Use Focusable Elements: To ensure NVDA reads the associated details, you could use focusable elements (e.g., buttons or links) that trigger reading of the detailed content when the user navigates to or interacts with it.

Update Screen Reader or Browser: Make sure you're using the latest versions of NVDA and your browser to get the most up-to-date support for ARIA attributes like aria-details.

If you're still having trouble, you could also consider an alternative approach, such as using aria-describedby or visible instructions for essential information.

[EdsonT-Systems]

Yes, I’m using the latest version of NVDA. I will also try using another screen reader to check all the points you mentioned and see if it’s more of an issue with how the property itself works.

Before this, I tried many times yesterday to use "aria-describedby" but couldn’t integrate it into the Scale input field. Do you know of any way I can achieve this integration? @tshimber

[tshimber]

@EdsonT-Systems aria-describedby is now reserved for helperText. i've already thought that condition can be added to use it instead aria details if no helper text is provided, but i need to discuss it with colleague as well, we'll have meeting tomorrow.

[EdsonT-Systems]

@tshimber I was planning to join tomorrow and see if it’s possible to address this issue and the other issue with the scale-telekom-profile-menu.