HTML and CSS Reference
In-Depth Information
Figure 12-17.
Headings are revealed in non-CSS-capable browsers.
■
Tip
Applying headings before blocks of content can be extremely useful for nonvisual browsing, too, and
by that we mean screen reader users. It is possible—and very convenient—to navigate through a page by
jumping from heading to heading, and providing a heading prior to key navigation areas can help immensely.
However, there is a small problem: screen readers ignore content that is set to
display:none
. An alterna-
tive approach that will work for screen readers is to position the headings absolutely (thus removing them
from the document flow) and then using a massive negative text indent to shift the text content off screen,
like so:
.hiddenHeading {position:absolute;text-indent:-10000px;font-size:1px;}
.
