Offscreen Text

From Level Access Web Labs
Revision as of 23:02, 14 November 2016 by Oedwards (talk | contribs) (Offscreen Sentance as Static Text: Spelling correction)
Jump to navigation Jump to search

Offscreen CSS Class

.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;
}

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