Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/accessibility.sr-only.css.html

Created April 20, 2021 10:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nfreear/6c5a35406b00122d0261db8d83727f82 to your computer and use it in GitHub Desktop.
Save nfreear/6c5a35406b00122d0261db8d83727f82 to your computer and use it in GitHub Desktop.
Download ZIP
Accessibility - "sr-only" / "visually-hidden" - Hide SMALL amounts of additional information from all BUT screen reader users.
Raw
accessibility.sr-only.css.html
<!doctype html><html lang="en"><meta charset="utf-8"> <title> "sr-only" demo </title>
<style>
body { margin: 1rem auto; max-width: 35rem; }
pre { background: #f8f8f8; border: 1px solid #ccc; margin: 2rem 0; padding: .7rem; }
/* Accessibility.
Hide from all BUT screen reader users - Aka "visually-hidden".
Please use sparingly!
*/
.sr-only,
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
</style>
<h1> <tt>sr-only</tt> / <tt>visually-hidden</tt> demo </h1>
<h2> Important note &mdash; use SPARINGLY ! </h2>
<p> Hide SMALL amounts of additional information from all BUT screen reader users. </p>
https://getbootstrap.com/docs/5.0/helpers/visually-hidden/
https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
<pre>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
</pre>
<h2> Use case 1: A visually-hidden "status" widget </h2>
<!-- WAI-ARIA live region -->
<div role="status" aria-live="polite" class="sr-only">
I'm a visually hidden "status" widget.
</div>
<p> Important — <a href="https://w3.org/TR/wai-aria-practices/#no_aria_better_bad_aria">No ARIA is better than Bad ARIA</a>!</p>
<pre>
&lt;div role="status" aria-live="polite" class="sr-only">
I'm a visually hidden "status" widget.
&lt;/div>
</pre>
<h2> Use case 2: A link with additional information visually-hidden </h2>
<p>
<a
href="https://www.open.ac.uk/about/main/sites/www.open.ac.uk.about.main/files/files/modern-slavery-act-statement.pdf"
title="Modern Slavery Act (PDF)"
>
Modern Slavery Act
<span class="sr-only"> (PDF) </span>
</a>
</p>
<pre>
&lt;a
href="https://www.open.ac.uk/.../modern-slavery-act-statement.pdf"
>
Modern Slavery Act
&lt;span class="sr-only"> - PDF &lt;/span>
&lt;/a>
</pre>
<pre>
20-April-2021.
</pre>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment