Invisible text
Invisible text
Sometime you may actually want to make text invisible. Invisible text can be especially useful for screen reader users, perhaps to assign a label to a form item or insert a heading ahead of a section. Don't want to change the visual appearance by inserting these? Make them invisible and no one using a visual browser knows that they're there.
You may also want to make text invisible if using a print or handheld CSS file, as some information may not need to be displayed on either of these mediums (see below for more on this).
To make text invisible you can use display: none - easy! This works fine for hiding text from handhelds (if CSS is supported) and printed web pages, but isn't so great for many screen readers. Screen readers are now becoming too clever for their own good, and some will actually ignore the any text that has the rule display: none assigned to it.
For screen readers users therefore, a new approach is needed: position: absolute; left: -9000px. This basically takes the text and positions it 9000px to the left of the left edge of the screen, essentially making it invisible.
Adverts
