diff --git a/content/patterns/writing/snippets.md b/content/patterns/writing/snippets.md index 38a212b..ae26379 100644 --- a/content/patterns/writing/snippets.md +++ b/content/patterns/writing/snippets.md @@ -13,3 +13,7 @@ The example `visually-hidden.md` snippet describes the CSS needed to create cont {{% note %}} To make your snippets truly reusable, try to write them in such a way that they make sense independent of surrounding text, a little bit like this note does. {{% /note %}} + +## Visually hidden snippet + +{{% snippet file="visually-hidden.md" %}} diff --git a/docs/patterns/writing/snippets/index.html b/docs/patterns/writing/snippets/index.html index 9e5ba1b..2a9a8d8 100644 --- a/docs/patterns/writing/snippets/index.html +++ b/docs/patterns/writing/snippets/index.html @@ -403,7 +403,9 @@ -

A lot of the time, your larger documentation patterns will share some common techniques and utilities. For this reason, Infusion lets you save snippets of markdown in a snippets folder, alongside the main content folder.

+ + +

A lot of the time, your larger documentation patterns will share some common techniques and utilities. For this reason, Infusion lets you save snippets of markdown in a snippets folder, alongside the main content folder.

The example visually-hidden.md snippet describes the CSS needed to create content that is visually hidden but still available to screen readers. Since this is a technique/utility you are likely to use often, it’s nice to be able to just drop a snippet into your markdown content. The snippet shortcode lets you do exactly that:

@@ -423,6 +425,29 @@ +

Visually hidden snippet

+ + + + + + +

The visually-hidden utility class uses a set of special properties to hide content visually without making it unavailable to screen readers and other non-visual user agents. The class is defined like this:

+ +
.visually-hidden {
+  position: absolute !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  padding:0 !important;
+  border:0 !important;
+  height: 1px !important;
+  width: 1px !important;
+  overflow: hidden !important;
+}
+
+ +

Use it sparingly since, in most cases, what is identified non-visually should also be presented visually. Bear in mind that not all screen reader users are blind users. + +