2018-09-30 22:01:58 +00:00
---
id: 587d778d367417b2b2512aaa
title: Make Elements Only Visible to a Screen Reader by Using Custom CSS
challengeType: 0
2019-04-10 16:23:12 +00:00
videoUrl: 'https://scrimba.com/c/cJ8QGkhJ'
2019-08-05 16:17:33 +00:00
forumTopicId: 301020
2021-01-13 02:31:00 +00:00
dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
2018-09-30 22:01:58 +00:00
Have you noticed that all of the applied accessibility challenges so far haven't used any CSS? This is to show the importance of a logical document outline, and using semantically meaningful tags around your content before introducing the visual design aspect.
2020-11-27 18:02:05 +00:00
2018-09-30 22:01:58 +00:00
However, CSS's magic can also improve accessibility on your page when you want to visually hide content meant only for screen readers. This happens when information is in a visual format (like a chart), but screen reader users need an alternative presentation (like a table) to access the data. CSS is used to position the screen reader-only elements off the visual area of the browser window.
2020-11-27 18:02:05 +00:00
2018-09-30 22:01:58 +00:00
Here's an example of the CSS rules that accomplish this:
2019-05-14 08:11:58 +00:00
```css
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
```
2020-11-27 18:02:05 +00:00
**Note:** The following CSS approaches will NOT do the same thing:
2018-09-30 22:01:58 +00:00
< ul >
< li > < code > display: none;< / code > or < code > visibility: hidden;< / code > hides content for everyone, including screen reader users< / li >
< li > Zero values for pixel sizes, such as < code > width: 0px; height: 0px;< / code > removes that element from the flow of your document, meaning screen readers will ignore it< / li >
< / ul >
2020-11-27 18:02:05 +00:00
# --instructions--
2021-02-01 19:56:07 +00:00
Camper Cat created a really cool stacked bar chart for his training page, and put the data into a table for his visually impaired users. The table already has an `sr-only` class, but the CSS rules aren't filled in yet. Give the `position` an `absolute` value, the `left` a `-10000px` value, and the `width` and `height` both `1px` values.
2020-11-27 18:02:05 +00:00
# --hints--
2021-02-01 19:56:07 +00:00
Your code should set the `position` property of the `sr-only` class to a value of `absolute` .
2020-11-27 18:02:05 +00:00
```js
assert($('.sr-only').css('position') == 'absolute');
2018-09-30 22:01:58 +00:00
```
2021-02-01 19:56:07 +00:00
Your code should set the `left` property of the `sr-only` class to a value of `-10000px` .
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert($('.sr-only').css('left') == '-10000px');
```
2018-09-30 22:01:58 +00:00
2021-02-01 19:56:07 +00:00
Your code should set the `width` property of the `sr-only` class to a value of `1` pixel.
2020-11-27 18:02:05 +00:00
```js
assert(code.match(/width:\s*?1px/gi));
```
2021-02-01 19:56:07 +00:00
Your code should set the `height` property of the `sr-only` class to a value of `1` pixel.
2020-11-27 18:02:05 +00:00
```js
assert(code.match(/height:\s*?1px/gi));
```
# --seed--
## --seed-contents--
2018-09-30 22:01:58 +00:00
```html
< head >
< style >
.sr-only {
position: ;
left: ;
width: ;
height: ;
top: auto;
overflow: hidden;
}
< / style >
< / head >
< body >
< header >
< h1 > Training< / h1 >
< nav >
< ul >
< li > < a href = "#stealth" > Stealth & Agility< / a > < / li >
< li > < a href = "#combat" > Combat< / a > < / li >
< li > < a href = "#weapons" > Weapons< / a > < / li >
< / ul >
< / nav >
< / header >
< section >
< h2 > Master Camper Cat's Beginner Three Week Training Program< / h2 >
< figure >
2020-02-27 15:20:46 +00:00
<!-- Stacked bar chart of weekly training -->
2018-09-30 22:01:58 +00:00
< p > [Stacked bar chart]< / p >
< br / >
< figcaption > Breakdown per week of time to spend training in stealth, combat, and weapons.< / figcaption >
< / figure >
< table class = "sr-only" >
< caption > Hours of Weekly Training in Stealth, Combat, and Weapons< / caption >
< thead >
< tr >
< th > < / th >
< th scope = "col" > Stealth & Agility< / th >
< th scope = "col" > Combat< / th >
< th scope = "col" > Weapons< / th >
2018-10-08 00:01:53 +00:00
< th scope = "col" > Total< / th >
2018-09-30 22:01:58 +00:00
< / tr >
< / thead >
< tbody >
< tr >
< th scope = "row" > Week One< / th >
< td > 3< / td >
< td > 5< / td >
< td > 2< / td >
< td > 10< / td >
< / tr >
< tr >
< th scope = "row" > Week Two< / th >
< td > 4< / td >
< td > 5< / td >
< td > 3< / td >
< td > 12< / td >
< / tr >
< tr >
< th scope = "row" > Week Three< / th >
< td > 4< / td >
< td > 6< / td >
< td > 3< / td >
< td > 13< / td >
< / tr >
< / tbody >
< / table >
< / section >
< section id = "stealth" >
< h2 > Stealth & Agility Training< / h2 >
< article > < h3 > Climb foliage quickly using a minimum spanning tree approach< / h3 > < / article >
< article > < h3 > No training is NP-complete without parkour< / h3 > < / article >
< / section >
< section id = "combat" >
< h2 > Combat Training< / h2 >
< article > < h3 > Dispatch multiple enemies with multithreaded tactics< / h3 > < / article >
< article > < h3 > Goodbye, world: 5 proven ways to knock out an opponent< / h3 > < / article >
< / section >
< section id = "weapons" >
< h2 > Weapons Training< / h2 >
< article > < h3 > Swords: the best tool to literally divide and conquer< / h3 > < / article >
< article > < h3 > Breadth-first or depth-first in multi-weapon training?< / h3 > < / article >
< / section >
< footer > © 2018 Camper Cat< / footer >
< / body >
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-09-30 22:01:58 +00:00
2019-04-24 13:42:46 +00:00
```html
< head >
< style >
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
< / style >
< / head >
< body >
< header >
< h1 > Training< / h1 >
< nav >
< ul >
< li > < a href = "#stealth" > Stealth & Agility< / a > < / li >
< li > < a href = "#combat" > Combat< / a > < / li >
< li > < a href = "#weapons" > Weapons< / a > < / li >
< / ul >
< / nav >
< / header >
< section >
< h2 > Master Camper Cat's Beginner Three Week Training Program< / h2 >
< figure >
2020-02-27 15:20:46 +00:00
<!-- Stacked bar chart of weekly training -->
2019-04-24 13:42:46 +00:00
< p > [Stacked bar chart]< / p >
< br / >
< figcaption > Breakdown per week of time to spend training in stealth, combat, and weapons.< / figcaption >
< / figure >
< table class = "sr-only" >
< caption > Hours of Weekly Training in Stealth, Combat, and Weapons< / caption >
< thead >
< tr >
< th > < / th >
< th scope = "col" > Stealth & Agility< / th >
< th scope = "col" > Combat< / th >
< th scope = "col" > Weapons< / th >
< th scope = "col" > Total< / th >
< / tr >
< / thead >
< tbody >
< tr >
< th scope = "row" > Week One< / th >
< td > 3< / td >
< td > 5< / td >
< td > 2< / td >
< td > 10< / td >
< / tr >
< tr >
< th scope = "row" > Week Two< / th >
< td > 4< / td >
< td > 5< / td >
< td > 3< / td >
< td > 12< / td >
< / tr >
< tr >
< th scope = "row" > Week Three< / th >
< td > 4< / td >
< td > 6< / td >
< td > 3< / td >
< td > 13< / td >
< / tr >
< / tbody >
< / table >
< / section >
< section id = "stealth" >
< h2 > Stealth & Agility Training< / h2 >
< article > < h3 > Climb foliage quickly using a minimum spanning tree approach< / h3 > < / article >
< article > < h3 > No training is NP-complete without parkour< / h3 > < / article >
< / section >
< section id = "combat" >
< h2 > Combat Training< / h2 >
< article > < h3 > Dispatch multiple enemies with multithreaded tactics< / h3 > < / article >
< article > < h3 > Goodbye, world: 5 proven ways to knock out an opponent< / h3 > < / article >
< / section >
< section id = "weapons" >
< h2 > Weapons Training< / h2 >
< article > < h3 > Swords: the best tool to literally divide and conquer< / h3 > < / article >
< article > < h3 > Breadth-first or depth-first in multi-weapon training?< / h3 > < / article >
< / section >
< footer > © 2018 Camper Cat< / footer >
< / body >
2018-09-30 22:01:58 +00:00
```