• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Ocultar elementos de la web mediante CSS respetando la accesibilidad web

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. 😉

CSS

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?