Difference between revisions of "Offscreen Text"

From Level Access Web Labs
Jump to navigation Jump to search
(Offscreen CSS Class: Add !important)
(Offscreen CSS Class, With Annotations: Explain position:absolute and clarify others)
Line 28: Line 28:
 
       In user-defined style sheets, user !important declarations can be written to override author !important declarations.
 
       In user-defined style sheets, user !important declarations can be written to override author !important declarations.
 
     */
 
     */
     position: absolute!important; /* */
+
     position: absolute!important; /* Take the element out of the page flow - for visual hiding */
     clip: rect(1px 1px 1px 1px)!important; /* For backward compatibility with IE6 and IE7 */
+
     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: 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 */
+
     clip-path: inset(50%)!important; /* For modern browsers - for visual hiding */
 
     padding: 0!important; /* Prevent visual glitches */
 
     padding: 0!important; /* Prevent visual glitches */
 
     border: 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 */
 
     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 */
 
     width: 1px!important; /* Necessary so assistive technologies won't treat it as completely hidden */
     overflow: hidden!important; /* Combined with clipping, this is what hides the content visually */
+
     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 */
 
     white-space: nowrap!important; /* Without this, certain assistive technologies will announce a sentence as if it has no whitespace between words */
 
}
 
}

Revision as of 22:08, 17 November 2016

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

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