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.

1. Accessibility
in pattern
libraries
Accessible
Inline Error
Messages

2. Examples from this
presentation:
http://bit.ly/hinterror

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

8. Purpose of error
messages?

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

20. Why
“programmatically
associated”?

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

38. Method 1:
Wrapped label

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

47. Method 2:
aria-describedby

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

57. Method 3:
aria-labelledby

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.

71. Method 4:
aria-errormessage

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.

82. Using aria-invalid

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

93. <span id="m1" aria-live="off">Error...</span>
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