Accesibilidad: Ocultar contenido adecuadamente en Drupal

drupal.png
Solucionex
18
Jul 22

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:

  • Cuando tenga una alternativa accesible que lo haga reiterativo y/o confuso
  • Si sólo debe ser visible para usuarios videntes.

Se puede lograr dando al elemento el atributo

aria-hidden="true"

 

Para más información, visita el artículo completo en la documentación oficial de drupal.org