static/scss/bootstrap-4.0.0-alpha.6/docs/utilities/screenreaders.md

   1 ---
   2 layout: docs
   3 title: Screenreaders
   4 group: utilities
   5 ---
   6
   7 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.
   8
   9 {% comment %}
  10 Necessary for following [accessibility best practices]({{ site.baseurl }}/getting-started/#accessibility).
  11 {% endcomment %}
  12
  13 {% highlight html %}
  14 <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
  15 {% endhighlight %}
  16
  17 {% highlight scss %}
  18 // Usage as a mixin
  19 .skip-navigation {
  20   @include sr-only;
  21   @include sr-only-focusable;
  22 }
  23 {% endhighlight %}