Municipalidad Providencia

14/12/2020

Revisamos 3 componentes de la saliendo del sitio: página de servicios de la municipalidad de Providencia 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:

  • Opciones de accesibilidad
  • Control select de filtrado
  • Íconos redes sociales en navegación secundaria

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.

Estructura

Lenguaje de página está en inglés

Si el lenguaje de la página no está especificado, o en este caso, está en el idioma incorrecto, un lector de pantalla podría leer el contenido del sitio con la pronunciación equivocada y será casi imposible de entender.

Pantallazo de atributo de lenguaje con su valor especificado en inglés, visto usando las herramientas de desarrollador de Chrome

El lenguaje primario del sitio es español, pero el lenguaje especificado en el sitio está en inglés.

Estándares relevantes

Título de página no es descriptivo

El título de la página es lo primero que es anunciado por un lector de pantalla al visitar un sitio. A una persona ciega le da confirmación de que se encuentra en el lugar correcto y también le da una idea sobre el contenido de dicha página.

Personas con discapacidades visuales y cognitivas también se ven beneficiadas al poder identificar el contenido por el título.

Pantallazo de título de página definido como Providencia, visto usando las herramientas de desarrollador de Chrome

Estamos en la página de servicios, pero el título de página es “Providencia”. Este es el mismo título de la página de inicio, y si un usuario llega a esta página desde la página de inicio, no tendrá confirmación alguna de que está en el lugar correcto. Tendrá que explorar hasta encontrar el encabezado nivel 1.

Estándares relevantes

Formularios

Control no tiene etiqueta asociada programáticamente

Las personas ciegas no pueden ver la proximidad de una etiqueta a un control. Para entender la relación entre ambas es importante asociarlas programáticamente y así remover toda ambigüedad.

Pantallazo de control select sin código semántico

El control select no cuenta con una etiqueta semántica ya que “Ordena por servicios” está implementada usando un elemento <span> en vez de un elemento <label>, y además no se encuentra asociada programáticamente al control.

Asociar la etiqueta a su control utilizando html semántico tiene el beneficio adicional de expandir el área para enfocar el control ya que hacer click tanto en la etiqueta como el control hará que éste reciba foco.

Estándares relevantes

Color

Contraste insuficiente en foco de botones

Todos los elementos interactivos deben tener un foco claramente visible para que una persona que usa un teclado para navegar un sitio sepa qué elemento tiene foco. Uno de los requisitos es que el foco tenga una relación de contraste suficiente, de lo contrario resulta difícil de entender o leer el contenido para personas con discapacidad visual.

Todos los navegadores ofrecen un foco por defecto, algunos con estilos distintos. Si bien el foco ofrecido por el navegador es técnicamente suficiente para cumplir con los requisitos del criterio de conformidad correspondiente, es recomendable ofrecer un estilo de foco mejorado que sea consistente en todos los navegadores y tenga un buen contraste.

Botón de trámites y servicios enfocado.

Los botones del sitio tienen un estilo de foco personalizado, pero no cumple con los requisitos mínimos de contraste. El foco tiene una sombra con valor rgba(0,123,255,.25) con una relación de contraste de 1.3:1 con el fondo (#1c1c1c), el requisito mínimo es de 3:1.

Estándares relevantes

Contraste insuficiente en control select con alto contraste

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.

Pantallazo de control select de filtrado con la opción de alto contraste activada. No se logra distinguir el borde con el color de fondo

Al usar la opción de alto contraste en la navegación superior, el control select para filtrar servicios tienen un borde (#000) con una relación de contraste de 1.1:1 en relación con el fondo (#111). El contraste mínimo requerido es de 3:1.

Es importante asegurarse que exista un contraste de color suficiente, de lo contrario resulta dificil de entender o leer el contenido para personas con discapacidades visuales.

Nota: Existen otros componentes con problemas al usar la opción de alto contraste, pero se encuentran fuera del alcance de esta revisión.

Estándares relevantes

Nombre, rol, valor

Redes sociales no tienen nombre accesible

Para personas que pueden ver los elementos en una página, la apariencia visual puede ser suficiente para determinar su propósito, pero para personas que usan tecnología de asistencia es importante que tengan un nombre accesible.

El nombre accesible queda expuesto en el árbol de accesibilidad del navegador y es la información que permite a por ejemplo un lector de pantalla identificar a un elemento.

Pantallazo de lista de enlaces a redes sociales con íconos: Facebook, Twitter, Youtube e Instagram

Los enlaces con íconos de las redes sociales están vacíos y no tienen texto discernible. Si no cuentan con un nombre accesible, personas que usan un lector de pantalla no tendrán información sobre el propósito de éllos.

Estándares relevantes

Contenido dinámico

Cambios en el contenido no son anunciados a tecnologías de asistencia

No todas las personas pueden ver los cambios que ocurren en la página. A veces hay información o contenido importante que ha sido actualizado y personas que usan tecnologías de asistencia también deben ser notificados.

Pantallazo de control select de filtrado con la opción 100% en linea seleccionada

El control select permite filtrar el contenido de la página ordenando los servicios en distintas categorías.

Cuando se elije una opción, hay un cambio en la página y solo se muestran los resultados filtrados. Sin embargo, este cambio no es notificado a personas que usan tecnología de asistencia. Una persona ciega o con baja visión utilizando un lector de pantalla no sabrá si la acción generó algún cambio en la página ya que no existe confirmación de ello.

Estándares relevantes

Controles personalizados

Opciones de accesibilidad

La navegación secundaria cuenta con opciones de accesibilidad. Es posible ver el sitio con un alto contraste y aumentar o disminuir el tamaño de la tipografía.

Pantallazo de control de opciones de accesibilidad en estado abierto con ícono de símbolo internacional de accesibilidad. Cuenta con un submenú con tres opciones: contraste, aumentar texto y disminuir texto

Encontramos los siguientes problemas de accesibilidad en la implementación:

  • El enlace que abre el submenú de opciones no tiene un nombre accesible. Personas que usan un lector de pantalla no tendrán información sobre su propósito.
  • No es posible determinar el estado del submenú. Si el submenú está abierto o cerrado debe ser comunicado no solo visualmente.
  • Las opciones del submenú están implementadas utilizando enlaces, pero un enlace infiere que es un elemento navegacional que te llevará a otra página o sección del sitio, lo cual no es el caso ya que gatillan acciones: aumentar o disminuir el tamaño de la tipografía, aumentar el contraste.
  • La opción de contraste tiene un estado activo e inactivo, pero esto no es comunicado a tecnologías de asistencia.

Estándares relevantes

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 requerimiento 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 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 servicios de la municipalidad de Providencia.

El encabezado nivel 1 “Portal servicios” está bien utilizado, describe el propósito de la página. Sin embargo, de nivel 1 pasa a nivel 6, luego a nivel 3 y nuevamente a varios encabezados de nivel 6.

Recomendación

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

  • h1 - Portal servicios
    • h2 - Búsqueda por servicios
      • h3 - Tránsito
      • h3 - Patentes comerciales
      • h3 - Obras
      • h3 - Aseo
      • h3 - Plan regulador
      • h3 - Otros
    • h2 - Búsqueda por temática
      • h3 - Pagos municipales
      • h3 - Certificados municipales
      • h3 - Becas municipales
    • h2 - Pié de página (visualmente escondido)
      • h3 - Contacto
      • h3 - Síguenos
      • h3 - Suscríbete a nuestro newsletter

De ser necesario es posible además agregar encabezados que estén visualmente escondidos como en el pié de página utilizando css:

<h2 class="visualmente-escondido">Soy un h2 visualemente escondido</h2> .visualmente-escondido { clip: rect(0 0 0 0); clip-path: inset(100%); Height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

Nombres en inglés

Asignar nombres accesibles a elementos es fundamental 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:

  • Ruta de navegación
  • Botón cerrar de diálogo
  • Botón abrir/cerrar de navegación principal en móvil

Recomendación

// Incorrecto ruta de navegación <nav aria-label="breadcrumb">...</nav> // Correcto ruta de navegación <nav aria-label="ruta">...</nav> // Incorrecto botón cerrar diálogo <button aria-label="Close">...</button> // Correcto botón cerrar diálogo <button aria-label="cerrar diálogo">...</button> // Incorrecto botón abrir/cerrar navegación <button aria-label="Toggle navigation">...</button> // Correcto botón abrir/cerrar navegación <button aria-label="Menú de navegación">...</button>

Zoom

Personas con baja visión pueden hacer uso del zoom del navegador para ver mejor el contenido.

Pantallazo de enlaces del submenú de municipalidad, parcialmente ocultos detrás de una imagen

Al hacer zoom a 150% desde un ancho de pantalla de 1280 pixeles, los enlaces del submenú quedan parcialmente ocultos detrás de una imagen.

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 en el criterio y por tanto técnicamente no es un fallo.

Recomendación

La imagen en el submenú es decorativa, por tanto una opción es ocultarla a partir de cierta altura de la pantalla.

@media (max-height: 550px) { .dropdown-menu-image { display: none; } }

Punto de referencia de contenido principal inexistente

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 para la navegación y el pié de página, pero no existe uno para el contenido principal del sitio.

Recomendación

Envolver el contenido principal en una etiqueta <main>.

<main> <div class="container mt-md-5">...</div> <div class="container my-md-5">...</div> </main>

Tamaño de elementos interactivos

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.

Recomendación

Aumentar el tamaño de los siguientes elementos interactivos de la página de servicios a un tamaño mínimo de 44 por 44 pixeles:

  • Todos los elementos en la navegación superior
  • Control de entrada y botón de buscar trámites
  • Control select de filtrado
  • Íconos de redes sociales en pié de página
  • Botón de suscripción en pié de página
  • Botón para abrir navegación primaria en móvil
  • Botón para abrir diálogo de búsqueda en móvil

Estándares relevantes