Send Message A11Y Audit - Error messages not reading correctly in VoiceOver

[jonathanbobel]

Issue: Error Messages Not Properly Announced When Using VoiceOver

Problem:
When an error is triggered during form interaction and VoiceOver is enabled, the focus moves to the Skip Link instead of the error message. This causes the error message to not be read aloud, leaving users unaware of the issue.

---

Steps to Reproduce:

1. Enable VoiceOver on macOS.
2. Trigger a validation error (e.g., leave a required field blank or enter invalid data).
3. Observe that:
   • The focus moves to the Skip Link.
   • The error message is not announced by VoiceOver.

---

Expected Behavior:

• When an error occurs, the following should happen:
  1. The focus moves directly to the error message or the problematic input field.
  2. The error message is announced by VoiceOver.
  3. The error is clearly associated with the input field (if applicable) for further context.

---

Proposed Solution:

1. Set Focus to the Error Message

   • Ensure that focus moves programmatically to the error message when it appears.
   • Example:

     document.getElementById('error-message-id').focus();

2. Use aria-live for Dynamic Error Messages

   • Add aria-live="assertive" to the error message container to ensure it is announced immediately by screen readers:

     <div id="error-message-id" role="alert" aria-live="assertive">
       Please enter a valid email address.
     </div>

3. Associate Error Message with the Input Field

   • Link the error message to the relevant input field using aria-describedby:

     <label for="email">Email:</label>
     <input id="email" type="email" aria-describedby="error-message-id" required>
     <div id="error-message-id" role="alert" aria-live="assertive">
       Please enter a valid email address.
     </div>

4. Avoid Redirecting Focus to Unrelated Elements

   • Ensure the focus does not move to unrelated elements (e.g., the Skip Link). Test and correct focus management logic in the JavaScript handling the error.

5. Test with VoiceOver and Other Screen Readers

   • Validate the fix with VoiceOver, NVDA, and JAWS to ensure:
     • The error message is announced.
     • Focus behavior is predictable and correct.

---

Acceptance Criteria:

• When a validation error occurs, focus moves directly to the error message or the problematic input field.
• The error message is announced immediately by VoiceOver using an aria-live="assertive" region.
• The error message is programmatically associated with the relevant input field using aria-describedby.
• Focus does not move to unrelated elements (e.g., the Skip Link) when an error is triggered.
• Screen reader users are able to understand the error and its context without additional navigation.
• Fix is tested with VoiceOver (macOS) to ensure proper behavior.
• HTML passes validation with no duplicate IDs or parsing errors related to the error-handling logic.

---

References:

WAI-ARIA Authoring Practices: Error Messages
USWDS Accessibility Guidance

Example Fix:

HTML:

<label for="email">Email:</label>
<input id="email" type="email" aria-describedby="email-error" required>
<div id="email-error" role="alert" aria-live="assertive">Please enter a valid email address.</div>