HTML and CSS Reference
In-Depth Information
Another solution involves using the text-indent property to position the text off-
screen, but then care needs to be taken when content is written in Right-To-Left lan-
guage, where this solution would fail.
Using the clip property would avoid all of these problems, while having the content
readable across all screen readers.
Note
Jonathan Snook writes about why the clip property is the best way to hide
content visually, but still have it available for screen readers, at snook.ca/
archives/html_and_css/hiding-content-for-accessibility .
Those who extensively use keyboard navigation would also want to skip navigation.
But, because it is visually hidden, they would not know that this option exists. For
this case, you want this to be available when this element is in focus. Let us add an
additional class called focusable to make this available for our Skip Navigation
link that would make this option visible when they make this link active via keyboard
navigation.
<a class="visuallyhidden focusable"
href="#main">Skip Navigation</a>
The following screenshot shows how the Skip Navigation link is instantly visible
when the user switches keyboard focus to it:
Search WWH ::




Custom Search