Skippy
A brief overview of Space's features and limitations for the creation of accessible content.
Visually hidden content
Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the .sr-only
class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.
When $enable-accessibility
is set to true, you'll be able to use accessibility. By default, $enable-accessibility
is disabled and the example below is intentionally broken. This is done for easier customization from the moment you start using Bootstrap. Enable accessibility by changing $enable-accessibility
from false to true, via: assets/include/scss/base/_skippy.scss
<p class="text-danger">
<span class="sr-only">Danger: </span>
This action is not reversible
</p>
For visually hidden interactive controls, such as traditional "skip" links, .sr-only
can be combined with the .sr-only-focusable
class. This will ensure that the control becomes visible once focused (for sighted keyboard users).
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>