Sobes.tech
Junior

¿Qué propiedad CSS usarías para garantizar la accesibilidad?

sobes.tech AI

Respuesta de la IA

aria-hidden: Oculta un elemento de las tecnologías de asistencia (lectores de pantalla) si su presencia es visual, pero semánticamente redundante o perjudicial para la comprensión del contenido.

tabindex: Controla el orden de enfoque de los elementos interactivos al navegar con el teclado. -1 excluye el elemento del orden estándar, 0 lo incluye en el orden estándar, y los valores positivos establecen un orden explícito (no recomendado en la mayoría de los casos).

outline: Establece un marco alrededor del elemento cuando está enfocado. Es importante mantenerlo o estilizarlo para que los usuarios de teclado puedan ver el elemento activo.

visually-hidden: Oculta visualmente el elemento, pero mantiene su accesibilidad para los lectores de pantalla. Se usa a menudo para ocultar etiquetas de formulario (label) cuando el control en sí es visible (por ejemplo, un icono de botón).

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

pointer-events: none: Desactiva la interacción con el elemento mediante el ratón, pero no afecta su accesibilidad para el teclado y los lectores de pantalla. Se puede usar para elementos decorativos sobre áreas activas.

cursor: pointer: Cambia la apariencia del cursor al pasar sobre elementos interactivos, indicando que son clicables.

color y background-color: Son importantes para garantizar un contraste suficiente entre el texto y el fondo, lo cual es crítico para usuarios con discapacidades visuales. Se recomienda usar herramientas de comprobación de contraste según las normas WCAG.