M e j o r a s d e

a c c e s i b i l i d a d

Et p 1 - 14/07/2022
a a

Mejoras de accesibilidad en anses.gob.ar

Luego del análisis realizado en la web anses.gob.ar detectamos gracias a la extensión WA VE que había muchas irregularidades con respecto a la accesibilidad y ciertos
í
errores espec ficos los cuales fueron corregidos en la última actualización

Se agregaron los textos alternativos de todas las imágenes siendo más descriptivos y e xplicativos en lo que respecta a la lectura de pantalla de diferentes
programas o cuando hay un error de conexión y se muestra el texto Alt en lugar de la imagen

j
Se me oraron y agregaron los faltantes de textos en los Labels de todos los elementos que lo tengan, mejorando así la lectura general del código y su semántica de
cara a la indexación.

Se modificaron varios niveles de Headings que en la versión anterior saltaban por ejemplo de un h2 a un h4 lo cual no es semántico a la hora de revisar el árbol del
HTML y asi mejoramos la lectura del código para los lectores de pantalla y la indexación de Google en el buscador.

Se agregaron las etiquetas de “aria-label =hidden” para lograr que algunos elementos no sean leídos por los lectores de pantalla como los íconos o ciertos elementos
í
que no deben ser le dos por estos lectores ya que dificultan la interpretación de la información.

A continuación mostramos a modo de comparativa como se visualizaba el complemento WA VE, antes de hacer las correcciones de los errores mencionados arriba.
Podemos notar que el número de errores se redujo de 14 a 6, siendo estos 6 restantes errores que serán solucionados prontamente. También logramos reducir el
número de alertas de 6 a 3 solucionando errores específicos en algunos elementos del HTML.

Screenshot de la web antes de la corrección de los errores:

Por otro lado, es relevante mencionar la presencia de los 16 errores de contraste presentes, los cuales están indicados sobre todo en los links del menu principal
(Embarazo y nacimiento, hijos, educación, etc.) por tener bajo contrase entre la tipografía y el fondo.

Por esta razón, enviamos una nueva propuesta de incorporación de un nuevo color, que cumpla con los estándares de accesibilidad universales y no genere un
impacto o resultado negativo a la hora de utilizarlo con por ejemplo texto o links en color blanco con respecto al fondo. También enviamos una nueva propuesta a

Comunicaciones por el banner de la home “Que no te estafen” ya que no cumple con los estándarez de accesibilidad y su visualización es limitada para personas con

discapacidades visuales y/o dislexia.

Screenshot de la web despu és de la corrección de los errores:

Para finalizar, esta implementación de las mejoras de accesibilidad nos permiten ampliar la llegada del sitio web a más personas que utilicen diariamente los lectores
de pantalla, y a su vez nos acercamos a tener un código que cumpla con todas las reglas semánticas del HTML para su correcta indexación por parte del buscador.

Propuesta para comunicaciones:

j
A continuación ad untamos la propuesta que fue enviada a comunicaciones con el cambio de color en el header, en la sección del menu ya que uno de los principales

errores de contrase es en los elementos del menu y el contrase con el color institucional de fondo.

#0481CB
mi ANSES
(institucional)

#0368A5 (Azul
informativo)

Cambio de fuente a
Enconde Sans

Que no te estafen
Nueva propuesta de banner
Te recordamos que desde ANSES nunca nos comunicamos para solicitar datos personales o bancarios. Si recibís un llamado, mail,
mensaje o Whatsapp donde te piden ese tipo de información, hacé la denuncia en mi ANSES, opción “Denuncias y Reclamos” “Que no te estafen”

#0481CB
(institucional)

Et p 2 - 12/10/2022
a a

Mejoras de accesibilidad en anses.gob.ar

Se realizó un nuevo análisis con respecto a la accesibilidad de la web anses.gob.ar con la extensión Accessibility Insights for Web y se detectaron algunos errores de los

cuales los siguientes fueron corregidos en la última actualización

Se agregó un texto alternativo al elemento “input” para ser más descriptivos en lo que respecta a la lectura de pantalla de diferentes programas

Se corrigieron los valores de los atributos “role” haciendo que sean entendidos por lectores de pantalla.

Se agregaron atributos “aria-labelledby” que incorporándolo al HTML que se utiliza para crear relaciones entre los objetos y sus etiquetas.

Se agregaron los atributos de “aria-label” para lograr que los elementos sean leídos por los lectores de pantalla.

A continuación mostramos a modo de comparativa como se visualizaba el complemento Accessibility Insights for Web, antes de hacer las correcciones de los errores.

Capturas de la WEB antes de las correcciones y se muetra un detalle de las soluciones que se aplicaron:

Se agregó el atributo placeholder=”Buscá en ANSES” para hacer más descriptivo

Se modificaron los atributos “role” con valores válidos

Se modificaron los atributos “role” con valores válidos

Se modificaron los atributos “role” con valores válidos

Se modificaron los atributos “role” con valores válidos

Se modificaron los atributos “role” con valores válidos

Por último, respecto a la extensión WAVE utilizada con anterioridad, se redujeron los errores críticos de 6 a 3, de los cuales 2 corresponden a la incorporación del
atributo aria-label para que funcionen en lectores de pantalla y el último problema es con respecto al reCAPTCHA .

Se muestra una captura de pantalla de WAVE con los errores críticos actuales:

Tambi én se puede ver que aumentó en 1 la cantidad de alertas, esta corresponde a el titulo de un banner que debería ser un elemento tipo heading y está contenido
dentro de un elemento tipo paragraph.

Se muestra una captura de pantalla de WAVE con el alerta que se suma:

Para corregirlo se debe cambiar al tipo de etiqueta a <h3> o <h4> según corresponda

Et p 3 - 26/12/2022
a a

Mejoras de accesibilidad en anses.gob.ar

Se realizó un nuevo análisis con respecto a la accesibilidad de la web anses.gob.ar con la extensión WA VE y se detectaron algunos errores de los cuales los siguientes
fueron corregidos en la última actualización

Se aumentó el tama ño de algunas tipografías logrando que más cantidad de personas puedan leer el contenido de la página

Se agregaron textos descriptivos sobre funciones a elementos otor gando información al usuario para que pueda hacerse una idea de que trata.

Se reestructuraron algunos de los encabezados del para ase gurarse de que no se salten los niveles de encabezado.

Se eliminaron algunos enlaces adyacentes que iban al mismo sitio dejando un c ódigo más claro y limpio.

A continuación mostramos una descripción más detallada de cada uno de los errores corregidos en la página que se encuentra en producción actualmente.

Capturas de la WEB antes de las correcciones y se muetra un detalle de las soluciones que se aplicaron:

Se cambió el tama ño de fuente a 11px para lograr mayor legibilidad

Se agregó una opción por defecto al menú de selección para que represente el sentido del men ú

Se reestructuraron los encabezados del documento para que no se salten niveles de encabezado

Se eliminó el subrayado del texto ya que no es de enlace

Se eliminaron enlaces adyacentes que diri gían al mismo sitio

Se reestructuraron los encabezados del documento para que no se salten niveles de encabezado

Se eliminaron enlaces adyacentes que diri gían al mismo sitio

Se eliminaron enlaces adyacentes que diri gían al mismo sitio

Se eliminaron enlaces adyacentes que diri gían al mismo sitio

Se eliminó el atributo lang =”es” en todas las secciones ya que el idioma está definido en el html

Se reestructuraron los encabezados del documento para que no se salten niveles de encabezado

Se usó el elemento < >

ul para de finir semánticamente la lista

Se eliminó el atributo lang =”es-trad” en todas las secciones ya que el idioma está definido en el html

Se eliminó el atributo lang =”ES” en todas las secciones ya que el idioma está definido en el html

Por último, se implementó una nueva home en el sitio actual y se detectaron nuevos problemas
Saltos en niveles de encabezad

Encabezados en elementos de tipo párraf

Imágenes con el mismo nombre que su texto alternativ o

Se muestra una captura de pantalla de WA VE donde se puede visualizar que bajó la cantidad de errores críticos de 3 a 1 error y 6 alertas aumentó ya que antes habían 4:

Salto de
encabezado

Posible
encabezado

Posible
encabezado

Mismo
nombre que
el texto
descriptivo

Posible
encabezado

Mismo
nombre que
el texto
descriptivo

El único error que queda no debe ser tenido en cuanta ya que una de las versiones der reCA PTCHA utiliza un elemento de tipo <textarea> y este no puede editarse.

Et p 4 - 24/01/2023
a a

Mejoras de accesibilidad en anses.gob.ar

Se realizó un nuevo análisis con respecto a la accesibilidad de la web anses.gob.ar con la extensión WA VE y se detectaron algunos errores de los cuales los siguientes
fueron corregidos en la última actualización

Se eliminaron atributos correspondientes al idioma y se corrigieron lin ks adyacentes que dirigían al mismo sitio logrando así un código más limpio

j
Se me oró el texto auxiliar de las imágenes para hacerlos más descriptivos para los lectores de pantalla

j
Se eliminó la ustificación completa del texto para mejorar la le gibilidad de los espacios entre palabras

í
Se eliminaron encabezados vac os de tablas mejorando el recorrido en lectores de pantalla.

A continuación mostramos una descripción más detallada de cada uno de los errores corregidos en la página que se encuentra en producción actualmente.

Capturas de la WEB antes de las correcciones y se muetra un detalle de las soluciones que se aplicaron:

Se eliminó el atributo lang =”ES” para lograr un código más legible

Se eliminó el atributo lang =”ES” para lograr un código más legible

Se eliminó el atributo lang =”ES” para lograr un código más legible

Se eliminó el atributo lang =”ES” para lograr un código más legible

Se eliminó un lin k duplicado para lograr un código más legible

Se eliminó el atributo lang =”ES” para lograr un código más legible

Se eliminó el atributo lang =”ES” para lograr un código más legible

Se eliminó el atributo lang =”ES” para lograr un código más legible

Se eliminó un lin k duplicado para lograr un código más legible

k duplicado para lograr un código más legible

Se eliminó un lin

Se modificó el texto auxiliar de la imagen para hacerlo más descriptivos

Se modificaron los textos auxiliares de las imagenes para hacerlos más descriptivos

j
Se quitó el texto ustificado para mejorar la le gibilidad de los espacios entre palabras

í
Se eliminaron encabezados vac os de tablas mejorando el recorrido en lectores de pantalla

DGIIT