---
id: 587d778d367417b2b2512aaa
title: Tornar elementos visíveis apenas para leitores de tela usando 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--
Você notou que todos os desafios de acessibilidade aplicados até agora não usaram nenhum CSS? Isso mostra a importância de um esboço lógico do documento e do uso de tags semanticamente significativas em torno de seu conteúdo antes de introduzir o aspecto do design visual.
No entanto, a magia do CSS também pode melhorar a acessibilidade da página quando você deseja ocultar visualmente o conteúdo destinado apenas a leitores de tela. Isso acontece quando as informações estão em formato visual (como um gráfico), mas os usuários de leitores de tela precisam de uma apresentação alternativa (como uma tabela) para acessar os dados. O CSS pode ser usado para posicionar os elementos destinados somente ao leitor de tela fora da área visual da janela do navegador.
Um exemplo de código CSS que realiza isso:
```css
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
```
**Observação:** as abordagens com CSS a seguir NÃO farão a mesma coisa:
display: none; ou visibility: hidden; oculta o conteúdo para todos, incluindo usuários de leitores de tela
Valores de zero para tamanhos de pixel, como width: 0px; height: 0px; removem esse elemento do fluxo do seu documento, o que significa que os leitores de tela vão ignorá-lo.
# --instructions--
O Camper Cat criou um gráfico de barras empilhadas muito legal para a página de treinamento e colocou os dados em uma tabela para os usuários com deficiência visual. A tabela já tem uma classe `sr-only`, mas o código CSS ainda não foi criado. Dê a `position` um valor `absolute`, a `left` um valor `-10000px` e a `width` e `height` o valor `1px`.
# --hints--
O código deve definir a propriedade `position` da classe `sr-only` com um valor de `absolute`.
```js
assert($('.sr-only').css('position') == 'absolute');
```
O código deve definir a propriedade `left` da classe `sr-only` com um valor de `-10000px`.
```js
assert($('.sr-only').css('left') == '-10000px');
```
O código deve definir a propriedade `width` da classe `sr-only` com um valor de `1` pixel.
```js
assert(code.match(/width:\s*?1px/gi));
```
O código deve definir a propriedade `height` da classe `sr-only` com um valor de `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?