El problema del diseño de pestañas y cómo hacerlas más accesibles

Las pestañas son un componente comúnmente utilizado en el diseño digital. Cuando se usan correctamente, son eficaces para ayudar a los usuarios a navegar a través de contenido relacionado que no es necesario ver todo a la vez.

Sin embargo, veo muchos diseños de pestañas que son inaccesibles para personas con ciertas deficiencias visuales. La falta de suficiente contraste de color entre estados puede hacer imposible distinguir las pestañas, lo que puede dejarlas sin descubrir.

Con sólo unos pocos ajustes menores de diseño, puedes hacer que los diseños de tus pestañas sean más accesibles.

A continuación se muestra un ejemplo del componente de pestaña de Adobe en uso. Este no es de ninguna manera el peor ejemplo que pude encontrar, pero ilustró bien mi punto. Una cosa buena que hace Adobe es que sus pestañas parecen pestañas. Al menos para las personas que pueden verlos.

Sin embargo, el estilo de pestaña no seleccionado con un borde de 1 px de color #eaeaea da como resultado un contraste de solo 1,2:1 cuando se coloca sobre un fondo blanco. Esto significa que a mucha gente le resultará difícil ver que las pestañas no seleccionadas son pestañas. Las etiquetas de las pestañas no seleccionadas utilizan el color #767676, lo que da como resultado un contraste de 4,5:1. Esto significa que es probable que las personas vean estas etiquetas, pero como no parecen interactivas, es posible que no piensen en interactuar con ellas.

Es importante que las pestañas no seleccionadas parezcan interactivas. De esta manera sus usuarios saben que hay más contenido para encontrar. Un método sencillo para lograrlo es subrayar las etiquetas no seleccionadas.

En este nuevo ejemplo, subrayé las etiquetas de las pestañas no seleccionadas y aumenté el ancho de los bordes de 1 px a 2 px. Si bien esta simple actualización no resuelve los problemas de contraste de color, aumentar el ancho del borde supone una mejora sutil y subrayar las etiquetas hace que sea más probable que los usuarios sepan que son interactivas.

Sin hacer que las pestañas destaquen demasiado, estos pequeños ajustes ciertamente avanzan en la mejora de la accesibilidad del diseño de las pestañas. Sin embargo, podrías dar un paso más si puedes.

Es posible hacer que las pestañas seleccionadas y no seleccionadas cumplan los requisitos de contraste y, al mismo tiempo, garantizar que la diferencia entre los dos estados siga siendo lo suficientemente diferente como para ser obvia.

En este ejemplo, utilicé el color del borde de la pestaña seleccionada original para todos los bordes de las pestañas, mientras cambiaba el color de fondo de la pestaña seleccionada para que coincida con el color del borde y uso una etiqueta de texto blanca para garantizar que sea visible. Esto significa que todos los estados de las pestañas cumplen con los requisitos de contraste de color y existe una clara diferencia entre los estados seleccionados y no seleccionados.

No ha cambiado mucho, pero ahora es mucho más probable que el diseño de esta pestaña sea accesible para muchas más personas.

Debería ser inmediatamente obvio que sus pestañas son pestañas. Debe haber suficiente contraste entre la pestaña seleccionada y las pestañas no seleccionadas. Sus pestañas no seleccionadas deben verse interactivas. Debe haber un estado de desplazamiento que sea suficientemente diferente de los estados seleccionados y no seleccionados. ¿El componente de pestaña todavía funciona en dispositivos móviles o ¿Podrías usar un componente diferente?