| commit | author | age | ||
| 83c3f6 | 1 | --- |
| SP | 2 | layout: docs |
| 3 | title: Screenreaders | |
| 4 | description: Use screenreader utilities to hide elements on all devices except screen readers. | |
| 5 | group: utilities | |
| 6 | toc: true | |
| 7 | --- | |
| 8 | ||
| 9 | Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins. | |
| 10 | ||
| 11 | {%- comment -%} | |
| 12 | Necessary for following [accessibility best practices]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/#accessibility). | |
| 13 | {%- endcomment -%} | |
| 14 | ||
| 15 | {% capture example %} | |
| 16 | <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a> | |
| 17 | {% endcapture %} | |
| 18 | {% include example.html content=example %} | |
| 19 | ||
| 20 | {% highlight scss %} | |
| 21 | // Usage as a mixin | |
| 22 | .skip-navigation { | |
| 23 | @include sr-only; | |
| 24 | @include sr-only-focusable; | |
| 25 | } | |
| 26 | {% endhighlight %} | |
