---
id: 587d778d367417b2b2512aaa
title: Haz que los elementos solo sean visibles para un lector de pantalla mediante CSS personalizado
challengeType: 0
videoUrl: 'https://scrimba.com/c/cJ8QGkhJ'
forumTopicId: 301020
dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css
---
# --description--
¿Has notado que todos los desafíos de accesibilidad aplicados hasta ahora no han usado ningún CSS? Esto es para mostrar la importancia de un esquema de documento lógico, y el uso de etiquetas semánticamente significativas alrededor de tu contenido antes de introducir el aspecto de diseño visual.
Sin embargo, la magia de CSS también puede mejorar la accesibilidad en tu página cuando deseas ocultar visualmente contenido destinado solo para lectores de pantalla. Esto sucede cuando la información está en un formato visual (como un gráfico), pero los usuarios del lector de pantalla necesitan una presentación alternativa (como una tabla) para acceder a los datos. CSS se utiliza para colocar los elementos exclusivos de lector de pantalla fuera del área visual de la ventana del navegador.
Aquí hay un ejemplo de las reglas de CSS que logran esto:
```css
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
```
**Nota:** Los siguientes enfoques CSS No harán lo mismo:
display: none; o visibility: hidden; oculta el contenido para todos, incluidos los usuarios del lector de pantalla
Los valores cero para los tamaños del píxel, como width: 0px; height: 0px; eliminan ese elemento del flujo de tu documento, lo que significa que los lectores de pantalla lo ignorarán
# --instructions--
Camper Cat creó un gráfico de barras apiladas realmente genial para su página de entrenamiento y coloco los datos en una tabla para sus usuarios con dificultad visual. La tabla ya tiene una clase `sr-only`, pero las reglas de CSS aún no se han completado. Asigna a `position` un valor `absolute`, a `left` un valor de `-10000px`, y tanto a `width` como a `height` un valor de `1px`.
# --hints--
Tu código debe establecer la propiedad `position` de la clase `sr-only` en un valor de `absolute`.
```js
assert($('.sr-only').css('position') == 'absolute');
```
Tu código debe establecer la propiedad `left` de la clase `sr-only` en un valor de `-10000px`.
```js
assert($('.sr-only').css('left') == '-10000px');
```
Tu código debe establecer la propiedad `width` de la clase `sr-only` en un valor de `1` píxel.
```js
assert(code.match(/width:\s*?1px/gi));
```
Tu código debe establecer la propiedad `height` de la clase `sr-only` en un valor de `1` píxel.
```js
assert(code.match(/height:\s*?1px/gi));
```
# --seed--
## --seed-contents--
```html
Training
Master Camper Cat's Beginner Three Week Training Program
Hours of Weekly Training in Stealth, Combat, and Weapons
Stealth & Agility
Combat
Weapons
Total
Week One
3
5
2
10
Week Two
4
5
3
12
Week Three
4
6
3
13
Stealth & Agility Training
Climb foliage quickly using a minimum spanning tree approach
No training is NP-complete without parkour
Combat Training
Dispatch multiple enemies with multithreaded tactics
Goodbye, world: 5 proven ways to knock out an opponent
Weapons Training
Swords: the best tool to literally divide and conquer
Breadth-first or depth-first in multi-weapon training?
```
# --solutions--
```html
Training
Master Camper Cat's Beginner Three Week Training Program
Hours of Weekly Training in Stealth, Combat, and Weapons
Stealth & Agility
Combat
Weapons
Total
Week One
3
5
2
10
Week Two
4
5
3
12
Week Three
4
6
3
13
Stealth & Agility Training
Climb foliage quickly using a minimum spanning tree approach
No training is NP-complete without parkour
Combat Training
Dispatch multiple enemies with multithreaded tactics
Goodbye, world: 5 proven ways to knock out an opponent
Weapons Training
Swords: the best tool to literally divide and conquer
Breadth-first or depth-first in multi-weapon training?