Screen Reader Only Content

Screen reader only content

For the Skip to Main Content plugin, I had to create a link that would be visible to screen readers, but not to sighted users.

If you were to hide a link by setting display: none in the CSS then screen readers wouldn’t find it.

Instead, we position it absolutely, off the left of the screen.

.screenreader-only
{
        position: absolute;
        left: -10000px;
}

This means it is not technically hidden and the “Skip to main content” link is included in the list of links detected by the screen reader.

NVDA Elements List showing Skip to main content in the list of Links

This is the technique recommended by WebAIM for screen reader only links.

Click here to add a comment

Leave a comment: