Descubre en este tutorial cómo ocultar elementos de la web usando CSS de forma respetuosa con los estándares de accesibilidad web.
Estoy convencido de que la mayoría de quienes que estáis leyendo este tutorial sabéis de sobra cómo ocultar un elemento usando CSS. La mayoría seguramente usáis display:none o visibility:hidden.
El problema de estas estrategias es que no respetan los estándares de accesibilidad web, ya que eliminan los elementos del DOM (Document Object Model) y por lo tanto no estarán disponibles para los lectores de pantallas (o herramientas similares).
Yo mismo utilizaba estas estrategias que menciono hasta que en el tutorial sobre cómo modificar la plantilla de registro de Restrict Content Pro me entró la duda de cuál era la mejor manera de ocultar los label respetando la accesibilidad web.
Cuando lancé la reflexión en mi podcast tuve la suerte de que dos oyentes (Jesús Olazagoitia y Vicent Sanchís, ¡gracias a ambos!) me explicaron cuál era la manera recomendada de hacerlo.
Vamos a ver cómo:
Snippets para ocultar elementos de la web con CSS de forma accesible
Añade el siguiente código en el fichero style.css:
.elemento-oculto {
position: absolute;
clip: rect(0 0 0 0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0
width: 1px;
white-space: nowrap;
}Ya ves que la estrategia es evitar que el elemento se muestre en pantalla, por un medio alternativo al display:none. Solo tienes que sustituir el selector (elemento-oculto) por el que quieras ocultar.
Te recomiendo aplicar esta técnica siempre que sea posible, especialmente en elementos de la web que sean importantes para navegar (cabeceras, menús…) o rellenar información (labels de formularios).
Conclusiones
Ahora ya sabes cómo ocultar elementos de la web usando CSS y respetando los estándares de accesibilidad web.
Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.
Todo ventajas de ser suscriptor. 😉
