# Screen Reader Text Class for Any Theme

> Adds the standard .screen-reader-text styles that hide text visually but keep it readable by screen readers, for themes that do not include them.

- Type: CSS
- Runs: Site-wide header
- Category: [Accessibility](https://wpide.com/library/category/accessibility/)
- Tags: screen-reader, css, theme
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/a11y-screen-reader-text-class/

## Code

```css
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}
```

## Notes

Many snippets and plugins rely on this class; add it once if hidden helper text shows up visibly on your site.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Screen Reader Text Class for Any Theme" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/