inline error messages using aria-labelledby and error summary using role="alert"
Focus the input field below then TAB away to see the inline error message
Click the submit button to see the error summary above the form
Error Summary
The following errors have occurred when you tried to submit the form
Error: There has been an error with input 1
Error: There has been an error with input 1
Testing
OS | Screen Reader | Browser | Results |
---|---|---|---|
Mac | Voicever | Safari | The inline error replaces the label text is read after focus has been moved away from and then back to the input field. The error summary is read after activating the submit button. |
iOS 9.3 | VoiceOver | Safari | The inline error is not read, even when you put focus back on the input field. The error summary is read after activating the submit button. |
Windows 7 | NVDA | Firefox | The inline error replaces the label text and is read after focus is moved away from the input field and when focus is moved back to the input field. The error summary is read after activating the submit button. |
Windows 7 | JAWS 17 | IE11 | The inline error replaces the label text and is read after focus is moved away from the input field and when focus is moved back to the input field. The error summary is read after activating the submit button. |