solvit.io

Make some web page contents available only for screen readers

Solution

Apply these CSS styles to hide HTML elements on web browsers whilst making them available on screen readers:

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
Example
<body>
    <a href="#content" class="sr-only">Skip to main content</a>

    <div id="content" tabindex="-1">
        <!-- ... -->
    </div>
</body>
Find more solutions about: , , ,