Offscreen Content

Content that is invisible or obscured to a user using a mouse, but still accessible to a keyboard or screen reader user.

The Problem

Users navigating with a keyboard or screen reader will lose their place when offscreen content is focused, potentially also able to interact with page content they shouldn't be.

The Solution

Making the element(s) invisible using CSS display: none or visibility: hidden. If the element(s) are supposed to be offscreen or obscured but unusable then aria-hidden can be used.

Related Articles

Live Examples

Before illustrates the problem, After illustrates the solution. Click the header to see it larger in a modal.

before

after

Code Comparison

Code diff between the before and after examples above to show the changes necessary. To copy the final source click on the 'after' path link before the diff.

source

Comparing /examples/focus/offscreen-content/before/index.html to /examples/focus/offscreen-content/after/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Accessibility Solutions - Focus - Offscreen Content</title>
<link rel="stylesheet" href="../../../presentation.css">
<link rel="stylesheet" href="offscreen-content.css">
</head>
<body>
<header role="banner">
<nav class="header-nav" role="navigation">
<a class="header-nav__link-toggle" href="#">Menu</a>
<ul id="menu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Architecto</a></li>
<li><a href="#">Quas</a></li>
<li><a href="#">Nobis</a></li>
<li><a href="#">Eligendi</a></li>
<li><a href="#">Quaerat</a></li>
</ul>
</nav>
</header>
<main id="main" role="main" tabindex="-1">
<p>Lorem ipsum dolor sit amet consectetur <a href="#">adipisicing elit</a>. Velit ea optio est adipisci beatae alias porro voluptatibus culpa dicta veniam, esse quidem nihil odio voluptatem error tempora nostrum minima magni et. Deleniti possimus corrupti mollitia cupiditate totam facere molestias, sunt amet exercitationem inventore odio veritatis eaque doloribus esse tenetur officia, odit hic obcaecati harum nostrum blanditiis ratione, fuga in? Dolorem tempore nemo saepe et tenetur nobis iste. Atque sequi a aliquid corrupti, ut fugit magni, laboriosam quo quidem fuga incidunt nemo modi consequatur distinctio quisquam provident impedit veritatis quam corporis recusandae. Amet delectus voluptatem ipsum earum debitis cupiditate iure, libero perferendis non eius explicabo porro minus temporibus nostrum corrupti iste. Accusamus, pariatur repudiandae! Exercitationem hic in deleniti culpa, rerum repellendus iure dolore blanditiis quisquam maiores, ipsa temporibus illum, sapiente officia repellat dignissimos minima beatae quaerat? Fugiat, molestiae sequi. Nulla assumenda quisquam, enim itaque voluptatem eum sed, suscipit doloribus ex officiis debitis vitae est. Excepturi ea, dicta expedita explicabo veritatis animi aspernatur quae, at molestias amet quasi ipsum ut labore totam ullam id accusamus, sit dolorem nihil repellendus? Excepturi et facere totam quibusdam vitae rerum, nulla a ut eveniet! Placeat dolor soluta consectetur praesentium obcaecati doloribus quidem consequuntur aliquam incidunt! Vel!</p>
</main>
<script src="offscreen-content.js"></script>
</body>
</html>

styles

Comparing /examples/focus/offscreen-content/before/offscreen-content.css to /examples/focus/offscreen-content/after/offscreen-content.css

#menu {
background: white;
bottom: 0;
box-shadow: 0 0 12px 1px #00000075;
height: calc(100% - 40px);
left: 0;
margin: 0;
min-width: 220px;
opacity: 0;
overflow: auto;
padding: 20px;
position: absolute;
transform: translateX(-100%);
transition: all 0.3s ease;
z-index: 100;
visibility: hidden;
}

#menu.nav-opened {
opacity: 1;
transform: translateX(0)
;
visibility: visible
;
}

javascript

Comparing /examples/focus/offscreen-content/before/offscreen-content.js to /examples/focus/offscreen-content/after/offscreen-content.js

(function() {
'use strict';

function SlideOutMenu(id) {
this.el = document.querySelector(id);
this.toggleButton = document.getElementsByClassName('header-nav__link-toggle')[0];

this.toggleButton.addEventListener('click', this.menuToggle.bind(this));
}

SlideOutMenu.prototype.menuToggle = function(e) {
e.preventDefault();
this.el.classList.toggle("nav-opened");
}

var menu = new SlideOutMenu('#menu');
}());