CSS : 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.

Other Topics

CSS : Vertically aligning with CSS ,CSS : Positioning within a container ,CSS : Hiding text using text-indent ,CSS : The * HTML hack ,CSS : Minimum width for a page ,CSS : Same navigation code on every page ,CSS : 3-d push button effect ,CSS : Document for handhelds ,CSS : Invisible text ,CSS : Disappearing text or images in IE? ,CSS : Image replacement technique,CSS : Box model hack alternative,CSS : Centre aligning a block element,CSS : Class selector,CSS : Sticky Footer Layout,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,CSS : Id Selector