Hiding Content Offscreen for Screen Reader Users

Sometimes it is helpful to hide content offscreen using CSS for screen reader users in order to give more context than is possible within the visual page. There are many ways to accomplish this, but one method that has proved reliable is the following.

.screen-reader-offscreen {
position:absolute;
left:-999px;
width:1px;
height:1px;
top:auto;
overflow:hidden;
}

Any time you hide content offscreen, you should first ask if this is the best design approach in your situation. Some issues to think about are:

1. if the content is important to screen reader users, is it also important to sighted users? If so, should you think of another way to display the information onscreen?
2. Are there other techniques for conveying this information to screen reader users other than positioning it offscreen? Are there ARIA attributes like aria-label, aria-labelledby, and aria-describedby that might accomplish the same thing?

Positioning content offscreen is sometimes necessary, but it should not necessarily be the first course of action when trying to solve a particular problem.