Skip to main content

Don't remove block titles in Drupal: (visually) hide them

TL; DR: Apply this patch to Drupal Core to enable visually hidden option in block titles.

The block titles in Drupal have one of those problems that inexplicably advance from version to version without anyone fixing them.

Basically, the configuration of the title of a block only supports two values: show or not show.

For the accessibility and semantics of a website it is imperative to have a third state, the famous visually hidden, sr-only or whatever you want to call it.

Un bloque que permite mostrar el título como «visualmente oculto»
A block that allows the title to be displayed as "visually hidden".

This state renders the title in the HTML so that 1) it is part of the page's semantics and outline and 2) it is announced, for example, by screen readers for the visually impaired and at the same time visually removes it so that it does not interfere with the design. 

(If you are reading this for the first time, please stop removing headings from your page that are not part of the design and start hiding them visually. You'll be doing people with functional diversity a big favor.)

The solution? Fortunately, simple: apply this patch to Core.