From 320e6543f5d8a030a740ce8315a6385b26ff7d68 Mon Sep 17 00:00:00 2001 From: Jason Tarka Date: Thu, 17 Mar 2016 16:50:34 -0400 Subject: [PATCH] Contain offscreen contents in an invisible single-pixel onscreen element - Solves reading issues in both NVDA and VoiceOver, due to lack of linebreaks - Being inside the parent element lets you add an outline (eg: to visually indicate focus) without it stretching off the side of the screen - 2px indent causes the beginning of the text to start outside the visible edge of the element - 1px would cause some subpixel bleedover, causing it to be visible - Disallowing line break causes the entire text to overflow, and fixes the NVDA & VoiceOver issues - Setting padding, margin, border, etc. to nothing so any potential visibility is removed in case it's being used on an element that may later appear on screen - Keeping absolute position so it doesn't affect the page flow, particularly of anyone who's already relying on it --- offscreen.scss | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/offscreen.scss b/offscreen.scss index 597a15b..8050768 100644 --- a/offscreen.scss +++ b/offscreen.scss @@ -1,17 +1,20 @@ @mixin vui-offscreen() { - - $offset: -10000px; - position: absolute !important; - left: $offset; overflow: hidden; + width: 1px; height: 1px; - [dir="rtl"] & { - left: auto; - right: $offset; - } + font-size: 1px; + line-height: 1px; + text-indent: 2px; + white-space: nowrap; + padding: 0; + margin: 0; + background: none; + border: none; + box-shadow: none; + outline: none !important; // important to override :focus }