1.14Screen Reader Content

Careful consideration needs to be taken when deciding how content should be hidden. For example, sometimes content needs to be hidden from users, but visible to people using screen readers.

One common reason for doing this is if you were to use icons on your page without any supporting text. People without a screen reader could see the icons and understand the context of the icon, but people using a screen reader could not. By using the .screenreader class on elements, content is hidden from anybody viewing the website on a monitor, but can still read by a screen reader.