--- 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: # --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

[Stacked bar chart]


Breakdown per week of time to spend training in stealth, combat, and weapons.
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

[Stacked bar chart]


Breakdown per week of time to spend training in stealth, combat, and weapons.
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?

```