Difference between revisions of "Offscreen Text"

From Level Access Web Labs
Jump to navigation Jump to search
m (Offscreen Sentance as Static Text: Spelling correction)
Line 18: Line 18:
 
==Examples==
 
==Examples==
  
===Offscreen Sentance as Static Text===
+
===Offscreen Sentence as Static Text===
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
Line 50: Line 50:
  
 
<div>
 
<div>
This is a sentance that is visible to all sighted users.
+
This is a sentence that is visible to all sighted users.
 
</div>
 
</div>
 
<div class="offscreen">
 
<div class="offscreen">
This is a sentance that is positioned off screen so it cannot be seen visually.
+
This is a sentence that is positioned off screen so it cannot be seen visually.
 
</div>
 
</div>
 
</html>
 
</html>

Revision as of 23:02, 14 November 2016

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