Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessible Inline errors messages

489 views

Published on

Presentation for OZeWAI Sydney 2018. A walk through of four different methods for making inline error messages programmatically associated. Also covers aria-invalid and aria-live.

Published in: Education
  • Be the first to comment

  • Be the first to like this

Accessible Inline errors messages

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

×