[Fixes #15928] Encourage use of icons with form validation states for co... #15929
Conversation
| <p>Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <code><label></code> text itself (as is the case in the following code example), or associate an additional element with textual information about the validation state with the form control using <code>aria-describedby</code> (see the example in the following section). In the case of an error, you could also use the <code>aria-invalid="true"</code> attribute on the form control.</p> | ||
| <h4>Conveying validation state to assistive technologies and colorblind users</h4> | ||
| <p>Using these validation styles to denote the state of a form control only provides a visual indication, which will not be conveyed to users of assistive technologies — such as screen readers — or to colorblind users.</p> | ||
| <p>Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <code><label></code> text itself (as is the case in the following code example), or associate an additional element with textual information about the validation state with the form control using <code>aria-describedby</code> (see the example in the following section). In the case of an error, you could also use the <code>aria-invalid="true"</code> attribute on the form control. To ensure validation is clear to colorblind users, it is recommended to use visual icons indicating the current form validation state.</p> |
There was a problem hiding this comment.
This may need splitting out slightly. Adding text in the label, having extra text somewhere (which, for AT users, needs to be explicitly associated using aria-describedby or similar), and/or using an icon with appropriate fallback text are valid ways to help both AT and colorblind users. (i.e. it's not just icons that help colorblind users). The only AT-specific bit of advice is the use of aria-invalid.
There was a problem hiding this comment.
I'm not sure I followed your comment 100%, sorry. Would it be correct that you are saying that these should be described singularly as AT or would you be saying that Colorblindness and AT should be separated more, such as a separate callout or a paragraph, even though some of the helpful methods overlap between them?
There was a problem hiding this comment.
Ok, on the first para, I'd clarify that it's a visual indication that is reliant on color. so something like
Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will...
For the second para, I think it needs to be rearranged slightly along the following lines (to clarify that a visual icon is only one of the suggested methods that work for colorblind users, as a help text or additional label text will be just as effective for this user group, and only the suggestion about aria-invalid is AT-specific):
Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <code><label></code> text itself (as is the case in the following code example), include a <a href="../components/#glyphicons">Glyphicon</a> (with appropriate alternative text using the <code>.sr-only</code> class - see the <a href="../components/#glyphicons-examples">Glyphicon examples</a>), or by providing an additional <a href="#forms-help-text">help text</a> block. Specifically for assistive technologies, invalid form controls can also be assigned an <code>aria-invalid="true"</code> attribute.
There was a problem hiding this comment.
Ah ok. Thank you @patrickhlauke. Updated with the recommendations provided.
… for colorblind users [Fixes twbs#15928] Encourage use of icons with form validation states for colorblind users Update text per @patrickhlauke's feedback Update text per @patrickhlauke's feedback. Fix stupid grammar mistake
[Fixes #15928] Encourage use of icons with form validation states for co...
|
Thanks for your feedback on this @patrickhlauke. I appreciate your time reviewing this 😃 |
...lorblind users
[Fixes #15928] Encourage use of icons with form validation states for colorblind users