2018-09-30 23:01:58 +01:00
---
id: 587d778d367417b2b2512aaa
title: Make Elements Only Visible to a Screen Reader by Using Custom CSS
challengeType: 0
2019-04-10 12:23:12 -04:00
videoUrl: 'https://scrimba.com/c/cJ8QGkhJ'
2019-08-05 09:17:33 -07:00
forumTopicId: 301020
2018-09-30 23:01:58 +01:00
---
## Description
< section id = 'description' >
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.
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.
Here's an example of the CSS rules that accomplish this:
2019-05-14 01:11:58 -07:00
```css
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
```
2019-03-22 22:02:12 +08:00
< strong > Note:< / strong > The following CSS approaches will NOT do the same thing:
2018-09-30 23:01:58 +01: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 >
< / section >
## Instructions
< section id = 'instructions' >
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 < code > sr-only< / code > class, but the CSS rules aren't filled in yet. Give the < code > position< / code > an absolute value, the < code > left< / code > a -10000px value, and the < code > width< / code > and < code > height< / code > both 1px values.
< / section >
## Tests
< section id = 'tests' >
```yml
2018-10-04 14:37:37 +01:00
tests:
- text: Your code should set the < code > position</ code > property of the < code > sr-only</ code > class to a value of absolute.
2019-07-24 02:42:26 -07:00
testString: assert($('.sr-only').css('position') == 'absolute');
2018-10-04 14:37:37 +01:00
- text: Your code should set the < code > left</ code > property of the < code > sr-only</ code > class to a value of -10000px.
2019-07-24 02:42:26 -07:00
testString: assert($('.sr-only').css('left') == '-10000px');
2018-10-04 14:37:37 +01:00
- text: Your code should set the < code > width</ code > property of the < code > sr-only</ code > class to a value of 1 pixel.
2019-07-24 02:42:26 -07:00
testString: assert(code.match(/width:\s*?1px/gi));
2018-10-04 14:37:37 +01:00
- text: Your code should set the < code > height</ code > property of the < code > sr-only</ code > class to a value of 1 pixel.
2019-07-24 02:42:26 -07:00
testString: assert(code.match(/height:\s*?1px/gi));
2018-09-30 23:01:58 +01:00
```
< / section >
## Challenge Seed
< section id = 'challengeSeed' >
< div id = 'html-seed' >
```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 07:20:46 -08:00
<!-- Stacked bar chart of weekly training -->
2018-09-30 23:01:58 +01: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 01:01:53 +01:00
< th scope = "col" > Total< / th >
2018-09-30 23:01:58 +01: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 >
```
< / div >
< / section >
## Solution
< section id = 'solution' >
2019-04-24 09:42:46 -04: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 07:20:46 -08:00
<!-- Stacked bar chart of weekly training -->
2019-04-24 09:42:46 -04: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 23:01:58 +01:00
```
2019-07-18 08:24:12 -07:00
2018-09-30 23:01:58 +01:00
< / section >
