|
Ultima modificación |
Ver Log
|
| Rev |
Autor |
Línea Nro. |
Línea |
| 1 |
efrain |
1 |
---
|
|
|
2 |
layout: docs
|
|
|
3 |
title: Screen readers
|
|
|
4 |
description: Use screen reader utilities to hide elements on all devices except screen readers.
|
|
|
5 |
group: utilities
|
|
|
6 |
---
|
|
|
7 |
|
|
|
8 |
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.
|
|
|
9 |
|
|
|
10 |
{{< example >}}
|
|
|
11 |
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
|
|
|
12 |
{{< /example >}}
|
|
|
13 |
|
|
|
14 |
```scss
|
|
|
15 |
// Usage as a mixin
|
|
|
16 |
.skip-navigation {
|
|
|
17 |
@include sr-only;
|
|
|
18 |
@include sr-only-focusable;
|
|
|
19 |
}
|
|
|
20 |
```
|