Screen Reader Utilities In Bootstrap With Examples

Posted By Bajarangi soft , Posted On 12-10-2020

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:
1.sr-only: This class hides an element in all devices except for the Screen Readers.
2.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:
Example-1

<!DOCTYPE html>
<html>
<head>
    <title>screen reader</title>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>

<body>
<h1 class="sr-only">BAJARANGI SOFT</h1>
</body>
</html>

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"

Example-2

<!DOCTYPE html>
<html>
<head>
    <title>screen reader</title>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>

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

Related Post

Login Screen With Wave Clipper Curved In Flutter Using Android
Gradient Login Screen Design With Animation In Flutter Android
Alert PopupDialog With Login Screen In Flutter App
How To Add Device Screen Height&Width In Flutter App
Transparent Appbar With Full Screen Image In Flutter
How To Make Splash Screen Using Flutter In Android
How To Get Information About The User Screen In JavaScript
How To Get Window Screen Location URL In JavaScript