Screenreaders

Bootstrap screenreaders

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

It’s simple to hide an element to all devices except screen readers with .sr-only. Just combine .sr-only with .sr-only-focusable to show the element again when it’s focused (e.g. by a keyboard-only user). They can also be used as mixins.

        
            

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

      
        
    

        
            

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