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