Offscreen Text

From Level Access Web Labs
Jump to: navigation, search

Offscreen CSS Class

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

Offscreen CSS Class, With Annotations

.offscreen {
    /* For defensive coding, !important is appropriate here. If any one of these declarations gets overridden, it will cause 
       hard-to-detect bugs, in some cases just for certain content in a specific browser or screen reader.
       
       If a web developer needs to override some or all of the declarations, they may increase selector specificity. Example: 
       body .offscreen {}
       
       In user-defined style sheets, user !important declarations can be written to override author !important declarations.
    */
    position: absolute!important; /* Take the element out of the page flow - for visual hiding */
    clip: rect(1px 1px 1px 1px)!important; /* For IE6 and IE7 - for visual hiding */
    clip: rect(1px, 1px, 1px, 1px)!important; /* clip:rect is deprecated, but required for browsers that don't yet support clip-path */
    clip-path: inset(50%)!important; /* For modern browsers - for visual hiding */
    padding: 0!important; /* Prevent visual glitches */
    border: 0!important; /* Prevent visual glitches */
    height: 1px!important; /* Necessary so assistive technologies won't treat it as completely hidden */
    width: 1px!important; /* Necessary so assistive technologies won't treat it as completely hidden */
    overflow: hidden!important; /* Combined with clipping - for visual hiding */
    white-space: nowrap!important; /* 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

</tr>

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

Windows7, IE11, NVDA 2016.3

Yes

Yes

Yes

Windows7, Firefox (Latest), NVDA 2016.3

Yes

Yes

Yes

Windows7, Chrome (Latest), NVDA 2016.3

Yes

Yes

Yes

Windows7, IE11, Window-eyes 9.5.3

Yes

Yes

Yes

Windows7, Firefox (Latest), Window-eyes 9.5.3

Yes

Yes

Yes

Windows7, Chrome (Latest), Window-eyes 9.5.3

No

Yes

Yes

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

Yes

Yes

Yes

Android Chrome (Latest), TalkBack 5.04

Yes

Yes

Yes

Android FireFox (Latest), TalkBack 5.04

Yes

Yes

No

Note: Use of !important my not allow user styles that are added with plug-ins such as Stylish to come through. For example, a user with low vision may want to see the screen reader only text but since Stylish styles are not considered user styles they do not override document level styles with !important.

Retrieved from "https://labs.levelaccess.com/index.php?title=Offscreen_Text&oldid=4269"

Navigation menu