Pro HTML5 and CSS3 Design Patterns

CHAPTER 10 ■ STYLING TEXT

Screenreader-only

Problem You want text to be read by a screenreader program, and you don’t want sighted users to see
the text. This design pattern is useful when you want to provide instructions to nonsighted
users that you don’t want to give to sighted users.

Solution Remove the element from the flow. Shrink the element to one pixel. Hide the text when it
overflows its one-pixel size. Move the element offscreen.

Use position:absolute to remove the element from the flow.

Use left:-9999px to move the element off the left side of the viewport.

Use top:-9999px to move the element above the top of the viewport.

Use width:1px to shrink the element to one pixel wide.

Use height:1px to shrink the element to one pixel tall.

Use overflow:hidden to hide any text that overflows the one pixel height and width.

Pattern SELECTOR { position:absolute; left:-9999px; top:-9999px; width:1px;
height:1px; overflow:hidden; }

Location This pattern applies to any element.

Tips Occasionally, you may want to give instructions to nonsighted users that you don’t want to
give to sighted users. For example, when filling out a form, the layout, graphics, and colors
may make something obvious to a sighted user that is unknowable to a nonsighted user.
You can use this design pattern to create instructions for nonsighted users without
cluttering the screen seen by sighted users. Such instructions should be brief like headings,
captions, and tooltips.
You may want to include a screenreader-only link at the beginning of the document that
skips to the main content, such as “skip to main content.” This keeps the visual interface
uncluttered and makes the document easier for nonsighted users to navigate. On the other
hand, visually impaired users, mobile users, and others benefit from seeing such a link, so
you may not want to hide it.

Disadvantages Screenreader-only text is visible in non-CSS browsers and browsers that don’t support
absolute positioning.

Related to Text Replacement, Invisible Text; Absolute (Chapter 7); Left-aligned Sized Absolute Element
(Chapter 9); Tabs, Flyout (Chapter 17)