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/css/buttons.html | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) (limited to 'docs/_includes/css/buttons.html') diff --git a/docs/_includes/css/buttons.html b/docs/_includes/css/buttons.html index ee03c1d65..1b3f46416 100644 --- a/docs/_includes/css/buttons.html +++ b/docs/_includes/css/buttons.html @@ -35,6 +35,11 @@ {% endhighlight %} +
+

Conveying meaning to assistive technologies

+

Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the sr-only class.

+
+

Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

@@ -88,7 +93,7 @@

Active state

-

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s should you need to replicate the active state programmatically.

+

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s (and include the aria-pressed="true" attribute) should you need to replicate the active state programmatically.

Button element

No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .active.

@@ -147,7 +152,7 @@

Link functionality caveat

-

This class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.

+

This class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.

Context-specific usage

@@ -170,6 +175,11 @@ {% endhighlight %} +
+

Links acting as buttons

+

If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".

+
+

Cross-browser rendering

As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.

-- cgit v1.2.3