kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity
twbs--bootstrap/docs/4.0/utilities/screenreaders.md
Mark Otto 98111214c2
Update .sr-only mixin and utility (#25197) 
* Remove clip-path from .sr-only utility as it causes perf regressions in Chrome

* change snippet to example
2018-02-11 15:05:50 -08:00

807 B
Raw Blame History

layout title description group toc
docs Screenreaders Use screenreader utilities to hide elements on all devices except screen readers. utilities true

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.

{%- comment -%} Necessary for following [accessibility best practices]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/#accessibility). {%- endcomment -%}

{% example html %} Skip to main content {% endexample %}

{% highlight scss %} // Usage as a mixin .skip-navigation { @include sr-only; @include sr-only-focusable; } {% endhighlight %}