Screen Reader utilities in bootstrap with Examples

The screen reader utility in Bootstrap helps to restrict an element to the screen readers only. That is by using the screen reader utility we can hide an element in all other devices except for screen readers.

The Screen Reader utility also provide an option to display the hidden elements again when focused. For example, when navigated with a key board.

Classes Available in Screen Reader Utility:



  • .sr-only: This class hides an element in all devices except for the Screen Readers.
  • .sr-only-focusable: If this class is used on an hidden element with .sr-only class, then the element will be visible when focused by any thing like keyboard.

Below examples explains the Screen Reader utilities in Bootstrap:

  • Let us create a Heading element with .sr-only class:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>screen reader</title>
       
    </head>
      
    <body>
        <h1 class="sr-only">Geeks for geek</h1>
    </body>
    </html>

    chevron_right

    
    

    Output:
    heading Screen Reader
    So as we can see it’s not visible in the browser, but if we look in the inspector we can see that it’s still there however not taking up any space on the screen now.

  • Let’s now create a link which will act as a skip link that will become visible when gained focus by navigating with a keyboard. To do this we use both of the classes .sr-only and .sr-only-focusable as shown below:
    class="sr-only  sr-only-focusable" 
    
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>screen reader</title>
       
    </head>
      
    <body>
        <a class="sr-only  sr-only-focusable" 
           href="#content">
            Skip to main content
        </a>
    </body>
    </html>

    chevron_right

    
    

    As we can see in the inspector it’s right beneath the heading element and both of them are hidden now.
    link_screen_reader_bootstrap

    On pressing the tab key once the Skip link will become highlighted.

    when we press tab



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.