Revisamos 3 componentes y la estructura general de la saliendo del sitio: página de inicio de BancoEstado y evaluamos si cumple con estándares de accesibilidad establecidos en las pautas de accesibilidad para el contenido web (WCAG) 2.1 nivel de conformidad AA.
Los componentes revisados son:
Este artículo no es una evaluación completa, ni un informe de accesibilidad, solo un repaso superficial de problemas que encontramos al evaluar un par de componentes.
Asegurarnos que exista suficiente contraste de color entre texto y fondo ayuda a las personas con discapacidad visual a leer el contenido. WCAG establece una relación de contraste mínima para estos casos de 4.5:1 y 3:1 para texto grande (superior a 24 pixeles o 18.667 pixeles y negrita).
Sin embargo, no todo el contenido es texto, por eso en su versión 2.1 WCAG añadió un criterio de conformidad que aborda el contraste de color en elementos de interfaz. Esto para asegurar que personas con baja visión también perciban contenido que es considerado importante para entender cierta información, pero que no necesariamente está en formato de texto. El criterio establece que elementos de interfaz y objetos gráficos esenciales para entender el contenido deben tener una relación de contraste de 3:1 con colores adyacentes.
Otro requerimiento que tenemos que tener en cuenta en relación al uso de colores es el no usarlos como el único medio para transmitir información. El motivo es que hay personas con deficiencias en la percepción del color y tienen problemas en distinguir colores.
Encontramos problemas de contraste y color en diversos componentes del sitio. De hecho un prueba automática utilizando la saliendo del sitio: extensión Axe arrojó 107 errores de contraste insuficiente. A continuación mostramos 2 ejemplos:
El color del texto #fff
tiene una relación de contraste de 2.4:1 con el fondo #ff8700
. El contraste mínimo requerido en este caso es de 4.5:1.
Los controles del carrusel permiten la navegación entre sus elementos, sin embargo estos no tienen un contraste suficiente y por lo tanto personas con baja visión pueden tener problemas para distinguirlos. El color del control #aaa
tiene una relación de contraste de 2.32:1 en con el color adyacente, en este caso el fondo #fff
. El contraste mínimo requerido para elementos de interfaz es de 3:1.
Es importante que la funcionalidad de un sitio no dependa únicamente del uso de un mouse, sino que también sea operable usando un teclado. Personas con baja visión, ciegas o con discapacidad motora requieren de otro dispositivo de entrada como un teclado o emuladores que actúan como teclados. Es por esto que es esencial que toda la funcionalidad del sitio sea operable desde uno.
Para que una persona pueda interactuar con el sitio usando el teclado es además necesario que los elementos interactivos tengan un foco claramente visible, de lo contrario no es posible identificar qué elemento se encuentra enfocado.
Encontramos problemas de uso de teclado y foco en diversos elementos en el sitio, esto se encontró en la actual implementación de la navegación principal:
La página de inicio cuenta con un carrusel de imágenes que al ser presionadas llevan a otra página del sitio. El carrusel va mostrando la siguiente imagen automáticamente cada 4 segundos y cuenta con controles con forma de círculo para seleccionar una imagen específica.
Encontramos diversos problemas de accesibilidad con la actual implementación del carrusel:
Los encabezados describen secciones de la página y están diseñados para crear una jerarquía lógica. Usados correctamente permiten entender mejor la organización del sitio y son especialmente importantes para usuarios de lectores de pantalla ya que te permiten navegar la página usándolos como atajos.
Todos los encabezados deben ser descriptivos y claros, esto permite a las personas encontrar fácilmente la información que buscan.
Las columnas pertenecientes al encabezado “Consejos y beneficios” tienen todas un encabezado con el mismo nombre “Más información aquí”. Esto es un mal uso de encabezados por 2 motivos:
Los puntos de referencia, en inglés: landmarks , son importantes para personas que usan un lector de pantalla ya que les permite navegar un sitio utilizándolos como atajos y así pueden acceder a la información de manera más fácil. Una persona con discapacidad motora puede también instalar un plugin para saltar partes del contenido sin tener que pasar por todos los elementos enfocables usando la tecla de tabulación.
El sitio de Banco Estado cuenta con dos elementos de navegación, pero solo uno cuenta con un punto de referencia. El contenido principal del sitio no está envuelto en un punto de referencia, ni el pie de página tampoco.
Al hacer una revisión de un sitio intentamos ser rigurosos con lo que dictan las pautas de accesibilidad para el contenido web (WCAG) y el nivel de conformidad estipulado, en este caso AA.
Esto implica que algunos problemas puedan quedar excluidos porque se cumplió con lo mínimo requerido para pasar el criterio de conformidad o porque es un criterio de nivel AAA.
Sin embargo, esto no significa que no presenten barreras para algunas personas con discapacidades, por eso a continuación mencionamos mejores prácticas para hacer que el contenido sea más accesible.
Seguir una jerarquía lógica de encabezados no es un requisito para satisfacer algún criterio de conformidad, pero es considerado una buena práctica ya que es importante para personas ciegas dado que les ayuda a entender la importancia relativa de distintas secciones del sitio.
Es recomendable usar un solo encabezado de nivel 1 (h1
), cada nueva sección debe ser un h2
, si existe una subsección dentro del h2
será un h3
, y así sucesivamente hasta un h6
de ser necesario. Por diversos motivos esto no siempre será factible, pero es recomendable mantenter una jerarquía lógica y secuencial en la medida de lo posible.
Los encabezados en el sitio no siguen un orden jerárquico y se saltan niveles. “Consejos y beneficios” es un h2
y de ahí salta a múltiples h6
. El encabezado “temas de interés” es un h3
y en el esquema del documento da a entender que tiene relación con el encabezado “consejos y beneficios”. Esto es incorrecto ya que esa sección describe otra parte del sitio sin ninguna relación.
Utilizar encabezados h2
que describan cada sección nueva dentro de la página y anidar encabezados h3
como subsecciones:
Personas con baja visión pueden hacer uso del zoom del navegador para ver mejor el contenido. Hay que tener cuidado con el uso de posicionamiento fijo en elementos ya que esto puede hacer más difícil leer e interactuar con el contenido.
El header tiene un posicionamiento fijo que al hacer zoom obstruye la visión de parte del contenido. En ocaciones también puede dificultar ver claramente qué elemento tiene foco ya que el header cubre parte de él.
Utilizar un media query para implementar la posición fija de un elemento sólo desde cierta altura.
@media (min-height: 550px) {
#header.fixed {
position: fixed;
}
}
Al hacer zoom a 150%, parte de la navegación y su texto queda escondida al extenderse más allá del ancho del navegador.
En la sección “Cumplir mis proyectos” el enlace “emprender” lleva al usuario a otra página abriendo una nueva pestaña.
Los enlaces a otros sitios o que abren en una nueva pestaña pueden potencialmente llevar al usuario a un interfaz nuevo que desconoce, por eso es considerado una buena práctica ofrecer una indicación al respecto.
Para advertir al usuario se puede utilizar un saliendo del sitio: ícono que indica que se está saliendo del sitio y texto visualmente escondido. Por ejemplo:
<a href="https://www.accessibilityassociation.org/">
<span class="visualmente-escondido">saliendo del sitio:</span>
Asociación de accesibilidad
<icono> // pseudo código como ejemplo
</a>
.visualmente-escondido {
clip: rect(0 0 0 0);
clip-path: inset(100%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
Aumentar el tamaño del texto en un sitio es importante para personas con baja visión. La mayoría de los navegadores permiten hacer zoom y aumentan el tamaño del contenido de manera uniforme, pero además permiten ajustar el tamaño de la tipografía. Algunos usuarios prefieren hacer este cambio a nivel del navegador ya que el tamaño se mantiene independiente de la página, a diferencia de la configuración por defecto del zoom.
Cambiar el tamaño de la tipografía en los ajustes de un navegador no tiene ningún efecto en el sitio.
Utilizar unidades relativas como %, em o rem en la tipografía para que escale.
Cuando se usan animaciones en un sitio se corre el riesgo de causar problemas para personas con desórdenes vestibulares que podrían experimentar mareos, náuseas entre otros síntomas.
Es recomendable mantener el número de animaciones a un mínimo en la medida de lo posible y ofrecer al usuario una opción para desactivarlas, a menos que sean esenciales como por ejemplo un ícono animado que indica que algo está cargando.
Los siguientes componentes tienen animaciones y no existe manera de desactivarlas:
Una alternativa es ofrecer una opción a nivel de sistema operativo que permita desactivar las animaciones utilizando una media query:
@media screen and (prefers-reduced-motion: reduce) {
.flex-slider .slides {
animation: none;
}
.cajaHerramientas a,
#header .content-nav,
#general {
transition: none;
}
}
Todo los elementos interactivos (con excepción de enlaces en bloques de texto o un elemento nativo sin estilos adicionales) deben tener un tamaño suficiente para activarlos con facilidad. Personas con discapacidades motoras pueden tener problemas para activar elementos de menor tamaño en dispositivos touch o usando un dispositivo apuntador que requiera de mayor precisión. Muchos elementos en la página no cumplen con el tamaño mínimo requerido para facilitar su uso.
Aumentar el tamaño de los siguientes elementos interactivos de la página de inicio a un tamaño mínimo de 44 por 44 pixeles:
Asignar nombres accesibles a elementos es importante para personas que usan tecnología de asistencia. Esto les permite identificar con qué elemento están interactuando. Si el nombre ha sido escrito en un idioma que no es el primario del sitio, puede dejar a muchos usuarios confundidos o sin entender qué significa.
Los siguientes elementos tienen un nombre accesible en inglés:
// Incorrecto navegación principal
<div id="nav" aria-label="Main menu" role="navigation">...</div>
// Correcto navegación principal
<div id="nav" aria-label="principal" role="navigation">...</div>
// Incorrecto enlace abrir/cerrar navegación
<a href="#nav" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
// Correcto enlace abrir/cerrar navegación
<a href="#nav" class="navbar-toggle">
<span class="sr-only">Menú de navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>