Categorías
Actualidad Diseño General

¿Qué tan accesibles son los sitios web en Chile?

El mundo con COVID-19 es nuestra nueva realidad, por lo que estoy incluyendo enlaces a algunas actualizaciones positivas sobre la investigación, al final de cada artículo.

Una cosa que ha sido interesante ver en las últimas semanas es cómo ha cambiado nuestra relación con el tiempo frente a la pantalla. Para muchos, el tiempo frente la pantalla ahora es todo el tiempo y, junto a esto vemos que los sitios web que frecuentan las personas en Chile en general no son para nada accesibles ¿Qué hacemos frente a esta gran problemática?.

Para entender un poco más la situación en Chile, a mediados de Marzo que debemos permanecer en nuestros hogares, para evitar el riesgo de contagio de Coronavirus, esto quiere decir que diariamente usamos una cantidad de aplicaciones que, al menos en mi caso son muchas, ya que trabajo diseño interfaces gráficas específicamente, afortunadamente estas herramientas son accesibles, en el caso que trabaje en una zona con poca iluminación solo debo activar una opción del computador o smartphone para que no me haga forzar la vista y funciona, ¿Por qué? Sencillamente existen contrastes de colores que facilitan la lectura, estar frente a la pantalla es un reto, no solo para quienes debemos pasar más horas, si no que para todos, quienes quieren estar informados que no sea por la tv o radio, quienes entran a twitter para saber quién está vendiendo verduras en su sector con reparto a domicilio o tan solo saber qué tramites online pueden hacer para no salir de sus casas. Es por esto que me pregunto ¿Qué tal funcionan los sitios web chilenos? ¿Realmente están disponibles para todas y todos? Hice un pequeño test para saber que tan bien preparados están para su uso, revisémoslos a continuación:

Contraste de color

Un buen contraste de colores nos permite tener una mayor claridad del contenido que estamos viendo. Según el estándar internacional de las pautas de accesibilidad WCAG 2.1 la relación de contraste entre el fondo y un texto de tamaño normal que son 14pt debe tener una relación de contraste mínimo de 4.5:1. Pongo como ejemplo la página inicial del banco estado en dónde tomé 3 muestras de contrastes de colores en areas claves como la navegación del sitio web e información sobre políticas de seguridad, veamos qué pasa.

1.- Navegación superior: El fondo gris y texto blanco tienen una relación de contraste de 4.47:1. No pasa la prueba.

Barra de navegación superior

2.- Navegación de productos y servicios: El fondo naranjo y texto blanco tienen una relación de contraste de 2.4:1. No pasa la prueba.

Barra de navegación superior de productos y servicios

3.- Pie de página: El fondo y texto tienen una relación de contraste de 4.01:1. No pasa la prueba.

Tomemos como ejemplo un jubilado con poca sensibilidad al contraste:

Problema de contraste: “No pude usar el formulario de pedidos, no había cajas de texto. Después de una larga llamada con el servicio de atención al cliente, supe que las cajas de texto tenían un borde muy claro que yo no podía ver.”

El contraste funciona bien: “Puedo ver los iconos, botones y todo lo demás fácilmente, incluso bajo la luz del sol.”

Fuente: https://www.w3.org/WAI/standards-guidelines/wcag/new-in-21/es

Las pruebas de contraste de colores las hice en la herramienta online “Contrast Checker” de Webaim y la pueden encontrar en https://webaim.org/resources/contrastchecker/

Estructura de encabezados

Al encontrar una página web larga, algunos de nosotros nos desplazamos rápidamente y buscamos los encabezados para tener una idea del contenido. Las personas que usan lectores de pantallas – en inglés Screen readers – y otras tecnologías de asistencia que también tienen la capacidad de navegar por las páginas web desde la estructura de los encabezados, por lo que éstos deben estar bien jerarquizados según el contenido. Pongo como ejemplo la página inicial de Emol. Veamos qué pasa.

Visualización de encabezados desorganizados en el menú de Voice Over de Mac. emol.com

En la imagen está la opción del VoiceOver de mac – Screen Reader –  habilitada  para navegar desde los encabezados de la página y se muestra cómo del nivel 1 siendo la posición más importante de una jerarquía pasa al nivel 3 saltándose el nivel 2 y cada encabezado es independiente al contenido del anterior. La estructura dice que teniendo un encabezado nivel 1 es el más importante siendo así típicamente el titulo de la página, dándole al usuario un indicador de lo que se trata la página completa – se debe tener solo 1 encabezado nivel 1 por página. Cada encabezado nivel 2 crea una sección de contenido. Dividen las páginas en secciones consumibles que ayudan a organizar el contenido.

Cuando llegue al siguiente encabezado, pregúntese: ¿Es una nueva sección? Si es así, un Título 2 sería apropiado. Si es una subsección del último título 2, entonces un Título 3 sería adecuado. Si es una subsección del último Título 3, entonces un Título 4 sería una buena opción, y así sucesivamente.

Ejemplo de estructura de encabezados, desde el encabezado 1 hasta el encabezado 4

Fuente de la imagen: https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility

Analicemos el sitio web de la BBC, en la imagen siguiente vemos que cumple con esta norma de la estructura, es coherente. Se ha utilizado un solo Título 1 en la página, este se envuelve alrededor del logotipo (que es apropiado solo para la página de inicio). 

Las diferentes secciones de la página se definen como Encabezado 2 (incluidos algunos de los elementos sobre el encabezado 1), esto permite a los usuarios escanear la página fácilmente para encontrar la sección relevante para que la lean. Los encabezados de cada tema se definen como Encabezados 3.

Encabezados organizados correctamente según el contenido en el menú de Voice Over de Mac. BBC.com

Accesible con el teclado

Hay grupos de usuarios, como las personas con movilidad reducida, utilizan el teclado en vez del ratón para controlar el ordenador y navegar por una página web. A veces, ciertas partes de una página web sólo son accesibles mediante el ratón, lo que ocasiona un grave problema de accesibilidad para los usuarios antes citados. Los usuarios que pueden ver, utilizan el teclado para navegar por el computador y a su vez, por una página web, entonces necesitan que los elementos de interacción de la página muestren una señal visual cuando reciban el foco. Pongo como ejemplo la página inicial de vtr, un buen ejemplo para este caso. Veamos qué pasa.

Para comprobar una correcta navegación del sitio debemos presionar la tecla TAB la cual nos dirigirá al primer elemento interactivo, como un botó, link, elemento de formulario, etc. Lamentablemente ninguno de los elementos recibe el foco, por lo que desafortunadamente no pasa la prueba.

La página web presenta un grave problema de accesibilidad y viola el criterio de conformidad 2.1.1 Teclado de WCAG 2.0:

Toda la funcionalidad del contenido es operable a través de una interfaz de teclado sin que se requiera una determinada velocidad para cada pulsación individual de las teclas, excepto cuando la función interna requiere de una entrada que depende del trayecto de los movimientos del usuario y no sólo de los puntos inicial y final. (Nivel A).

Fuente: https://www.observatoriodelaaccesibilidad.es/espacio-divulgativo/articulos/10-pruebas-accesibilidad-web-realizar-10-minutos-parte-1.html

Para concluir, existe un estudio nacional de la discapacidad que se realizó en el 2015 que muestra el porcentaje de la población chilena de 2 años y más en situación de discapacidad .

HOMBRES: 12,9

MUJERES: 20,3

16,7% de la población de 2 y más años se encuentra en situación de discapacidad, es decir:
2 millones 836 mil 818 personas.

Estadística de la población en situación de discapacidad en Chile.

Cada día que no se aplican normas en el contenido web, estamos dejando fuera a muchas personas, tomemos conciencia para que el día de mañana todas y todos podamos disfrutar del mismo contenido y de la misma manera.

Fuente “Estudio nacional de la discapacidad” https://www.ciudadaccesible.cl/wp-content/uploads/2017/02/Folleto-II-Estudio-Nacional-de-la-Discapacidad.pdf

4896 Reviews

dom_prestarelykh_ihka - ekxbxdvioka@tb-ndfl.ru
https://xn-----1-53dbnmkbb4eee3akaijkcufdpk8exirb.xn--p1ai/
1

дом престарелых севастополь

Как гарантировать качественный уход в домах престарелых Севастополя дома престарелых в севастополе http://xn-----1-53dbnmkbb4eee3akaijkcufdpk8exirb.xn--p1ai/ .

pansionat_prestarelykh_zhka - qqchxfxzxka@tb-usn.ru
https://xn-----1-53dbnmkbb4eee3akaijkcufdpk8exirb.xn--p1ai/
1

дом престарелых севастополь

Полный гид по домам престарелых в Севастополе: уход и комфорт севастопольский дом интернат для престарелых и инвалидов https://www.xn-----1-53dbnmkbb4eee3akaijkcufdpk8exirb.xn--p1ai/ .

diplom_kupit_ixSn - rdfqukiewSn@tb-usn.ru
https://diplomy-dypit24.ru/
1

купить диплом

Готовые дипломы любой специальности – купить онлайн купить диплом в москве http://diplomy-dypit24.ru/ .

diplom_kupit_nlOi - pcspssbrzOi@tb-ndfl.ru
https://dipl-fast.ru/
1

купить диплом

Как купить диплом: эффективные советы купить диплом в москве dipl-fast.ru .

trenazhery_gmMl - cftemvhrgMl@tb-otkrytb-ip1.ru
https://trenajeri-dlya-zala.ru/
1

купить тренажеры для спортзала

Тренажеры для спортзала: гарантия качества и долговечности тренажеры для фитнес клуба http://www.trenajeri-dlya-zala.ru/ .

LeslieTog - mikhaileliffkt@mail.ru
https://moscowneversleep.com/
1

rutor darknet зеркало рабочее 2022

rutor darknet зеркало рабочее 2022 Эскорт модели Проститутки Москвы, несомненно, являются украшением ночного города. Снять несложно в любом районе столицы, а предлагаемые клиентам интим услуги отличаются доступностью и разнообразием. По вызову в Мск позиционируют эротические услуги и секс за деньги, размещая интим объявления на нашем Воспользовавшись этим сайтом, любой москвич или гость столицы сможет найти по своему вкусу и кошельку. Source: rutor darknet зеркало рабочее 2022

crazymonkey_gnOi - efkdppfzqOi@mail.ru
crazy-monkey-ru.ru
1

crazymonkey

автомат crazy monkey играть crazy-monkey-ru.ru .

pansionat_prestarelykh_ynka - gyxtuuacdka@tb-usn.ru
https://xn-----1-53dbnmkbb4eee3akaijkcufdpk8exirb.xn--p1ai/
1

дом престарелых севастополь

Выбираем дом престарелых в Севастополе: обзор лучших предложений севастополь дом престарелых и инвалидов xn-----1-53dbnmkbb4eee3akaijkcufdpk8exirb.xn--p1ai .

dom_prestarelykh_vyka - duxnmqruxka@tb-ndfl.ru
https://xn-----1-53dbnmkbb4eee3akaijkcufdpk8exirb.xn--p1ai/
1

дом престарелых севастополь

Дом престарелых в Севастополе: Ваши близкие в надежных руках дом престарелых севастополь цена http://www.xn-----1-53dbnmkbb4eee3akaijkcufdpk8exirb.xn--p1ai/ .

diplom_kupit_ygEi - xpuaxgxovEi@tb-usn.ru
https://diplom-trues.ru/
1

купить диплом

Где купить диплом: ваш универсальный гид по лучшим предложениям цена на покупку диплома цена на покупку диплома .

Write a Review

2 respuestas en “¿Qué tan accesibles son los sitios web en Chile?”

Hola, me podrías ayudar por favor? Con un grupo de profesionales de las Ciencias de la Tierra estamos creando un página web para enseñar las geociencias a la comunidades no científica y escolar. Es un proyecto sin fines de lucro. Nuestra idea también es hacer la página web inclusiva, porque será una Revista web tanto para adultos como para niños. Yo estoy a cargo del proyecto y también de la página, me orientas por favor en cuanto a colores a utilizar, letras, tamaños, y por sobre todo el encabezado, leía que sólo la primera página lo debe incluir, porqué? Me cuesta entender lo del contraste de colores. Cualquier ayuda y tips super agradecida para poder hacer la página inclusiva. Es una Revista que esperamos que tenga un alcance a nivel latinoamericano ya que al menos hay 10 países participando. Saludos!

Hola Pas! Espero que te encuentres bien. Me parece que la iniciativa que estás creando tiene un valor increíble y muchas gracias por compartirlo con nosotros, te cuento, para hacer un sitio web accesible existen unas pautas de accesibilidad que en algunos países es un estándar para los sitios web gubernamentales o estatales y se llama Pautas de Accesibilidad para el Contenido Web – WACAG 2.1 – Existen varios criterios de conformidad que se deben cumplir y sobre lo que preguntas es ideal usar textos legibles en donde el tamaño mínimo sea de 12pt aproximadamente, despertar el uso de los encabezados como se muestra en el artículo, con una buena jerarquía de encabezados la persona que use un software de asistencia como un screen reader va a poder navegara través de ellos. Sobre el contraste de color siempre debe ser alto, de esta forma las personas con problemas de visión pueden distinguir mejor el contenido, puedes usar esta herramienta para escoger colores accesibles. Puedes revisar estos recursos que ilustran lo que se debe y no hacer al momento de diseñar pensando en accesibilidad:

Agregar un comentario

Su dirección de correo no se hará público.