Scale-text-field - error messages not read by Screen readers

telekom / scale

Scale is the digital design system for Telekom products and experiences.

https://telekom.github.io/scale/

Other

374 stars 82 forks source link

Scale-text-field - error messages not read by Screen readers #1426

Open wgmaik opened 1 year ago

wgmaik commented 1 year ago

Scale Version 3.0.0-beta.117

Framework and version Angular 14

Current Behavior Not possible to set aria-describedby & aria-details attribute on input fields in order to link input to error messages.

Expected Behavior Set aria-describedby & aria-details attribute on input fields in order to link input to error messages. We need this to link custom error messages as displayed in the image to enable display of a bunch of error messages. Currently its only possible to display a single error message. A list would make it more flexible and usable!

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-details https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby

Desktop (please complete the following information):

OS: Windows 10
Browser CHROME
Version 107.0.5304.107 (Offizieller Build) (64-Bit)

marvinLaubenstein commented 1 year ago

Hi @wgmaik, sorry that I have not answered for so long. The accessibility errors and/or deficits should be fixed in the near future.

marvinLaubenstein commented 1 year ago

I would like to discuss the idea of the list for the helper-text with our team and will get back to you (Therefore the changed label).

georgwittberger-telekom-mms commented 1 year ago

We also have the issue that error messages are not announced by screen readers. It seems like there are multiple things why this is not working.

0AXVwtL6iB

scale-helper-text is a sibling of the div having aria-live="polite" (not a child), therefore helper text is not announced when it appears.
input element has aria-invalid attribute (maybe should have string value "true") but is missing aria-errormessage which should refer to ID of scale-helper-text (see MDN for details)

aria-invalid="true" and aria-errormessage="id-of-helper-text" should only be set on input element if field is rendered with prop invalid. In this case it could be reasonable to omit aria-describedby because it could make screen readers read the helper text twice.