Making text accessible for screen readers only:
## ★ ★ ★ ★ ★ ARIA-Labels are king!
Just use an ARIA-Label if possible
## ★ ★ ★ ★ Position + Clip + Collapse
I work with [[Wordpress]] a lot, so sometimes while working with a client, I cannot modify the HTML.
```css
.screenreader {
position: absolute !important; /* Outside the DOM flow */
height: 1px; width: 1px; /* Nearly collapsed */
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}
```
# References
https://stackoverflow.com/questions/26032089/in-html-how-can-i-have-text-that-is-only-accessible-for-screen-readers-i-e-fo