Download as PDF, PPTX
Uploaded byRuss Weakley
Accessible Inline errors messages
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.
In this document
Powered by AI
Focus on accessibility in design, particularly using inline error messages that inform users. Importance of proximity and not relying solely on color for indications.
Discusses purposes and contexts for error messages, emphasizing their need to be timely and related to user actions, with dynamic display instructions.
Highlights the need for inline error messages to be programmatically linked to form controls, presenting methods like wrapped labels and ARIA attributes.
Explains four ARIA methods for associating error messages programmatically with corresponding fields, including support levels and potential future implementations.
Discusses the use of ARIA attributes like aria-invalid and aria-live to manage error states and message updates dynamically with audience considerations.
Emphasizes the importance of testing error message solutions for accessibility and their functional association with form controls.
More Related Content
Similar to Accessible Inline errors messages
Accessible Inline errors messages
- 1.
- 2.
- 3. What are inline errormessages?
- 4. Let’s look ata simple example:
- 5. Age Error: Must bea valid age value! Label
- 6. Age Error: Must bea valid age value! Form control
- 7. Age Error: Must bea valid age value! Error message
- 8.
- 9. They should informusers that there has been an error.
- 10. They should provideusers with help to fill in the field.
- 11. Help should becontextual.
- 12. When should error messagesappear?
- 13. They should onlyappear after users fill in field incorrectly.
- 14. They should beeither dynamically injected directly after focus leaves the field or on form submit.
- 15.
- 16. They should beplaced in close proximity to the form field.
- 17. They should notuse colour alone to indicate the state.
- 18. They should includesome visual indicator, so they work without the need for colour.
- 19. Age Error: Must bea valid age value! Visual indicator
- 20.
- 21. Screen readers havetwo different modes.
- 22. These are “readmode” and “forms mode”.
- 23. “Read mode” allowsusers to read and navigate the page.
- 24. In this mode,users can’t enter data into a form.
- 25. “Forms mode” allowsthe user to interact with form controls.
- 26. Keyboard access isrestricted to elements that accept focus.
- 27. Elements that can’treceive focus will not be announced to ATs.
- 28. Let’s look ata 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 messagewill not be announced by screen readers while in “forms mode”.
- 33.
- 34. Because the <p>is not an element that receives focus.
- 35. And, because theelement is not programmatically associated with the form control.
- 36. Our aims isto make all inline error messages programatically associated with their form controls.
- 37.
- 38.
- 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 isvery well supported.
- 46. OSX Voiceover WindowsNVDA Windows JAWS SafariChrome Opera FirefoxChrome Edge FirefoxChrome Edge PASSPASS PASS PASSPASS PASS PASSPASS PASS
- 47.
- 48. Sometimes, it’s notpossible to wrap the <label> around everything else.
- 49. aria-describedby can beused to programmatically associate the error message with the form control.
- 50. <label for="error2">Phone number</label> <inputid="error2" type="text" aria-describedby="description1"> <span id="description1">Error: Must be...</span> Label
- 51. <label for="error2">Phone number</label> <inputid="error2" type="text" aria-describedby="description1"> <span id="description1">Error: Must be...</span> Form control
- 52. <label for="error2">Phone number</label> <inputid="error2" type="text" aria-describedby="description1"> <span id="description1">Error: Must be...</span> Error message
- 53. <label for="error2">Phone number</label> <inputid="error2" type="text" aria-describedby="description1"> <span id="description1">Error: Must be...</span> Matching for and id
- 54. <label for="error2">Phone number</label> <inputid="error2" type="text" aria-describedby="description1"> <span id="description1">Error: Must be...</span> Matching aria-describedby and id
- 55. This method iswell supported.
- 56. OSX Voiceover WindowsNVDA Windows JAWS SafariChrome Opera FirefoxChrome Edge FirefoxChrome Edge PASSPASS PASS PASSPASS PASS PASSPASS FAIL
- 57.
- 58. aria-labelledby can beused to programmatically associate the error message with the form control.
- 59. Warning: Using thismethod, the aria- labelledby content will be announced to ATs but the label content will not.
- 60. This can beresolved by giving the label an id and adding this value to the aria-labelledby attribute.
- 61. <label for="error3" id="label1">Address</label> <inputid="error3" type="text" aria-labelledby="label1 label2"> <span id="label2" role="tooltip">Error:</span> Label
- 62. <label for="error3" id="label1">Address</label> <inputid="error3" type="text" aria-labelledby="label1 label2"> <span id="label2" role="tooltip">Error:</span> Form control
- 63. <label for="error3" id="label1">Address</label> <inputid="error3" type="text" aria-labelledby="label1 label2"> <span id="label2" role="tooltip">Error:</span> Error message
- 64. <label for="error3" id="label1">Address</label> <inputid="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> <inputid="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> <inputid="error3" type="text" aria-labelledby="label1 label2"> <span id="label2" role="tooltip">Error:</span> Matching aria-describedby and id
- 67. This method iswell supported.
- 68. OSX Voiceover WindowsNVDA Windows JAWS SafariChrome Opera FirefoxChrome Edge FirefoxChrome Edge PASSPASS PASS PASSPASS PASS PASSPASS PASS
- 69. However, I preferto use aria- describedby instead of aria- labelledby.
- 70. These error messagesare additional descriptions to the form control and its label, rather than being labels themselves.
- 71.
- 72. aria-errormessage was introduced withARIA 1.1 in December 2017.
- 73. aria-errormessage can be usedto programmatically associate the error message with the form control.
- 74. <label for="error4">Mobile number</label> <inputid="error4" type="text" aria-errormessage="errormessage1"> <span id="errormessage1">Error: Must be...</span> Label
- 75. <label for="error4">Mobile number</label> <inputid="error4" type="text" aria-errormessage="errormessage1"> <span id="errormessage1">Error: Must be...</span> Form control
- 76. <label for="error4">Mobile number</label> <inputid="error4" type="text" aria-errormessage="errormessage1"> <span id="errormessage1">Error: Must be...</span> Error message
- 77. <label for="error4">Mobile number</label> <inputid="error4" type="text" aria-errormessage="errormessage1"> <span id="errormessage1">Error: Must be...</span> Matching for and id
- 78. <label for="error4">Mobile number</label> <inputid="error4" type="text" aria-errormessage="errormessage1"> <span id="errormessage1">Error: Must be...</span> Matching aria-errormessage and id
- 79. This method currentlyhas no support.
- 80. OSX Voiceover WindowsNVDA Windows JAWS SafariChrome Opera FirefoxChrome Edge FirefoxChrome Edge FAILFAIL FAIL FAILFAIL FAIL FAILFAIL FAIL
- 81. However, it couldbecome a viable option in the future.
- 82.
- 83. Regardless of themethod, the aria-invalid attribute should also be used with form controls.
- 84. This attribute helpsinform assistive technologies about the state of form control.
- 85. The value shouldinitially be set to false when the form field has no invalid data.
- 86. <label for="error3">Mobile number</label> <inputid="error3" type="text" aria-errormessage="m1" aria-invalid="false"> <span id="m1"></span> False value
- 87. The value canthen be dynamically switched to true when the form field has invalid data.
- 88. <label for="error3">Mobile number</label> <inputid="error3" type="text" aria-errormessage="m1" aria-invalid="true"> <span id="m1">Error: Must be...</span> True value
- 89.
- 90. The aria-live attribute informsATs that dynamic changes may occur within a page region.
- 91. This can helpwhen injecting error messages into a page region.
- 92. <span id="m1" aria-live="off"></span> Noerror message
- 93.
- 94. The three possiblevalues are off, polite and assertive.
- 95. aria-live="off" AT should notannounce updates unless focused on that region.
- 96. aria-live="polite" AT should announceupdates at the next graceful opportunity.
- 97. aria-live="assertive" AT should announceupdates immediately.
- 98. The assertive valueshould be avoided for inline error messages.
- 99. The error messagecould be announced over the top of the next form control label.
- 100. The role=alert shouldalso be avoided.
- 101. The role=alert hasan intrinsic aria-live value of assertive.
- 102. The off valueis preferred as it lets users continue with the form process without interruptions.
- 103.
- 104. Make sure errormessages are programmatically associated with their form controls.
- 105. And always testany 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