CSS Off-screen text

From Level Access Web Labs
Revision as of 16:06, 14 June 2017 by Jdietz (talk | contribs)
Jump to navigation Jump to search

NOTE: This page has been superseded.

Please use the page Offscreen Text, which is more recent, has more testable examples, has annotations, and has a matrix of testing results for different Browsers/ATs.

(original page follows)

The text below this text but above the horizontal rule is hidden off screen with CSS clipping.

This text is hidden off-screen.

Text inside this link is offscreen This is a link

Off-screen label for radio button below this horizontal rule

This text is hidden off-screen with the second technique.

CSS Code used in this example

.offscreen {
position: absolute;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
padding: 0;
border: 0;
height: 1px; 
width: 1px; 
overflow: hidden;
white-space: nowrap;