---
id: 6143956ed76ed60e012faa51
title: Step 25
challengeType: 0
dashedName: step-25
---
# --description--
The `.sr-only` text is still visible. There is a common pattern to visually hide text for only screen readers to read.
This pattern is to set the following CSS properties:
```css
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
```
Use the above to define the `sr-only` class.
# --hints--
You should use the `.sr-only` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.sr-only'));
```
You should give the `.sr-only` a `position` of `absolute`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.position, 'absolute');
```
You should give the `.sr-only` a `width` of `1px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.width, '1px');
```
You should give the `.sr-only` a `height` of `1px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.height, '1px');
```
You should give the `.sr-only` a `padding` of `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.padding, '0px');
```
You should give the `.sr-only` a `margin` of `-1px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.margin, '-1px');
```
You should give the `.sr-only` an `overflow` of `hidden`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.overflow, 'hidden');
```
You should give the `.sr-only` a `clip` of `rect(0, 0, 0, 0)`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.clip, 'rect(0px, 0px, 0px, 0px)');
```
You should give the `.sr-only` a `white-space` of `nowrap`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.whiteSpace, 'nowrap');
```
You should give the `.sr-only` a `border` of `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.borderWidth, '0px');
```
# --seed--
## --seed-contents--
```html
Accessibility Quiz
