VoiceOver not reading alert referenced by aria-errormessage

voiceover accessibility
1

When an error occurs in a required field, we display the following:


<label for=":r0:-input">First name</label>
<input id=":r0:-input" type="text" value="" name="firstName" aria-required="true" aria-invalid="true" aria-errormessage=":r0:-error">
<p id=":r0:-error" class="micro text-feedback-red flex items-center mt-4" role="alert">This field is required</p>

However, VoiceOver on Chrome for Mac isn’t reading the error message automatically, and I’ve tried the VO+Shift+H key combination without success.

2

There are different cases involved like

  • The most reliable experience should by switch to aria-describedby with role=“alert” or aria-live=“assertive” on the error message element
  • ARIA techniques (ARIA21) show using aria-invalid=“true” plus an aria-describedby link to the error text
  • in addition to it Adjusting voice over verbosity settings may also have an added advantage