When to hide things from the screen but show for screenreaders

I’m finding precious little thoughtful commentary, let alone user tested or research-backed information, on when elements of a web page that you choose to hide from the graphical version of your website should be shown to people using screenreaders.

There’s much more on how then why and in what context do we want to hide content on the page but keep it readable for people who use screen readers.

My intuition is that most field labels (in a Drupal context, everything you’re putting out is from a field, so if the label is printed on the display not just the form for entry it would say “Title”, “Body” for the main text, “Tags”, etc) should be hidden hidden. There’s only relatively rare instance where styling or placement is communicating information to a sighted visitor that a field label should convey.

So “Body Paragraph” should never be shown to anybody, but tags that are displayed as little badges probably should be labeled for screen readers.

See No Evil: Hidden Content and Accessibility

Showing Additional Content for Screen Readers

A good web page design often uses visual clues to convey information to the viewer. It’s important to structure your page so that screen reader users get these same clues from your text. For example, pagination may be obvious when laid out visually, but might read as a meaningless list of numbers over a screen reader. In these scenarios it’s helpful to include extra information for screen readers without cluttering up your visual design

Took me a while to find, but Drupal comes through with excellent documentation on when an element should be made visually hidden:

Making content invisible (visually-hidden)

If an element on the page:

  • is an interactive element but needs to be made invisible so it can be themed (e.g.: a link, checkbox, radio-button or form control with custom styles),
  • is a heading or label for something whose purpose is visually-apparent (and therefore, the heading/label does not need to be shown to sighted users; e.g.: a section label or a form-element label), or,
  • in general, shouldn’t be visible to sighted users but should be visible to screen-reader users,

… then you should make it invisible (visually-hidden).

Searched for: