Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fixes #15928] Encourage use of icons with form validation states for co... #15929

Merged
merged 1 commit into from
Feb 28, 2015

Conversation

kkirsche
Copy link
Contributor

...lorblind users

[Fixes #15928] Encourage use of icons with form validation states for colorblind users

<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 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), 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>
Copy link
Member

Choose a reason for hiding this comment

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

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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?

Copy link
Member

Choose a reason for hiding this comment

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

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>&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.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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
@patrickhlauke patrickhlauke added this to the v3.3.4 milestone Feb 28, 2015
patrickhlauke added a commit that referenced this pull request Feb 28, 2015
[Fixes #15928] Encourage use of icons with form validation states for co...
@patrickhlauke patrickhlauke merged commit 3173efd into twbs:master Feb 28, 2015
@kkirsche
Copy link
Contributor Author

Thanks for your feedback on this @patrickhlauke. I appreciate your time reviewing this 😃

@kkirsche kkirsche deleted the patch-5 branch February 28, 2015 22:12
@cvrebert cvrebert mentioned this pull request Feb 28, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Encourage use of icons with form validation states for the sake of colorblind users?
4 participants