A11y: The Creating a room error messages are not linked to the input box in a way that allows screen-readers to see where the error is

[daniellekirkwood]

If no name for creating a room is entered in the input field, an error message appears (example marked in red), which is not linked to the input field. Screen reader users therefore do not find out where they can correct the incorrect input.

This problem exists with other input fields on the checked page

Please ask @daniellekirkwood about timesheeting

[t3chguy]

We give it a role of alert so screen readers should read it immediately.

The alert role is used to communicate an important and usually time-sensitive message to the user. When this role is added to an element, the browser will send out an accessible alert event to assistive technology products which can then notify the user.

Screen.Recording.2023-04-04.at.09.06.43.mov

@daniellekirkwood works fine for me

[daniellekirkwood]

We have the same thing for all the input boxes on this screen?

[t3chguy]

That's just how our field validation works, its not specific to this screen

[daniellekirkwood]

Notes from call:

• Alert doesn't connect the error message to the field - its just read immediately when it happens
• ARIA polite will wait until the user is done typing and then call out the error message
• It's odd to show an error message when I tab into the field
• And we need to have it connected: ARIA describe by.

[t3chguy]

Alert doesn't connect the error message to the field - its just read immediately when it happens

And we need to have it connected: ARIA describe by.

Will get this done

ARIA polite will wait until the user is done typing and then call out the error message

But it doesn't use polite, it uses assertive - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

Setting role="alert" is equivalent to setting aria-live="assertive" and aria-atomic="true".

It's odd to show an error message when I tab into the field

Not sure I follow what you mean by this @daniellekirkwood

[daniellekirkwood]

It's odd to show an error message when I tab into the field

Not sure I follow what you mean by this @daniellekirkwood

In the video it appeared as though as soon as you tab into the field it shows the error message, rather than waiting for the user to enter any info or tab out

[t3chguy]

@daniellekirkwood that sounds like a different issue than

A11y: The Creating a room error messages are not linked to the input box in a way that allows screen-readers to see where the error is

Could you open a new issue for that?