From eb74d8c86399d41673b9aa0052c70582b13bd714 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Tue, 4 Nov 2014 10:39:54 +0000 Subject: Accessibility tweaks and explanation for glyphicons - add aria-hidden="true" to avoid SRs unintentionally reading out the Unicode character (see http://www.filamentgroup.com/lab/bulletproof_icon_fonts.html) - callout with advice on accessible icon usage - replaced sr-only text in examples with (in the case of button) cleaner aria-label - additional example of icon used to convey meaning (in a non-interactive control) --- docs/_includes/components/glyphicons.html | 47 +++++++++++++++++++++++-------- 1 file changed, 36 insertions(+), 11 deletions(-) (limited to 'docs/_includes') diff --git a/docs/_includes/components/glyphicons.html b/docs/_includes/components/glyphicons.html index c614103c6..b5f5178df 100644 --- a/docs/_includes/components/glyphicons.html +++ b/docs/_includes/components/glyphicons.html @@ -7,7 +7,7 @@

Use whatever option best suits your specific development setup.

+
+

Accessible icons

+

Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the aria-hidden="true" attribute.

+

If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the .sr-only class.

+

If you're creating controls with no other text (such as a <button> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an aria-label attribute on the control itself.

+
{% highlight html %} - + {% endhighlight %} @@ -45,22 +51,41 @@
{% highlight html %} + + +{% endhighlight %} +

An icon used in an alert to convey that it's an error message, with additional .sr-only text to convey this hint to users of assistive technologies.

+
+ +
+{% highlight html %} + {% endhighlight %} -- cgit v1.2.3 From c513f58c6a2e345da338aebe45ee422b07260017 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 10 Nov 2014 13:14:33 -0800 Subject: Remove X-UA-Compatible caveat from Validators docs Refs #15072 --- docs/_includes/getting-started/browser-device-support.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/_includes') diff --git a/docs/_includes/getting-started/browser-device-support.html b/docs/_includes/getting-started/browser-device-support.html index fd66f54b4..306023d7b 100644 --- a/docs/_includes/getting-started/browser-device-support.html +++ b/docs/_includes/getting-started/browser-device-support.html @@ -202,5 +202,5 @@ $(function () {

Validators

In order to provide the best possible experience to old and buggy browsers, Bootstrap uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.

These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.

-

Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of X-UA-Compatible <meta> tags to avoid Internet Explorer issues and our inclusion of a workaround for a certain Firefox bug.

+

Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for a certain Firefox bug.

-- cgit v1.2.3 From bb89657bcb53a60d579d8fd9bbea56dde05dad8c Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Thu, 30 Oct 2014 16:45:33 +0000 Subject: Assorted accessibility (and some consistency) fixes for documentation Closes #14951 by merging it. --- docs/_includes/components/button-dropdowns.html | 46 +++---- docs/_includes/components/button-groups.html | 143 ++++++++++++---------- docs/_includes/components/dropdowns.html | 10 +- docs/_includes/components/input-groups.html | 12 +- docs/_includes/components/navbar.html | 4 +- docs/_includes/components/navs.html | 55 +++++---- docs/_includes/components/pagination.html | 46 +++---- docs/_includes/css/buttons.html | 14 ++- docs/_includes/css/forms.html | 104 +++++++++------- docs/_includes/css/grid.html | 2 +- docs/_includes/css/helpers.html | 8 ++ docs/_includes/css/tables.html | 5 +- docs/_includes/getting-started/accessibility.html | 5 + docs/_includes/js/tabs.html | 40 +++--- docs/_includes/nav/components.html | 6 +- docs/_includes/nav/css.html | 12 +- 16 files changed, 287 insertions(+), 225 deletions(-) (limited to 'docs/_includes') diff --git a/docs/_includes/components/button-dropdowns.html b/docs/_includes/components/button-dropdowns.html index 165e0777e..871370d43 100644 --- a/docs/_includes/components/button-dropdowns.html +++ b/docs/_includes/components/button-dropdowns.html @@ -12,7 +12,7 @@

Turn a button into a dropdown toggle with some basic markup changes.

- +
- +
- +
- +
- +
- +