diff options
| -rw-r--r-- | scss/_mixins.scss | 2 | ||||
| -rw-r--r-- | scss/mixins/_visually-hidden.scss (renamed from scss/mixins/_screen-reader.scss) | 6 | ||||
| -rw-r--r-- | site/content/docs/5.0/helpers/screen-readers.md | 25 |
3 files changed, 4 insertions, 29 deletions
diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 8c00f31d2..7b06cd819 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -12,7 +12,7 @@ @import "mixins/breakpoints"; @import "mixins/image"; @import "mixins/resize"; -@import "mixins/screen-reader"; +@import "mixins/visually-hidden"; @import "mixins/reset-text"; @import "mixins/text-truncate"; diff --git a/scss/mixins/_screen-reader.scss b/scss/mixins/_visually-hidden.scss index e5ee63c09..26edfe84b 100644 --- a/scss/mixins/_screen-reader.scss +++ b/scss/mixins/_visually-hidden.scss @@ -1,11 +1,11 @@ // stylelint-disable declaration-no-important -// Only display content to screen readers +// Hide content visually while keeping it accessible to assistive technologies // // See: https://a11yproject.com/posts/how-to-hide-content/ // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ -@mixin visually-hidden { +@mixin visually-hidden() { position: absolute !important; width: 1px !important; height: 1px !important; @@ -21,7 +21,7 @@ // // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 -@mixin visually-hidden-focusable { +@mixin visually-hidden-focusable() { &:not(:focus) { @include visually-hidden(); } diff --git a/site/content/docs/5.0/helpers/screen-readers.md b/site/content/docs/5.0/helpers/screen-readers.md deleted file mode 100644 index fd9ca8887..000000000 --- a/site/content/docs/5.0/helpers/screen-readers.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -layout: docs -title: Screen readers -description: Use screen reader utilities to hide elements on all devices except screen readers. -group: helpers ---- - -Hide an element to all devices **except screen readers** with `.visually-hidden`. Use `.visually-hidden-focusable` to show the element only when it's focused (e.g. by a keyboard-only user). Can also be used as mixins. - -{{< example >}} -<h2 class="visually-hidden">Title for screen readers</h2> -<a class="visually-hidden-focusable" href="#content">Skip to main content</a> -{{< /example >}} - -{{< highlight scss >}} -// Usage as a mixin - -.visually-hidden-title { - @include visually-hidden; -} - -.skip-navigation { - @include visually-hidden-focusable; -} -{{< /highlight >}} |