Offscreen Text

From Level Access Web Labs
Revision as of 20:32, 17 November 2016 by Mevan (talk | contribs) (Make an annotated copy of the CSS rule)
Jump to navigation Jump to search

Offscreen CSS Class

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

Offscreen CSS Class, With Annotations

.offscreen {
position: absolute; /* */
clip: rect(1px 1px 1px 1px); /* For backward compatibility with IE6 and IE7 */
clip: rect(1px, 1px, 1px, 1px); /* clip:rect is deprecated, but required for browsers that don't yet support clip-path */
clip-path: inset(50%); /* For modern browsers */
padding: 0; /* Prevent visual glitches */
border: 0; /* Prevent visual glitches */
height: 1px; /* Necessary so assistive technologies won't treat it as completely hidden */
width: 1px; /* Necessary so assistive technologies won't treat it as completely hidden */
overflow: hidden; /* Combined with clipping, this is what hides the content visually */
white-space: nowrap; /* Without this, certain assistive technologies will announce a sentence as if it has no whitespace between words */
}

Examples

Offscreen Sentence as Static Text

This is a sentence that is visible to all sighted users.
This is a sentence that is positioned off screen so it cannot be seen visually.

Offscreen Skip Link That Unhides onFocus

Skip to content
This is page header content that is visible on screen, though the skip link above it is not currently visible. Focusing to the skip link however will cause it to be rendered visibly until focus moves away.
This is the main content that the skip link moves focus to when activated.

Offscreen Live Region (Includes aria-live="polite")

Browser and Assistive Technology Support

Platform, Browser, & AT

Static Offscreen Content

Focusable Offscreen Skiplink

Offscreen Live Region

Windows7, IE11, JAWS18

Yes

Yes

Yes

Windows7, Firefox (Latest), JAWS18

Yes

Yes

Yes

Windows7, Chrome (Latest), JAWS18

Yes

Yes

Yes

iOS (iPhone 6), Safari (Latest), VoiceOver

Yes

Yes

Yes

Navigation menu