Bootstrap/site/content/docs/4.3/utilities/screen-readers.md

---
layout: docs
title: Screen readers
description: Use screen reader utilities to hide elements on all devices except screen readers.
group: utilities
---

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.

{{< example >}}
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
{{< /example >}}

{{< highlight scss >}}
// Usage as a mixin
.skip-navigation {
  @include sr-only;
  @include sr-only-focusable;
}
{{< /highlight >}}
Docs: Breaks out Utilities into separate section and optimizes its pages (#20678) 2016-09-09 06:48:17 +02:00			`---`
			`layout: docs`
Rename `Screenreaders` to "Screen readers". No redirect is added because the next version will be a minor version bump. 2019-02-07 10:29:06 +01:00			`title: Screen readers`
			`description: Use screen reader utilities to hide elements on all devices except screen readers.`
Docs: Breaks out Utilities into separate section and optimizes its pages (#20678) 2016-09-09 06:48:17 +02:00			`group: utilities`
			`---`

			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.

Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)! 2019-01-08 17:33:28 +01:00			`{{< example >}}`
Docs: Breaks out Utilities into separate section and optimizes its pages (#20678) 2016-09-09 06:48:17 +02:00			`<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>`
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)! 2019-01-08 17:33:28 +01:00			`{{< /example >}}`
Docs: Breaks out Utilities into separate section and optimizes its pages (#20678) 2016-09-09 06:48:17 +02:00
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)! 2019-01-08 17:33:28 +01:00			`{{< highlight scss >}}`
Docs: Breaks out Utilities into separate section and optimizes its pages (#20678) 2016-09-09 06:48:17 +02:00			`// Usage as a mixin`
			`.skip-navigation {`
			`@include sr-only;`
			`@include sr-only-focusable;`
			`}`
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)! 2019-01-08 17:33:28 +01:00			`{{< /highlight >}}`