---
id: 587d778d367417b2b2512aaa
title: Rendere gli elementi visibili solo a uno screen reader usando del CSS ad hoc
challengeType: 0
videoUrl: 'https://scrimba.com/c/cJ8QGkhJ'
forumTopicId: 301020
dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css
---
# --description--
Hai notato che tutte le sfide di accessibilità viste finora non hanno utilizzato alcun CSS? Questo mostra quanto è importante utilizzare una struttura logica e dei tag semanticamente significativi intorno al contenuto, prima di introdurre l'aspetto del visual design.
Tuttavia, la magia dei CSS può anche migliorare l'accessibilità sulla tua pagina quando vuoi nascondere visivamente i contenuti destinati solo agli screen reader. Questo accade quando le informazioni sono in formato visivo (come un grafico), ma gli utenti degli screen reader hanno bisogno di una presentazione alternativa (come una tabella) per accedere ai dati. Il CSS è utilizzato per posizionare gli elementi destinati solo agli screen reader fuori dall'area visiva della finestra del browser.
Ecco un esempio delle regole CSS che lo rendono possibile:
```css
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
```
**Nota:** I seguenti approcci CSS NON fara la stessa cosa:
display: none; o visibility: hidden; nascondono i contenuti a tutti, compresi gli utenti degli screen reader
Assegnare valori nulli per le dimensioni in pixel, come width: 0px; height: 0px; rimuove l'elemento dal flusso del documento, di conseguenza gli screen reader lo ignoreranno
# --instructions--
Camper Cat ha creato un bel grafico a barre sovrapposte per la sua pagina di allenamento, e ha messo i dati in una tabella per i suoi utenti ipovedenti. La tabella ha già una classe `sr-only`, ma le regole CSS non sono ancora complete. Assegna a `position` il valore `absolute`, a `left` il valore `-10000px`, e a `width` e `height` il valore `1px`.
# --hints--
Il tuo codice dovrebbe impostare la proprietà `position` della classe `sr-only` al valore `absolute`.
```js
assert($('.sr-only').css('position') == 'absolute');
```
Il tuo codice dovrebbe impostare la proprietà `left` della classe `sr-only` ad un valore di `-10000px`.
```js
assert($('.sr-only').css('left') == '-10000px');
```
Il tuo codice dovrebbe impostare la proprietà `width` della classe `sr-only` ad un valore di `1` pixel.
```js
assert(code.match(/width:\s*?1px/gi));
```
Il tuo codice dovrebbe impostare la proprietà `height` della classe `sr-only` ad un valore di `1` pixel.
```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?