diff options
author | Patrick H. Lauke <redux@splintered.co.uk> | 2020-06-21 14:07:20 +0300 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2020-07-11 02:00:50 +0300 |
commit | 3a79335a0b21cc5bbd3f133e63aec6052694fc20 (patch) | |
tree | 9285fc2b764d7f809cb814e47bfeb607b7a5b870 /site/content/docs/5.0/helpers | |
parent | 49934b2bba514582c92bd423f94ddbf890bc3a66 (diff) |
Docs: rename "Screen readers" helper page to "Visually hidden"
"screen readers" is quite reductive, as there are other assistive technologies. content hidden this way is even announced by things like Alexa/Siri etc, so it's not so much just "screen readers".
in the long run, we may even consider changing the actual classnames (maybe `.visually-hidden` / `.visually-hidden-focusable`, though admittedly that's a bit verbose).
also includes a tiny tweak to layout.md to generalise the note about using `.sr-only`
Diffstat (limited to 'site/content/docs/5.0/helpers')
-rw-r--r-- | site/content/docs/5.0/helpers/visually-hidden.md | 25 |
1 files changed, 25 insertions, 0 deletions
diff --git a/site/content/docs/5.0/helpers/visually-hidden.md b/site/content/docs/5.0/helpers/visually-hidden.md new file mode 100644 index 0000000000..7f8c21a149 --- /dev/null +++ b/site/content/docs/5.0/helpers/visually-hidden.md @@ -0,0 +1,25 @@ +--- +layout: docs +title: Visually hidden +description: Use these helpers to visually hide elements but keep them accessible to assistive technologies. +group: helpers +--- + +Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.sr-only`. Use `.sr-only-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). Can also be used as mixins. + +{{< example >}} +<h2 class="sr-only">Title for screen readers</h2> +<a class="sr-only-focusable" href="#content">Skip to main content</a> +{{< /example >}} + +{{< highlight scss >}} +// Usage as a mixin + +.sr-only-title { + @include sr-only; +} + +.skip-navigation { + @include sr-only-focusable; +} +{{< /highlight >}} |