Afp Habitat

07/05/2021

Revisamos la saliendo del sitio: página de retiro del 10% de afp Habitat 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.

Las secciones revisadas son:

  • Banner
  • Pestañas
  • Preguntas frecuentes

Este artículo no es una evaluación completa, ni un informe de accesibilidad, solo un repaso superficial de problemas que encontramos al evaluar las secciones ya mencionadas.

Captura de pantalla de sección banner con imagen de fondo, logo, texto introductorio y opciones de retiro

Encabezado no usa código semántico

El texto “Retiro del 10% de tu ahorro previsional obligatorio” está visualmente presentado como un encabezado, pero no utiliza código que lo identifique como tal a tecnologías de asistencia.

Captura de pantalla de texto visualmente presentado como encabezado y un párrafo asociado a él

Se ha utilizado un elemento div con la presentación visual de un encabezado. La tipografía es más grande y está en negrita. Esto permite inferir que es un encabezado, y una persona vidente puede hacer esa asociación. Sin embargo, esto no es posible para una persona ciega, porque un div no tiene ningún significado semántico y por tanto tecnologías de asistencia no pueden identificar correctamente el elemento.

Estándares relevantes

Uso de imágenes de texto

El texto “3er retiro” y el botón “ir al formulario” han sido implementados usando imágenes.

Captura de pantalla de ejemplo de uso de imágenes de texto en la sección para ir al formulario de retiro

Esto impide que se pueda ajustar su presentación. Algunas personas requieren que el tipo de tipografía, su tamaño, altura de línea o colores sean distintos. A menos que el texto en la imagen sea considerado esencial (logos, branding) o exista un mecanismo para configurar la imagen del texto, la información debe ser presentada en formato de texto.

Estándares relevantes

Uso incorrecto de párrafo

El texto “Anulación solicitud de retiro 10%” funciona como un enlace. Al activarlo te lleva a otra página. Sin embargo, no está implementado correctamente para que su propósito sea entendible y accesible.

Captura de pantalla de párrafo Anulación solicitud de retiro 10%

En vez de utilizar un enlace <a>, se ha usado un elemento de párrafo <p>. Esto crea dos problemas de accesibilidad:

  • Al no ser un elemento interactivo, no recibe foco y por tanto no es posible activarlo usando un teclado. Es importante que la funcionalidad no dependa únicamente del uso de un mouse. 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.

  • Al no usar el elemento correcto, no será anunciado como un enlace para personas que usan un lector de pantalla, y pensarán que se trata de un párrafo de texto.

Contraste insuficiente en enlaces

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

El color del texto #0085b2 del enlace “Anulación solicitud de retiro” tiene una relación de contraste de 4.2:1 con el fondo #fff. El contraste mínimo requerido en este caso es de 4.5:1.

Estándares relevantes

Nombre visible no está incluido en el nombre accesible

El enlace con el nombre “Realiza tu solicitud” está implementado usando una imagen, la cual tiene un texto alternativo usando el atributo alt. Este atributo le da el nombre accesible al enlace y es el nombre que queda expuesto al API de accesibilidad del navegador. En este caso el nombre accesible es “Formulario solicitud”, y al no coincidir con el nombre visible puede generar problemas a algunas personas.

Captura de pantalla de enlace con el nombre visual Realiza tu solicitud

Es importante que el nombre visible de un control esté incluido o coincida con el nombre accesible. Esto permite que usuarios de software de reconocimiento de voz puedan interactuar con ellos al anunciar el nombre visible.

Estándares relevantes

Pestañas

Las pestañas son elementos interactivos que ocultan y revelan contenido dependiendo de qué pestaña se encuentre activada.

Captura de pantalla de componente con 3 pestañas con información sobre el retiro del 10%. La primera se encuentra activa

Encontramos los siguientes problemas de accesibilidad en el componente:

  • Las pestañas se pueden activar usando el mouse, pero la misma funcionalidad no está disponible al usar un teclado. Personas con baja visión, ciegas o con discapacidad motora requieren de otro dispositivo de entrada como un teclado.
  • No es posible determinar de manera programática el estado de una pestaña, y por tanto una persona usando tecnología de asistencia no tiene cómo saber qué pestaña se encuentra activa.
  • La última pestaña en su estado activo tiene texto con contraste insuficiente. WCAG establece una relación de contraste mínima de 4.5:1 para texto de este tamaño, pero el color del texto #538391 solo tiene una relación de 4.2:1 con el color de fondo #fff.

Estándares relevantes

Preguntas frecuentes

La sección de preguntas frecuentes consiste de una serie de preguntas cuya respuesta se encuentra escondida. Al presionar una pregunta, el componente se expande y la pregunta es revelada.

Captura de pantalla de sección preguntas frecuentes mostrando las 3 primeras preguntas que pueden ser expandidas al activarlas

No es posible determinar programáticamente el estado

Una persona vidente puede determinar si la respuesta de una pregunta es visible o no, pero esta información no está disponible para una persona ciega usando un lector de pantalla. Para eso se puede usar la propiedad aria-expanded.

captura de pantalla de una pregunta que está visualmente expandadida y mostrando la respuesta

Estándares relevantes

Uso de elemento no semántico

Se ha utilizado un div en vez de un botón. Un div no tiene ningún significado semántico, y por tanto una persona usando un lector de pantalla no sabrá que es un elemento interactivo que se puede activar. El elemento tampoco recibirá foco, y por tanto una persona que depende del uso del teclado no podrá acceder a ella.

Estándares relevantes

Pérdida de contenido al hacer zoom

Personas con baja visión pueden hacer uso del zoom del navegador. Esto es importante ya que les ayuda a ver y leer mejor el contenido. Por eso hay que asegurarse de que al hacer zoom no exista desplazamiento en 2 dimensiones, lo cual dificulta la lectura, o que parte del contenido se encuentre oculto.

Captura de pantalla de sección preguntas frecuentes con parte de su contenido cortado

Al hacer zoom a 400% desde un ancho de pantalla de 1280px, el texto queda oculto en uno de los costados del navegador y no existe posibilidad de acceder a él.

Estándares relevantes

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

Enlaces externos

El sitio contiene enlaces que abren una nueva pestaña al activarlos. Un ejemplo de esto es el enlace que ofrece información sobre a qué Administradora de Fondos de Pensiones (AFP) estás afiliado.

Los enlaces a otros sitios o que abren 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

Propósito de enlaces

Entender el propósito de los enlaces en base a su nombre ayuda a los usuarios a decidir si quieren visitarlo o no. Identificar el propósito de un enlace incluso cuando está fuera de contexto ayuda a personas que usan un lector de pantalla y que tienen la opción de ver una lista de todos los enlaces en la página.

Por ejemplo el siguiente párrafo tiene un enlace con el nombre “ingresa aquí”:

<p>Si necesitas saber en qué AFP estás afiliado, <a href="#">ingresa aquí</a></p>

Tomado fuera del contexto del párrafo, “ingresa aquí” no describe su propósito.

Recomendación

Escribir enlaces que sean descriptivos y que sea posible entender su propósito incluso cuando están fuera de contexto:

<p>Ingresa aquí para <a href="#">saber en qué AFP estás afiliado</a></p>

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 control de carrusel de imágenes con 6 elementos de navegación con forma de círculo. Uno de ellos en estado activo.

La página solo tiene encabezados h3, lo cual no genera un esquema de documento que sea útil.

Recomendación

Utilizar un h1 que describa el propósito de la página, usar encabezados h2 para describir cada sección nueva, y anidar encabezados h3 como subsecciones.

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.

La página cuenta con puntos de referencia <main>, <header> y footer pero su implementación no es correcta. El elemento <main> está envolviendo un elemento <body> y también al <header> y <footer>:

<main> <body> <header>...</header> // contenido principal del sitio </body> <footer> // pie de página </footer> </main>

Recomendación

Un punto de referencia <main> solo debe envolver el contenido principal de la página:

<body> <header>...</header> <main> // contenido principal del sitio </main> <footer> // pie de página </footer> </body>