search

digdir / designsystemet

Designsystemet
https://designsystemet.no
MIT License
81 stars 37 forks source link

aria-describedby connected to fieldset is not supported by screen readers #2386

Closed Febakke closed 1 week ago

Febakke commented 2 months ago

When adding a description on fieldset, radiogroup, checkboxgroup it is added to the fieldset element using an aria-describedby. This is not standard HTML, and not well supported by browsers/screen readers.

Firefox and chrome/VoiceOver: Ignores description Safari/VoiceOver: Overwrites all aria-descibedby inside the fieldset.

NVDA/chrome: Works as excpected

We have not yet tested with JAWS

Image

mimarz commented 2 months ago

Relevant issue which is the basis for todays implementation: #519

eirikbacker commented 2 months ago

W3C actually mentions themselves that aria-describedby should not be used on non-interactive elements: https://www.w3.org/TR/using-aria/#label-support

I a fieldset has a related error message, the aria-describedby be set to all child inputs and point to the same message component. Note that the error message ID should then be placed before the ID pointing to the inputs individual description (aria-describedby="id-of-fieldset-error id-of-input-description" is well supported)