Accessible Inline errors messages
1 like1,754 views
This document discusses making inline error messages accessible for assistive technologies like screen readers. It provides 4 methods for programmatically associating error messages with form fields: 1) wrapping the label, 2) using aria-describedby, 3) aria-labelledby, and 4) the newer aria-errormessage. It also recommends using aria-invalid to indicate the validation state and aria-live to announce changes for screen reader users. The goal is to ensure error messages are announced and read aloud as part of the form interaction for assistive technology users.
Accessible Inline errors messages
- 3. What are inline error messages?
- 4. Let’s look at a simple example:
- 5. Age Error: Must be a valid age value! Label
- 6. Age Error: Must be a valid age value! Form control
- 7. Age Error: Must be a valid age value! Error message
- 9. They should inform users that there has been an error.
- 10. They should provide users with help to fill in the field.
- 11. Help should be contextual.
- 12. When should error messages appear?
- 13. They should only appear after users fill in field incorrectly.
- 14. They should be either dynamically injected directly after focus leaves the field or on form submit.
- 15. Appearance
- 16. They should be placed in close proximity to the form field.
- 17. They should not use colour alone to indicate the state.
- 18. They should include some visual indicator, so they work without the need for colour.
- 19. Age Error: Must be a valid age value! Visual indicator
- 21. Screen readers have two different modes.
- 22. These are “read mode” and “forms mode”.
- 23. “Read mode” allows users to read and navigate the page.
- 24. In this mode, users can’t enter data into a form.
- 25. “Forms mode” allows the user to interact with form controls.
- 26. Keyboard access is restricted to elements that accept focus.
- 27. Elements that can’t receive focus will not be announced to ATs.
- 28. Let’s look at a simple example:
- 29. <label for="email">Email<label> <input id="email" type="text"> <p>Error message</p> Label
- 30. <label for="email">Email<label> <input id="email" type="text"> <p>Error message</p> Form control
- 31. <label for="email">Email<label> <input id="email" type="text"> <p>Error message</p> Error message
- 32. This error message will not be announced by screen readers while in “forms mode”.
- 33. Why?
- 34. Because the <p> is not an element that receives focus.
- 35. And, because the element is not programmatically associated with the form control.
- 36. Our aims is to make all inline error messages programatically associated with their form controls.
- 37. Four methods
- 39. Using this method, the <label> is wrapped around everything else.
- 40. <label for="error1"> <span>Age</span> <input id="error1" type="text"> <span>Error: Must be...</span> </label> Wrapped label
- 41. <label for="error1"> <span>Age</span> <input id="error1" type="text"> <span>Error: Must be...</span> </label> Label content
- 42. <label for="error1"> <span>Age</span> <input id="error1" type="text"> <span>Error: Must be...</span> </label> Form control
- 43. <label for="error1"> <span>Age</span> <input id="error1" type="text"> <span>Error: Must be...</span> </label> Error message
- 44. <label for="error1"> <span>Age</span> <input id="error1" type="text"> <span>Error: Must be...</span> </label> Matching for and id
- 45. This method is very well supported.
- 46. OSX Voiceover Windows NVDA Windows JAWS SafariChrome Opera FirefoxChrome Edge FirefoxChrome Edge PASSPASS PASS PASSPASS PASS PASSPASS PASS
- 48. Sometimes, it’s not possible to wrap the <label> around everything else.
- 49. aria-describedby can be used to programmatically associate the error message with the form control.
- 50. <label for="error2">Phone number</label> <input id="error2" type="text" aria-describedby="description1"> <span id="description1">Error: Must be...</span> Label
- 51. <label for="error2">Phone number</label> <input id="error2" type="text" aria-describedby="description1"> <span id="description1">Error: Must be...</span> Form control
- 52. <label for="error2">Phone number</label> <input id="error2" type="text" aria-describedby="description1"> <span id="description1">Error: Must be...</span> Error message
- 53. <label for="error2">Phone number</label> <input id="error2" type="text" aria-describedby="description1"> <span id="description1">Error: Must be...</span> Matching for and id
- 54. <label for="error2">Phone number</label> <input id="error2" type="text" aria-describedby="description1"> <span id="description1">Error: Must be...</span> Matching aria-describedby and id
- 55. This method is well supported.
- 56. OSX Voiceover Windows NVDA Windows JAWS SafariChrome Opera FirefoxChrome Edge FirefoxChrome Edge PASSPASS PASS PASSPASS PASS PASSPASS FAIL
- 58. aria-labelledby can be used to programmatically associate the error message with the form control.
- 59. Warning: Using this method, the aria- labelledby content will be announced to ATs but the label content will not.
- 60. This can be resolved by giving the label an id and adding this value to the aria-labelledby attribute.
- 61. <label for="error3" id="label1">Address</label> <input id="error3" type="text" aria-labelledby="label1 label2"> <span id="label2" role="tooltip">Error:</span> Label
- 62. <label for="error3" id="label1">Address</label> <input id="error3" type="text" aria-labelledby="label1 label2"> <span id="label2" role="tooltip">Error:</span> Form control
- 63. <label for="error3" id="label1">Address</label> <input id="error3" type="text" aria-labelledby="label1 label2"> <span id="label2" role="tooltip">Error:</span> Error message
- 64. <label for="error3" id="label1">Address</label> <input id="error3" type="text" aria-labelledby="label1 label2"> <span id="label2" role="tooltip">Error:</span> Matching for and id
- 65. <label for="error3" id="label1">Address</label> <input id="error3" type="text" aria-labelledby="label1 label2"> <span id="label2" role="tooltip">Error:</span> Matching aria-describedby and id
- 66. <label for="error3" id="label1">Address</label> <input id="error3" type="text" aria-labelledby="label1 label2"> <span id="label2" role="tooltip">Error:</span> Matching aria-describedby and id
- 67. This method is well supported.
- 68. OSX Voiceover Windows NVDA Windows JAWS SafariChrome Opera FirefoxChrome Edge FirefoxChrome Edge PASSPASS PASS PASSPASS PASS PASSPASS PASS
- 69. However, I prefer to use aria- describedby instead of aria- labelledby.
- 70. These error messages are additional descriptions to the form control and its label, rather than being labels themselves.
- 72. aria-errormessage was introduced with ARIA 1.1 in December 2017.
- 73. aria-errormessage can be used to programmatically associate the error message with the form control.
- 74. <label for="error4">Mobile number</label> <input id="error4" type="text" aria-errormessage="errormessage1"> <span id="errormessage1">Error: Must be...</span> Label
- 75. <label for="error4">Mobile number</label> <input id="error4" type="text" aria-errormessage="errormessage1"> <span id="errormessage1">Error: Must be...</span> Form control
- 76. <label for="error4">Mobile number</label> <input id="error4" type="text" aria-errormessage="errormessage1"> <span id="errormessage1">Error: Must be...</span> Error message
- 77. <label for="error4">Mobile number</label> <input id="error4" type="text" aria-errormessage="errormessage1"> <span id="errormessage1">Error: Must be...</span> Matching for and id
- 78. <label for="error4">Mobile number</label> <input id="error4" type="text" aria-errormessage="errormessage1"> <span id="errormessage1">Error: Must be...</span> Matching aria-errormessage and id
- 79. This method currently has no support.
- 80. OSX Voiceover Windows NVDA Windows JAWS SafariChrome Opera FirefoxChrome Edge FirefoxChrome Edge FAILFAIL FAIL FAILFAIL FAIL FAILFAIL FAIL
- 81. However, it could become a viable option in the future.
- 83. Regardless of the method, the aria-invalid attribute should also be used with form controls.
- 84. This attribute helps inform assistive technologies about the state of form control.
- 85. The value should initially be set to false when the form field has no invalid data.
- 86. <label for="error3">Mobile number</label> <input id="error3" type="text" aria-errormessage="m1" aria-invalid="false"> <span id="m1"></span> False value
- 87. The value can then be dynamically switched to true when the form field has invalid data.
- 88. <label for="error3">Mobile number</label> <input id="error3" type="text" aria-errormessage="m1" aria-invalid="true"> <span id="m1">Error: Must be...</span> True value
- 89. Using aria-live
- 90. The aria-live attribute informs ATs that dynamic changes may occur within a page region.
- 91. This can help when injecting error messages into a page region.
- 92. <span id="m1" aria-live="off"></span> No error message
- 94. The three possible values are off, polite and assertive.
- 95. aria-live="off" AT should not announce updates unless focused on that region.
- 96. aria-live="polite" AT should announce updates at the next graceful opportunity.
- 97. aria-live="assertive" AT should announce updates immediately.
- 98. The assertive value should be avoided for inline error messages.
- 99. The error message could be announced over the top of the next form control label.
- 100. The role=alert should also be avoided.
- 101. The role=alert has an intrinsic aria-live value of assertive.
- 102. The off value is preferred as it lets users continue with the form process without interruptions.
- 103. Conclusion
- 104. Make sure error messages are programmatically associated with their form controls.
- 105. And always test any proposed solutions - with different assistive technologies and with real users!
- 106. Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley