Screen Reader classes

[LukMas]

Screen reader only classes

Having to work with impaired users sometimes we have the need to add extra text because the default, visible and read loud, is not enough for them. Other frameworks/libraries/etc... offer at the moment two classes that support the developers in this:

• visually hidden
• visually hidden and focusable

Visually hidden

This class is used to hide an element but show it to the screen reader. No hint about it is even shown, but the screen reader (or another similar technology) will read it as normal text.

Visually hidden and focusable

This class is a bit more evolved than the other one. By default the element is hidden but read from the screen reader. But, once it gets the focus, it becomes visible.

Suggestions and Links

• Bootstrap (source of the idea) https://getbootstrap.com/docs/5.0/helpers/visually-hidden/
• Tailwind https://tailwindcss.com/docs/screen-readers
• https://www.tpgi.com/the-anatomy-of-visually-hidden/

[chrisbratlien]

I also need something like this on a project styled with primeflex.

My solution for now is to borrow this technique suggested by WebAIM:

https://webaim.org/techniques/css/invisiblecontent/

.sr-only {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}