Drupal 8 Field Labels - Hidden Vs Visually Hidden

Published on November 17, 2015

Was trying out D8 and while “Managing Display” of a content type, noticed a new option while choosing the visibility of the label of a field.

Was wondering how they are different. Apparently when “Visually Hidden” is selected, the label is still there in the markup but not visible on browsers/screen, allowing screenreaders to be able to readout the label of the field!

Markup of the field label when set to “Visually Hidden”

The motivation for this feature on d.o issue reads:

“As a site builder managing the display of a node, I want the option to hide field labels from sighted users, but make them visible to screenreaders, so I can make my site as accessible as possible without a custom theme.”

Had been hearing a lot about Drupal 8 accessibility features, but was pleasantly surprised to see this on my first brush with D8. Way to go Drupal! Can’t wait to see your new face in a couple of days!