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/helpers.html | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'docs/_includes/css/helpers.html') diff --git a/docs/_includes/css/helpers.html b/docs/_includes/css/helpers.html index 9b7223740..a661ded22 100644 --- a/docs/_includes/css/helpers.html +++ b/docs/_includes/css/helpers.html @@ -23,6 +23,10 @@

Dealing with specificity

Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <span> with the class.

+
+

Conveying meaning to assistive technologies

+

Using color to add meaning 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 contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the .sr-only class.

+

Contextual backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

@@ -44,6 +48,10 @@

Dealing with specificity

Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <div> with the class.

+
+

Conveying meaning to assistive technologies

+

As with contextual colors, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.

+

Close icon

Use the generic close icon for dismissing content like modals and alerts.

-- cgit v1.2.3