For years WebAIM has recommended a specific technique for hiding content visually while allowing it to be read by screen readers. This involved using CSS to position the content above the top of the page. It has now been brought to our attention that if the off-screen content contains a focusable element (a link or form element), that the web browser will attempt to scroll to this element when it receives focus – thus scrolling to the top of the page. This could be confusing for sighted keyboard users.
To resolve this potential issue, we now recommend the following styles for hiding content off-screen:
This will move the element straight to the left a considerable distance. Because the hidden element is moved directly to the left, if a link or form element within it receives focus, the browser will not scroll to the top of the page.
The width, height, and overflow styles are likely a bit overkill, but account for rare instances where positioning is disabled, but other styles enabled. Or perhaps for viewports that have VERY large external margins. These styles can probably be omitted in most instances.
It is important to note that it is not generally practice to place links or form elements, which provide functionality, in a hidden element just for screen reader users. Functionality should typically be made available to all users. Additionally, discretion should be used in providing content, cues, or information only for screen reader users. Remember that sighted keyboard users may also benefit from this information. In general, content should only be hidden from sighted users and made available to screen reader users when content is apparent visually, but not apparent to screen reader users.
An article outlining proper and improper implementations and techniques for hiding content is available at http://webaim.org/techniques/css/invisiblecontent/.