From: Kevin Kirsche Date: Thu, 26 Feb 2015 01:01:48 +0000 (-0500) Subject: [Fixes #15928] Encourage use of icons with form validation states for colorblind... X-Git-Tag: v3.3.4~56^2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=94406bcae033e9c7c4f19d9664ed8d9a66165539;p=thirdparty%2Fbootstrap.git [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 --- 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.