Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Accessible Form Hints and Errors

936 vues

Publié le

Presentation for A11yCamp Melbounre 2018. It all seems so easy, adding a hint or an error to a form field. But what happens when you’re suddenly asked to add pop-up tool tips? Or, even worse, additional information as modals? This presentation will take you through the highs and lows of tool tips and error messages. Along the way, we’ll look at some new ARIA 1.1 attributes like aria-errormessage.

Publié dans : Formation
  • Soyez le premier à commenter

Accessible Form Hints and Errors

  1. 1. Accessibility in pattern libraries Accessible form Hints & Errors
  2. 2. All examples from this presentation are available here: http://bit.ly/hinterror
  3. 3. Let’s start with some basic definitions.
  4. 4. What are inline error messages?
  5. 5. Inline error messages are messages that are presented in close proximity to the relevant form field.
  6. 6. They are used to inform users that a form field has been filled in incorrectly.
  7. 7. Age Error: Must be a valid age value
  8. 8. These messages should inform users of the following things:
  9. 9. 1. That there is an error associated with the relevant field.
  10. 10. 2. Information on how to resolve the error so that the form field can be filled in correctly.
  11. 11. 3. Ideally, the error message should be relevant and contextual rather than being too generic. Some of the examples in my slides are very generic
 due to space restrictions.
  12. 12. These messages should only appear when a user has incorrectly filled in a form field.
  13. 13. They are often dynamically injected onto the page directly after the user leaves that form field.
  14. 14. Or, in some cases, when the user attempts to submit the form.
  15. 15. What are inline hints or instructions?
  16. 16. Inline hints or instructions are additional pieces of information associated with individual form fields.
  17. 17. Ideally, these hints should be placed in close proximity to the relevant form control - either above or below.
  18. 18. Password Must be at least 8 characters
  19. 19. These hints are designed to help users fill in the form field correctly.
  20. 20. Why “programmatically associated” matters
  21. 21. In order to make inline error messages and hints accessible, it is important to understand the two screen reader modes.
  22. 22. “Read mode” allows users to read and navigate the page. In this mode, users cannot enter data into a form.
  23. 23. “Forms mode” allows the user to interact with form controls (fill in form fields etc).
  24. 24. In “forms mode”, keyboard access is restricted to page elements that can accept focus.
  25. 25. When screen readers are in “forms mode”, elements that cannot receive focus are not announced to the user.
  26. 26. For example, a paragraph with an error message after a form control:
  27. 27. <label for="email">Email<label> <input id="email" type="text"> <p>Error message</p>
  28. 28. This paragraph will not be announced by screen readers while in “forms mode”, as it is not programmatically associated with the form control.
  29. 29. For this reason, we need to make sure that inline error messages and hints programatically associated with form controls.
  30. 30. Methods for inline error messages
  31. 31. Here are three different methods that could be used to programmatically associate error messages with their form controls.
  32. 32. Method 1:
 Wrapped label
  33. 33. Using this method, the <label> element is wrapped around the label content, the form control and the inline error message.
  34. 34. <!-- Label wrapped around --> <label for="error1"> <span>Age</span> <input id="error1" type="text"> <span>Error: Must be...</span> </label>
  35. 35. <!-- Label content inside label --> <label for="error1"> <span>Age</span> <input id="error1" type="text"> <span>Error: Must be...</span> </label>
  36. 36. <!-- Form control inside label --> <label for="error1"> <span>Age</span> <input id="error1" type="text"> <span>Error: Must be...</span> </label>
  37. 37. <!-- Error message inside label --> <label for="error1"> <span>Age</span> <input id="error1" type="text"> <span>Error: Must be...</span> </label>
  38. 38. <!-- Matching for and id values --> <label for="error1"> <span>Age</span> <input id="error1" type="text"> <span>Error: Must be...</span> </label>
  39. 39. This method is very well supported across all browser and assistive technology combinations.
  40. 40. OSX Voiceover Windows NVDA Windows JAWS SafariChrome Opera FirefoxChrome Edge FirefoxChrome Edge PASSPASS PASS PASSPASS PASS PASSPASS PASS
  41. 41. Method 2: aria-describedby
  42. 42. In some cases, it is not possible to wrap the <label> element around the form control or error message.
  43. 43. The aria-describedby attribute can be used to explicitly associate the error message with the form control.
  44. 44. <!-- The label --> <label for="error2">Phone number</label> <input id="error2" type="text"
 aria-describedby="d1"> <span id="d1">Error: Must be...</span>
  45. 45. <!-- The form control --> <label for="error2">Phone number</label> <input id="error2" type="text"
 aria-describedby="d1"> <span id="d1">Error: Must be...</span>
  46. 46. <!-- The error message --> <label for="error2">Phone number</label> <input id="error2" type="text"
 aria-describedby="d1"> <span id="d1">Error: Must be...</span>
  47. 47. <!-- Matching for and id values --> <label for="error2">Phone number</label> <input id="error2" type="text"
 aria-describedby="d1"> <span id="d1">Error: Must be...</span>
  48. 48. <!-- Matching aria-describedby and id --> <label for="error2">Phone number</label> <input id="error2" type="text"
 aria-describedby="d1"> <span id="d1">Error: Must be...</span>
  49. 49. This method is well supported across most browser and assistive technology combinations.
  50. 50. OSX Voiceover Windows NVDA Windows JAWS SafariChrome Opera FirefoxChrome Edge FirefoxChrome Edge PASSPASS PASS PASSPASS PASS PASSPASS FAIL
  51. 51. Method 3: aria-errormessage
  52. 52. The following technique uses the aria-errormessage attribute, which was introduced as part of ARIA 1.1 in December 2017.
  53. 53. Using this method, the error messages can be programmatically associated with the input using a matching id and aria-errormessage values.
  54. 54. <!-- The label --> <label for="error3">Mobile number</label> <input id="error3" aria-errormessage="m1"
 type="text" aria-invalid="true"> <span id="m1" aria-live="assertive">Error</span>
  55. 55. <!-- The form control --> <label for="error3">Mobile number</label> <input id="error3" aria-errormessage="m1"
 type="text" aria-invalid="true"> <span id="m1" aria-live="assertive">Error</span>
  56. 56. <!-- The error message --> <label for="error3">Mobile number</label> <input id="error3" aria-errormessage="m1"
 type="text" aria-invalid="true"> <span id="m1" aria-live="assertive">Error</span>
  57. 57. <!-- Matching for and id values --> <label for="error3">Mobile number</label> <input id="error3" aria-errormessage="m1"
 type="text" aria-invalid="true"> <span id="m1" aria-live="assertive">Error</span>
  58. 58. <!-- Matching aria-errormessage and id --> <label for="error3">Mobile number</label> <input id="error3" aria-errormessage="m1"
 type="text" aria-invalid="true"> <span id="m1" aria-live="assertive">Error</span>
  59. 59. According to the W3C specification, authors must use the aria-invalid attribute in conjunction with the 
 aria-errormessage attribute.
  60. 60. Initially, the object is in a valid state, and the aria-invalid attribute should be set to false.
  61. 61. <!-- The aria-invalid attribute set to false --> <label for="error3">Mobile number</label> <input id="error3" aria-errormessage="m1" type="text" aria-invalid="false"> <span id="m1" aria-live="assertive"></span>
  62. 62. If the user enters an invalid value, the aria-invalid attribute must be dynamically changed to true.
  63. 63. <!-- The aria-invalid true attribute --> <label for="error3">Mobile number</label> <input id="error3" aria-errormessage="m1"
 type="text" aria-invalid="true"> <span id="m1" aria-live="assertive">Error</span>
  64. 64. The specification also states that authors can use live regions for the error message element - such as aria-live or alert.
  65. 65. <!-- The aria-live attribute --> <label for="error3">Mobile number</label> <input id="error3" aria-errormessage="m1"
 type="text" aria-invalid="true"> <span id="m1" aria-live="assertive">Error</span>
  66. 66. The error message could also be set with role=alert.
  67. 67. <!-- The role=alert attribute --> <label for="error3">Mobile number</label> <input id="error3" aria-errormessage="m1"
 type="text" aria-invalid="true"> <span id="m1" role="alert">Error</span>
  68. 68. Even though this method is a WAI ARIA recommended method, I have some concerns with the use of assertive or alert.
  69. 69. With an aria-live value of assertive, or a role of alert the error message should be announced immediately.
  70. 70. If the error message is is dynamically inserted as the user leaves a form control, the error message could be announced over the top of the next form control label.
  71. 71. For this reason, I’d prefer to set the aria-live value to off.
  72. 72. This means that assistive technologies will be aware of the change within that region, but the change will not be immediately announced to users.
  73. 73. The aria-errormessage attribute currently has no support across any browser and assistive technology combinations.
  74. 74. OSX Voiceover Windows NVDA Windows JAWS SafariChrome Opera FirefoxChrome Edge FirefoxChrome Edge FAILFAIL FAIL FAILFAIL FAIL FAILFAIL FAIL
  75. 75. However, this is a W3C recommended technique, and could become a viable option in the future.
  76. 76. Methods for inline hints
  77. 77. Here are three different methods that could be used to explicitly associate hints and form controls.
  78. 78. Method 1: Placeholder
  79. 79. In this example, the hint has been provided using the placeholder attribute.
  80. 80. Email Add your email address
  81. 81. <!-- The label --> <label for="hint1">Email</label> <input id="hint1" type="text" placeholder="Add your email address">
  82. 82. <!-- The form control --> <label for="hint1">Email</label> <input id="hint1" type="text" placeholder="Add your email address">
  83. 83. <!-- Matching for and id values --> <label for="hint1">Email</label> <input id="hint1" type="text" placeholder="Add your email address">
  84. 84. <!-- The placeholder attribute --> <label for="hint1">Email</label> <input id="hint1" type="text" placeholder="Add your email address">
  85. 85. This method is not recommended for the following reasons:
  86. 86. 1. The hint disappears as soon as users interact with the form control.
  87. 87. This is especially problematic if there is a complex hint message that is important for users to be aware of as they fill in the form field.
  88. 88. 2. By default, the placeholder text is displayed in a very soft colour that fails WCAG Colour Contrast guidelines.
  89. 89. OSX Voiceover Windows NVDA Windows JAWS SafariChrome Opera FirefoxChrome Edge FirefoxChrome Edge PASSPASS PASS PASSPASS FAIL FAILPASS FAIL
  90. 90. Method 2: Wrapped label
  91. 91. In this example, the hint has been displayed below the form control.
  92. 92. Password Must be at least 8 characters
  93. 93. Like the error message example, this method wraps the <label> element around the label content, the form control and the inline hint.
  94. 94. <!-- The label wrapped around --> <label for="hint2"> <span>Password</span> <input id="hint2" type="text"> <span>Must be at least 8 characters</span> </label>
  95. 95. <!-- The label content inside --> <label for="hint2"> <span>Password</span> <input id="hint2" type="text"> <span>Must be at least 8 characters</span> </label>
  96. 96. <!-- The form control inside --> <label for="hint2"> <span>Password</span> <input id="hint2" type="text"> <span>Must be at least 8 characters</span> </label>
  97. 97. <!-- The hint text --> <label for="hint2"> <span>Password</span> <input id="hint2" type="text"> <span>Must be at least 8 characters</span> </label>
  98. 98. <!-- Matching for and id values --> <label for="hint2"> <span>Password</span> <input id="hint2" type="text"> <span>Must be at least 8 characters</span> </label>
  99. 99. OSX Voiceover Windows NVDA Windows JAWS SafariChrome Opera FirefoxChrome Edge FirefoxChrome Edge PASSPASS PASS PASSPASS PASS PASSPASS PASS
  100. 100. Method 3: aria-describedby
  101. 101. Like the earlier example, the aria-describedby can be used to explicitly associate the error message with the form control.
  102. 102. <!-- The label --> <label for="hint3">Address</label> <input id="hint3" type="text"
 aria-describedby="d2"> <span id="d2">Use your full street address</span>
  103. 103. <!-- The form control --> <label for="hint3">Address</label> <input id="hint3" type="text"
 aria-describedby="d2"> <span id="d2">Use your full street address</span>
  104. 104. <!-- The hint --> <label for="hint3">Address</label> <input id="hint3" type="text"
 aria-describedby="d2"> <span id="d2">Use your full street address</span>
  105. 105. <!-- Matching for and id values --> <label for="hint3">Address</label> <input id="hint3" type="text"
 aria-describedby="d2"> <span id="d2">Use your full street address</span>
  106. 106. <!-- Matching aria-describedby and id values --> <label for="hint3">Address</label> <input id="hint3" type="text"
 aria-describedby="d2"> <span id="d2">Use your full street address</span>
  107. 107. OSX Voiceover Windows NVDA Windows JAWS SafariChrome Opera FirefoxChrome Edge FirefoxChrome Edge PASSPASS PASS PASSPASS PASS PASSPASS FAIL
  108. 108. More detailed inline hints
  109. 109. There are times when a longer hint message is desired.
  110. 110. Some authors prefer to make this information available as a popup tooltip.
  111. 111. Active customers ? The maximum number of active customers in a given month
  112. 112. There are two key questions associated with popup tooltips and form controls:
  113. 113. 1. How do you make the popup tooltip keyboard accessible?
  114. 114. 2. Should this additional information be programmatically associated with the form control, or separate?
  115. 115. 1. Popup tooltip and keyboard access
  116. 116. The quickest way to make the tooltip keyboard accessible, is to make it visible only while in three states: focus, hover and active.
  117. 117. The tooltip can be initially hidden off-screen.
  118. 118. .tooltip { position: absolute; top: 0; left: -5000px; }
  119. 119. Then it can be made visible
 on-screen in these three different states.
  120. 120. .tooltip:hover, .tooltip:focus, .tooltip:active { top: -100px; left: -10px; }
  121. 121. A quick demo: http://bit.ly/hinterror
  122. 122. 2. Where to place the tooltip?
  123. 123. Method 1: Tooltip associated with the form control
  124. 124. If the hint information is critical for users to understand when filling in the form field, then it needs to be programmatically associated with the form control.
  125. 125. As we’ve seen before, the hint information can be placed inside the label, or associated via the aria-describedby attribute.
  126. 126. In this example, the tooltip helps to explain what the term “active customers” means.
  127. 127. Active customers ? The maximum number of active customers in a given month
  128. 128. <!-- The label wrapped around --> <label for="hint4"> Active customers <a href="#" role="button"> <span class="tooltip"> <span class="hidden">is defined as</span> The maximum number... </span> </a> <input id="hint4" type="text"> </label>
  129. 129. <!-- The label content inside --> <label for="hint4"> Active customers <a href="#" role="button"> <span class="tooltip"> <span class="hidden">is defined as</span> The maximum number... </span> </a> <input id="hint4" type="text"> </label>
  130. 130. <!-- The form control --> <label for="hint4"> Active customers <a href="#" role="button"> <span class="tooltip"> <span class="hidden">is defined as</span> The maximum number... </span> </a> <input id="hint4" type="text"> </label>
  131. 131. <!-- Matching for and id attributes --> <label for="hint4"> Active customers <a href="#" role="button"> <span class="tooltip"> <span class="hidden">is defined as</span> The maximum number... </span> </a> <input id="hint4" type="text"> </label>
  132. 132. <!-- The tooltip --> <label for="hint4"> Active customers <a href="#" role="button"> <span class="tooltip"> <span class="hidden">is defined as</span> The maximum number... </span> </a> <input id="hint4" type="text"> </label>
  133. 133. <!-- A role of button --> <label for="hint4"> Active customers <a href="#" role="button"> <span class="tooltip"> <span class="hidden">is defined as</span> The maximum number... </span> </a> <input id="hint4" type="text"> </label>
  134. 134. Error 1 using a button: “The label element may contain at most one button, input, meter, output, progress, select, or textarea descendant.”
  135. 135. Error 2 using a button: “Any button descendant of a label element with a for attribute must have an ID value that matches that for attribute.”
  136. 136. <!-- Hidden content --> <label for="hint4"> Active customers <a href="#" role="button"> <span class="tooltip"> <span class="hidden">is defined as</span> The maximum number... </span> </a> <input id="hint4" type="text"> </label>
  137. 137. Method 2: Tooltip before the form control
  138. 138. If the hint information is informative, but not critical, it could be presented to users as a separate element, before the relevant form control and <label>.
  139. 139. This reduces the amount of information that users are presented with for the form control.
  140. 140. In this example, the tooltip helps to explain the number.
  141. 141. Choose a number ? Must be a whole number with no factions, no decimals and no negatives.
  142. 142. <!-- The button before the form control --> <button> <span class="hidden">For the following</span> <span class="tooltip">Must be...</span> </button> <label for="hint6"> <span>Choose a number</span> <input id="hint6" type="text"> </label>
  143. 143. <!-- Hidden content in the button --> <button> <span class="hidden">For the following</span> <span class="tooltip">Must be...</span> </button> <label for="hint6"> <span>Choose a number</span> <input id="hint6" type="text"> </label>
  144. 144. <!-- The label wrapped around --> <button> <span class="hidden">For the following</span> <span class="tooltip">Must be...</span> </button> <label for="hint6"> <span>Choose a number</span> <input id="hint6" type="text"> </label>
  145. 145. <!-- The label content --> <button> <span class="hidden">For the following</span> <span class="tooltip">Must be...</span> </button> <label for="hint6"> <span>Choose a number</span> <input id="hint6" type="text"> </label>
  146. 146. <!-- The form control --> <button> <span class="hidden">For the following</span> <span class="tooltip">Must be...</span> </button> <label for="hint6"> <span>Choose a number</span> <input id="hint6" type="text"> </label>
  147. 147. <!-- Matching for and id values --> <button> <span class="hidden">For the following</span> <span class="tooltip">Must be...</span> </button> <label for="hint6"> <span>Choose a number</span> <input id="hint6" type="text"> </label>
  148. 148. Conclusion
  149. 149. Make sure error messages and hints are programmatically associated with their form controls.
  150. 150. The simplest and most stable solution is to wrap the <label> around the form control and error or hint text.
  151. 151. If the <label> cannot wrap around these items, the 
 aria-decribedby solution is a good alternative.
  152. 152. Always test any proposed solutions with real users.
  153. 153. Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley

×