inline error messages using aria-label 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 text replaces the original label text and is read when focus is put back on the input field. The error summary is read. |
iOS 9.3 | VoiceOver | Safari | The inline error is not read when input field gets focus again. The error summary is read after activating the submit button. |
Windows 7 | NVDA | Firefox | The inline error is read when focus is moved away from the input field. The original label text is replaced by the inline error text. The error summary is read as soon as the submit button is activated. |
Windows 7 | The inline error text replaces the original label text and is read after focus has been moved away from the input field then returned to the input field. The error summary is repeated 3 times.JAWS 17 | IE11 | The inline error is not read after focus is moved away from the input field. It is read when focus is returned to the input field, but the error message replaces the label text. The error summary is repeated 3 times |