diff options
| author | Kevin Kirsche <[email protected]> | 2015-02-25 20:01:48 -0500 |
|---|---|---|
| committer | Kevin Kirsche <[email protected]> | 2015-02-28 17:07:20 -0500 |
| commit | 94406bcae033e9c7c4f19d9664ed8d9a66165539 (patch) | |
| tree | 0e86cc6678fa29e34e9dae6cf562c5d54821926b /docs | |
| parent | 804457c474c686d4b5f45545da0dbad5ed56e387 (diff) | |
| download | bootstrap-94406bcae033e9c7c4f19d9664ed8d9a66165539.tar.xz bootstrap-94406bcae033e9c7c4f19d9664ed8d9a66165539.zip | |
[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
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/_includes/css/forms.html | 6 |
1 files changed, 3 insertions, 3 deletions
diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html index 7737ae909..d9ae0bf70 100644 --- a/docs/_includes/css/forms.html +++ b/docs/_includes/css/forms.html @@ -613,9 +613,9 @@ <p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p> <div class="bs-callout bs-callout-warning" id="callout-form-validation-state-accessibility"> - <h4>Conveying validation state to assistive technologies</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.</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.</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, color-based 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), 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.</p> </div> <div class="bs-example" data-example-id="form-validation-states"> |