From 94406bcae033e9c7c4f19d9664ed8d9a66165539 Mon Sep 17 00:00:00 2001 From: Kevin Kirsche Date: Wed, 25 Feb 2015 20:01:48 -0500 Subject: [PATCH] [Fixes #15928] Encourage use of icons with form validation states for colorblind users [Fixes #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 --- docs/_includes/css/forms.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html index 7737ae909e..d9ae0bf700 100644 --- a/docs/_includes/css/forms.html +++ b/docs/_includes/css/forms.html @@ -613,9 +613,9 @@

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

-

Conveying validation state to assistive technologies

-

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.

-

Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <label> 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 aria-describedby (see the example in the following section). In the case of an error, you could also use the aria-invalid="true" attribute on the form control.

+

Conveying validation state to assistive technologies and colorblind users

+

Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.

+

Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <label> text itself (as is the case in the following code example), include a Glyphicon (with appropriate alternative text using the .sr-only class - see the Glyphicon examples), or by providing an additional help text block. Specifically for assistive technologies, invalid form controls can also be assigned an aria-invalid="true" attribute.