Skip to content

Commit

Permalink
[Fixes twbs#15928] Encourage use of icons with form validation states…
Browse files Browse the repository at this point in the history
… 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
  • Loading branch information
kkirsche authored and Kevin Kirsche committed Feb 28, 2015
1 parent 804457c commit 94406bc
Showing 1 changed file with 3 additions and 3 deletions.
6 changes: 3 additions & 3 deletions docs/_includes/css/forms.html
Original file line number Diff line number Diff line change
Expand Up @@ -613,9 +613,9 @@ <h2 id="forms-control-validation">Validation states</h2>
<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>&lt;label&gt;</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>&lt;label&gt;</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">
Expand Down

1 comment on commit 94406bc

@patrickhlauke
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Please sign in to comment.