-
Bug
-
Resolution: Not a bug
-
Minor
-
None
-
4.4
-
None
(Note: This is another bug raised by our accessibility testing team, who did an audit recently.)
In a form where there is a client-side rule check (usually 'required' or 'regex') which results in feedback text appearing when the user tabs out of the field, this feedback text is given a tab stop and automatically focused.
For example in a sequence like this:
Field 1 (required) [ ]
|
Field 2 [ ]
|
If a user tabs through the form (and, ignoring any help icons that might exist) they will get to field 1, then press Tab. Instead of getting to field 2 as might be expected, the system will insert feedback text
Field 1 (required) [ ]
|
You left it blank, you muppet!
|
Field 2 [ ]
|
The focus will be changed to the text 'You left it blank, you muppet!' which is not actionable so would not normally be focused at all.
Changing focus unexpectedly is bad for accessibility, and the extra tab stop (which remains in place from that point) is also bad for accessibility.
I assume this behaviour was done for screen reader users to make it read out the message, because if it didn't break tabbing then the user would not know that the message had appeared because they have already gone to the next field.
Some other notes about this scenario:
- The form already correctly links the message to the field using aria-describedby, which means that if the user does go back to the field then a screenreader will read it out (either immediately, or in VoiceOver after offering a 'more description available' prompt or something like that).
- For server-side errors, none of the 'bad' behaviour applies - the message does not have a tab stop and there is no messing with focus, the aria-describedby works and everything is good.
I propose the following change to client-side error display, which our accessibility team agreed:
- Do not add the feedback text to tab order, or focus it.
- Use aria-live (probably 'assertive') attribute when inserting the feedback text so that the screenreader says it immediately at that point.
I'll develop and test this in NVDA to check it works.
- has a non-specific relationship to
-
MDL-80805 Accessibility: Required form fields should indicate required status
- Closed