Offscreen Text

From Level Access Web Labs
Revision as of 20:28, 27 June 2021 by Oedwards (talk | contribs) (Make the focusable offscreen skip link example clearer, and show the CSS that's needed to provide a skip link which becomes visible.)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to 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 a example of page header content that is visible on screen, though the skip link above it is not currently visible. Focusing on 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.



Click on this to move focus to this part of the page, and then press the key combination Shift-Tab to move focus back to the off-screen skip link.



The following additional CSS causes the offscreen skip link to become visible when it receives focus:

.offscreen:focus {
position: absolute;
clip: auto;
clip-path: none;
padding: 3px 4px;
border: none;
height: auto;
width: auto;
overflow: visible;
white-space: normal;
text-decoration: none;
background: #F2D3A1;
color: #000;
}

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

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.

Navigation menu