Accesibilidad: Ocultar contenido adecuadamente en Drupal

Drupal , Accesibilidad ,

Cuando necesitamos esconder elementos presentes en la página que carga el usuario, existe una infinidad de posibilidades a través de estilos y JavaScript. Sin embargo, las posibilidades no son tantas si queremos ser más ortodoxos. Conseguir nuestro objetivo ateniéndonos a ciertas normas, va a permitir que las lecturas del DOM sigan realizándose con normalidad, lo cual afecta a los lectores de pantalla y mismamente a scripts que dependan de una lectura de esa misma estructura para otros fines.

Siguiendo las directrices de la Organización Drupal, debemos hacer un elemento invisible en los siguientos casos:

Si es interactivo pero necesita ocultarse para personalizarlo (enlaces, checkboxes, radiobotones...)
Si es una cabecera o una etiqueta de algo cuyo propósito es visual que no necesita mostrarse a los usuarios videntes (como las etiquetas de sección o de un formulario)
En general, los elementos que sólo sean de utilidad para los usuarios invidentes.

Las distintas formas ideales de hacerlos es:

Con la clase "visually-hidden".
En Drupal 8, configurando el display de los tipos de entidad para que las etiquetas de sus campos se muestren "Visually Hidden".
Colocando el elemento fuera de la zona visible de la página con CSS
Utilizando el siguiente CSS:

position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px;
word-wrap: normal;

Puede ocurrir que necesitamos que un elemento sea invisible hasta que alguien lo alcance mediante teclado. Si:

Es un enlace para ayudar a los usuarios a saltar a la navegación o contenido principales.
Es una alternativa a otros elementos únicamente accesibles mediante el ratón.
No debe ser visible para usuarios videntes salvo que usen un teclado para navegar por otros motivos.

En este caso, hay dos opciones:

Hacer que el elemento tenga las clases "visually-hidden" y "focusable".
Utilizar este CSS (donde "mi_elemento" es el selector CSS del elemento a ocultar):

mi_elemento {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal;
}
mi_elemento:active,
mi_elemento:focus {
  position: static !important;
  clip: auto;
  overflow: visible;
  height: auto;
  width: auto;
}

Otra variante es el caso en el que tengamos que hacer el contenido invisible a los lectores de pantalla: