Drupal 8 Field Labels - Hidden Vs Visually Hidden

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!

 

Comments