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.
Accessibility
in pattern
libraries
Accessible form
Hints & Errors
All examples from this
presentation are available here:
http://bit.ly/hinterror
Let’s start with some basic
definitions.
What are inline error
messages?
Inline error messages are
messages that are presented in
close proximity to the relevant
form field.
They are used to inform users
that a form field has been filled
in incorrectly.
Age
Error: Must be a valid age value
These messages should inform
users of the following things:
1. That there is an error
associated with the relevant
field.
2. Information on how to
resolve the error so that the
form field can be filled in
correctly.
3. Ideally, the error message
should be relevant and
contextual rather than being
too generic.
Some of the examples in my ...
These messages should only
appear when a user has
incorrectly filled in a form
field.
They are often dynamically
injected onto the page directly
after the user leaves that form
field.
Or, in some cases, when the
user attempts to submit the
form.
What are inline hints or
instructions?
Inline hints or instructions are
additional pieces of
information associated with
individual form fields.
Ideally, these hints should be
placed in close proximity to
the relevant form control -
either above or below.
Password
Must be at least 8 characters
These hints are designed to help
users fill in the form field
correctly.
Why “programmatically
associated” matters
In order to make inline error
messages and hints accessible,
it is important to understand
the two screen reader modes.
“Read mode” allows users to
read and navigate the page. In
this mode, users cannot enter
data into a form.
“Forms mode” allows the user
to interact with form controls
(fill in form fields etc).
In “forms mode”, keyboard
access is restricted to page
elements that can accept focus.
When screen readers are in
“forms mode”, elements that
cannot receive focus are not
announced to the user.
For example, a paragraph with
an error message after a form
control:
<label for="email">Email<label>
<input id="email" type="text">
<p>Error message</p>
This paragraph will not be
announced by screen readers
while in “forms mode”, as it is
not programmatically
associated wit...
For this reason, we need to
make sure that inline error
messages and hints
programatically associated
with form controls.
Methods for inline error
messages
Here are three different
methods that could be used to
programmatically associate
error messages with their form
controls.
Method 1:

Wrapped label
Using this method, the <label>
element is wrapped around the
label content, the form control
and the inline error message.
<!-- Label wrapped around -->
<label for="error1">
<span>Age</span>
<input id="error1" type="text">
<span>Error: Must be.....
<!-- Label content inside label -->
<label for="error1">
<span>Age</span>
<input id="error1" type="text">
<span>Error: Mus...
<!-- Form control inside label -->
<label for="error1">
<span>Age</span>
<input id="error1" type="text">
<span>Error: Must...
<!-- Error message inside label -->
<label for="error1">
<span>Age</span>
<input id="error1" type="text">
<span>Error: Mus...
<!-- Matching for and id values -->
<label for="error1">
<span>Age</span>
<input id="error1" type="text">
<span>Error: Mus...
This method is very well
supported across all browser
and assistive technology
combinations.
OSX Voiceover Windows NVDA Windows JAWS
SafariChrome Opera FirefoxChrome Edge FirefoxChrome Edge
PASSPASS PASS PASSPASS PA...
Method 2:
aria-describedby
In some cases, it is not possible
to wrap the <label> element
around the form control or
error message.
The aria-describedby attribute
can be used to explicitly
associate the error message
with the form control.
<!-- The label -->
<label for="error2">Phone number</label>
<input id="error2" type="text"

aria-describedby="d1">
<span i...
<!-- The form control -->
<label for="error2">Phone number</label>
<input id="error2" type="text"

aria-describedby="d1">
...
<!-- The error message -->
<label for="error2">Phone number</label>
<input id="error2" type="text"

aria-describedby="d1">...
<!-- Matching for and id values -->
<label for="error2">Phone number</label>
<input id="error2" type="text"

aria-describe...
<!-- Matching aria-describedby and id -->
<label for="error2">Phone number</label>
<input id="error2" type="text"

aria-de...
This method is well supported
across most browser and
assistive technology
combinations.
OSX Voiceover Windows NVDA Windows JAWS
SafariChrome Opera FirefoxChrome Edge FirefoxChrome Edge
PASSPASS PASS PASSPASS PA...
Method 3:
aria-errormessage
The following technique uses
the aria-errormessage
attribute, which was
introduced as part of ARIA 1.1
in December 2017.
Using this method, the error
messages can be
programmatically associated
with the input using a matching
id and aria-error...
<!-- The label -->
<label for="error3">Mobile number</label>
<input id="error3" aria-errormessage="m1"

type="text" aria-i...
<!-- The form control -->
<label for="error3">Mobile number</label>
<input id="error3" aria-errormessage="m1"

type="text"...
<!-- The error message -->
<label for="error3">Mobile number</label>
<input id="error3" aria-errormessage="m1"

type="text...
<!-- Matching for and id values -->
<label for="error3">Mobile number</label>
<input id="error3" aria-errormessage="m1"

t...
<!-- Matching aria-errormessage and id -->
<label for="error3">Mobile number</label>
<input id="error3" aria-errormessage=...
According to the W3C
specification, authors must use
the aria-invalid attribute in
conjunction with the 

aria-errormessag...
Initially, the object is in a valid
state, and the aria-invalid
attribute should be set to false.
<!-- The aria-invalid attribute set to false -->
<label for="error3">Mobile number</label>
<input id="error3" aria-errorme...
If the user enters an invalid
value, the aria-invalid
attribute must be dynamically
changed to true.
<!-- The aria-invalid true attribute -->
<label for="error3">Mobile number</label>
<input id="error3" aria-errormessage="m...
The specification also states
that authors can use live
regions for the error message
element - such as aria-live or
alert.
<!-- The aria-live attribute -->
<label for="error3">Mobile number</label>
<input id="error3" aria-errormessage="m1"

type...
The error message could also be
set with role=alert.
<!-- The role=alert attribute -->
<label for="error3">Mobile number</label>
<input id="error3" aria-errormessage="m1"

typ...
Even though this method is a
WAI ARIA recommended
method, I have some concerns
with the use of assertive or
alert.
With an aria-live value of
assertive, or a role of alert
the error message should be
announced immediately.
If the error message is is
dynamically inserted as the
user leaves a form control, the
error message could be
announced ov...
For this reason, I’d prefer to set
the aria-live value to off.
This means that assistive
technologies will be aware of
the change within that region,
but the change will not be
immediat...
The aria-errormessage
attribute currently has no
support across any browser
and assistive technology
combinations.
OSX Voiceover Windows NVDA Windows JAWS
SafariChrome Opera FirefoxChrome Edge FirefoxChrome Edge
FAILFAIL FAIL FAILFAIL FA...
However, this is a W3C
recommended technique, and
could become a viable option
in the future.
Methods for inline hints
Here are three different
methods that could be used to
explicitly associate hints and
form controls.
Method 1:
Placeholder
In this example, the hint has
been provided using the
placeholder attribute.
Email
Add your email address
<!-- The label -->
<label for="hint1">Email</label>
<input id="hint1" type="text" placeholder="Add
your email address">
<!-- The form control -->
<label for="hint1">Email</label>
<input id="hint1" type="text" placeholder="Add
your email addre...
<!-- Matching for and id values -->
<label for="hint1">Email</label>
<input id="hint1" type="text" placeholder="Add
your e...
<!-- The placeholder attribute -->
<label for="hint1">Email</label>
<input id="hint1" type="text" placeholder="Add
your em...
This method is not
recommended for the following
reasons:
1. The hint disappears as soon
as users interact with the form
control.
This is especially problematic if
there is a complex hint
message that is important for
users to be aware of as they fill
...
2. By default, the placeholder
text is displayed in a very soft
colour that fails WCAG Colour
Contrast guidelines.
OSX Voiceover Windows NVDA Windows JAWS
SafariChrome Opera FirefoxChrome Edge FirefoxChrome Edge
PASSPASS PASS PASSPASS FA...
Method 2:
Wrapped label
In this example, the hint has
been displayed below the form
control.
Password
Must be at least 8 characters
Like the error message example,
this method wraps the <label>
element around the label
content, the form control and
the i...
<!-- The label wrapped around -->
<label for="hint2">
<span>Password</span>
<input id="hint2" type="text">
<span>Must be a...
<!-- The label content inside -->
<label for="hint2">
<span>Password</span>
<input id="hint2" type="text">
<span>Must be a...
<!-- The form control inside -->
<label for="hint2">
<span>Password</span>
<input id="hint2" type="text">
<span>Must be at...
<!-- The hint text -->
<label for="hint2">
<span>Password</span>
<input id="hint2" type="text">
<span>Must be at least 8 c...
<!-- Matching for and id values -->
<label for="hint2">
<span>Password</span>
<input id="hint2" type="text">
<span>Must be...
OSX Voiceover Windows NVDA Windows JAWS
SafariChrome Opera FirefoxChrome Edge FirefoxChrome Edge
PASSPASS PASS PASSPASS PA...
Method 3:
aria-describedby
Like the earlier example, the
aria-describedby can be used
to explicitly associate the error
message with the form control.
<!-- The label -->
<label for="hint3">Address</label>
<input id="hint3" type="text"

aria-describedby="d2">
<span id="d2">...
<!-- The form control -->
<label for="hint3">Address</label>
<input id="hint3" type="text"

aria-describedby="d2">
<span i...
<!-- The hint -->
<label for="hint3">Address</label>
<input id="hint3" type="text"

aria-describedby="d2">
<span id="d2">U...
<!-- Matching for and id values -->
<label for="hint3">Address</label>
<input id="hint3" type="text"

aria-describedby="d2...
<!-- Matching aria-describedby and id values -->
<label for="hint3">Address</label>
<input id="hint3" type="text"

aria-de...
OSX Voiceover Windows NVDA Windows JAWS
SafariChrome Opera FirefoxChrome Edge FirefoxChrome Edge
PASSPASS PASS PASSPASS PA...
More detailed inline hints
There are times when a longer
hint message is desired.
Some authors prefer to make
this information available as a
popup tooltip.
Active customers ?
The maximum number of
active customers in a 

given month
There are two key questions
associated with popup tooltips
and form controls:
1. How do you make the popup
tooltip keyboard accessible?
2. Should this additional
information be
programmatically associated
with the form control, or
separate?
1. Popup tooltip and
keyboard access
The quickest way to make the
tooltip keyboard accessible, is to
make it visible only while in
three states: focus, hover a...
The tooltip can be initially
hidden off-screen.
.tooltip {
position: absolute;
top: 0;
left: -5000px;
}
Then it can be made visible

on-screen in these three
different states.
.tooltip:hover,
.tooltip:focus,
.tooltip:active {
top: -100px;
left: -10px;
}
A quick demo:
http://bit.ly/hinterror
2. Where to place the
tooltip?
Method 1: Tooltip associated
with the form control
If the hint information is
critical for users to
understand when filling in the
form field, then it needs to be
programmat...
As we’ve seen before, the hint
information can be placed
inside the label, or associated
via the aria-describedby
attribut...
In this example, the tooltip
helps to explain what the term
“active customers” means.
Active customers ?
The maximum number of
active customers in a 

given month
<!-- The label wrapped around -->
<label for="hint4">
Active customers
<a href="#" role="button">
<span class="tooltip">
<...
<!-- The label content inside -->
<label for="hint4">
Active customers
<a href="#" role="button">
<span class="tooltip">
<...
<!-- The form control -->
<label for="hint4">
Active customers
<a href="#" role="button">
<span class="tooltip">
<span cla...
<!-- Matching for and id attributes -->
<label for="hint4">
Active customers
<a href="#" role="button">
<span class="toolt...
<!-- The tooltip -->
<label for="hint4">
Active customers
<a href="#" role="button">
<span class="tooltip">
<span class="h...
<!-- A role of button -->
<label for="hint4">
Active customers
<a href="#" role="button">
<span class="tooltip">
<span cla...
Error 1 using a button:
“The label element may contain
at most one button, input,
meter, output, progress, select,
or text...
Error 2 using a button:
“Any button descendant of a
label element with a for
attribute must have an ID
value that matches ...
<!-- Hidden content -->
<label for="hint4">
Active customers
<a href="#" role="button">
<span class="tooltip">
<span class...
Method 2: Tooltip before the
form control
If the hint information is
informative, but not critical, it
could be presented to users as a
separate element, before the...
This reduces the amount of
information that users are
presented with for the form
control.
In this example, the tooltip
helps to explain the number.
Choose a number ?
Must be a whole number
with no factions, no
decimals and no negatives.
<!-- The button before the form control -->
<button>
<span class="hidden">For the following</span>
<span class="tooltip">M...
<!-- Hidden content in the button -->
<button>
<span class="hidden">For the following</span>
<span class="tooltip">Must be...
<!-- The label wrapped around -->
<button>
<span class="hidden">For the following</span>
<span class="tooltip">Must be...<...
<!-- The label content -->
<button>
<span class="hidden">For the following</span>
<span class="tooltip">Must be...</span>
...
<!-- The form control -->
<button>
<span class="hidden">For the following</span>
<span class="tooltip">Must be...</span>
<...
<!-- Matching for and id values -->
<button>
<span class="hidden">For the following</span>
<span class="tooltip">Must be.....
Conclusion
Make sure error messages and
hints are programmatically
associated with their form
controls.
The simplest and most stable
solution is to wrap the <label>
around the form control and
error or hint text.
If the <label> cannot wrap
around these items, the 

aria-decribedby solution is a
good alternative.
Always test any proposed
solutions with real users.
Russ Weakley
Max Design
Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Lin...
Prochain SlideShare
Chargement dans…5
×

Accessible Form Hints and Errors

1 015 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
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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

×