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>