Banco Estado

20/01/2021

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:

  • Header
  • Navegación principal (escritorio)
  • Carrusel de imágenes

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.

Color

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 requisito 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:

Contraste insuficiente en navegación principal

Pantallazo de navegación principal

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.

Estándares relevantes

Controles de carrusel

Pantallazo de control de carrusel de imágenes con 6 elementos de navegación con forma de círculo. Uno de ellos en estado activo.

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.

Estándares relevantes

Teclado y foco

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.

Problema de teclado y foco en navegación

Pantallazo de navegación principal con el enlace de productos enfocado pero sin foco visible. El enlace contiene un submenú en estado visible

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:

  • No existe un foco visible cuando presionas la tecla tab en los enlaces de navegación. De hecho, el foco ha sido suprimido en todos los elementos del sitio lo cual dificulta el uso con el teclado ya que el usuario no sabe qué elemento está enfocado.
  • Solo es posible abrir el submenú pasando el mouse por encima del elemento de navegación, pero no hay forma de abrirlo usando el teclado.

Estándares relevantes

Controles personalizados

Carrusel

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.

Pantallazo de una de las diapositivas del carrusel

Encontramos diversos problemas de accesibilidad con la actual implementación del carrusel:

  • Todo el contenido dentro del carrusel consiste de imágenes de texto, que si bien tienen un texto alternativo no permiten al usuario ajustar su presentación. Algunas personas requieren que el texto sea de otro tamaño, color o alineación.
  • La implementación de los controles del carrusel está hecha con enlaces sin atributo href. El uso de un enlace no es correcto ya que infiere que es un elemento de navegación en vez de controles funcionales. Sumado a esto el hecho de no incluir un atributo href impide que el enlace se identifique como tal para un lector de pantalla y tampoco será enfocable utilizando un teclado.
  • En dispositivos móviles la única forma de controlar qué diapositiva del carrusel es visible es a través de gestos de desplazamiento, en inglés: swiping . Cuando existe funcionalidad que use gestos basados en múltiples puntos o recorridos también debe ser operable con un puntero sencillo, por ejemplo un botón. El motivo es que algunas personas no pueden realizar ese tipo de gestos de forma precisa o usan tecnología de asistencia que no tiene la capacidad de realizarlos.
  • No existe forma de pausar o parar el carrusel. Para personas con déficit atencional u otros problemas cognitivos esto puede ser un problema ya que dificulta el poder concentrarse en otras partes del sitio.
  • Las diapositivas contienen un enlace que lleva a otra página del sitio, pero no tiene un foco visible. Todos los elementos interactivos deben tener un foco claramente visible, de lo contrario personas que necesitan el teclado para navegar por el sitio no tendrán una indicación de qué elemento se encuentra enfocado.

Estándares relevantes

Estructura

Encabezados

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.

Encabezados poco descriptivos y mal uso

Pantallazo de sección consejos y beneficios con un carrusel con tres columnas visibles, cada una con un encabezado nivel 6

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:

  • No describen el propósito del contenido de dicha sección.
  • Los encabezados deben describir secciones y el contenido que está debajo de ellos, “más información aquí” en este contexto debiese ser solo un enlace.
Nota: En nuestra opinión, no es un fallo a algún criterio de conformidad saltarse niveles de encabezados, pero seguir un orden jerárquico es considerado una buena práctica y lo mencionamos como tal en dicha sección de este artículo. Existen otros problemas de accesibilidad en este componente, pero se encuentra fuera del alcance de nuestra revisión, solo veremos los encabezados.
Estándares relevantes

Puntos de referencia

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.

Estándares relevantes

Nota: el criterio de conformidad 2.4.1 - Evitar bloques requiere de algún método para saltar secciones repetidas en la página. La página de inicio no cuenta con un enlace para saltar la navegación, ni un punto de referencia para el contenido principal, y si bien existen encabezados, estos no siguen un orden jerárquico y por eso lo consideramos un fallo al criterio.

Mejores prácticas

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.

Orden jerárquico incorrecto de encabezados

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 mantener una jerarquía lógica y secuencial en la medida de lo posible.

Pantallazo de extensión de Chrome Headingsmap mostrando la estructura de encabezados en forma de lista en la página de inicio de Banco estado

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.

Recomendación

Utilizar encabezados h2 que describan cada sección nueva dentro de la página y anidar encabezados h3 como subsecciones:

  • h1 - Sitio web BancoEstado
    • h2 - Consejos y beneficios
      • h3 - Cámbiate a BancoEstado, nueva ley de portabilidad
      • h3 - Conoce los beneficios de tu tarjeta BancoEstado
      • etc
    • h2 - Temas de interés
    • h2 - Elije tus sueños, nosotros te ayudamos
      • h3 - Cumplir mis proyectos
      • h3 - Administrar mi dinero
      • etc
    • h2 - Nos importa que tu vida sea mejor
      • h3 - Centro de ayuda
      • h3 - Recomendaciones de seguridad, que a ti no te pase
      • etc

Posicionamiento fijo obstruye visión de parte del contenido

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.

Pantallazo de la página con zoom y el header con posicionamiento fijo cubriendo parte del contenido de ella

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.

Recomendación

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; } }

Pérdida de contenido en submenú de navegación

Pantallazo de navegación principal con uno de los submenú abierto y parcialmente escondido al extenderse más allá del ancho del navegador

Al hacer zoom a 150%, parte de la navegación y su texto queda escondida al extenderse más allá del ancho del navegador.

Nota: El criterio de conformidad 1.4.10 - Reajustes establece que no debe haber pérdida de contenido o necesidad de desplazamiento en dos dimensiones al hacer zoom a 400% desde un ancho de pantalla de 1280 pixeles. Los niveles de zoom entre 100% a 399% no están contemplados y por tanto técnicamente no es un considerado un fallo al criterio.

Enlaces externos

Pantallazo de sección cumplir mis proyectos con uno de sus enlaces que lleva a otro sitio

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.

Recomendación

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; }

Estándares relevantes

No es posible aumentar tamaño de la tipografía

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.

Pantallazo de página de ajustes del navegador Chrome con la opción de tamaño de tipografía grande seleccionada

Cambiar el tamaño de la tipografía en los ajustes de un navegador no tiene ningún efecto en el sitio.

Nota: El criterio de conformidad 1.4.4 - Cambio del tamaño del texto establece que el texto puede ser aumentado hasta un 200% sin perder funcionalidad. La mayoría de los navegadores modernos permiten hacer zoom, y al existir un mecanismo para aumentar el tamaño del texto, se cumple con el criterio en caso de que no exista pérdida de contenido y el texto pueda ser aumentado a un 200%. Por tanto, no poder ajustar el tamaño de la tipografía a nivel del navegador no es un fallo al criterio.

Recomendación

Utilizar unidades relativas como %, em o rem en la tipografía para que escale.

Animaciones

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:

  • El carrusel de imágenes utiliza animaciones para pasar de una imagen a la otra.
  • La caja de herramientas utiliza animaciones al pasar el mouse por encima.
  • La navegación en móvil utiliza animaciones al abrir y cerrar el menú.

Recomendación

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; } }

Estándares relevantes

Nombres en inglés

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:

  • Navegación principal
  • Enlace abrir/cerrar de navegación principal en móvil

Recomendación

// 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>