Pautas de accesibilidad al contenido web y mejora progresiva. Una guía rápida.

Feb 28, 2022 | español

La constante modernización y actualización de tecnologías en todo el mundo, ha obligado a las empresas a entrar en una nueva competencia para generar medios de comunicación cada vez más adaptados a las necesidades de sus consumidores.

En este sentido, la creación de nuevas guías de accesibilidad para contenidos web ha ayudado a desarrolladores y diseñadores a adaptar estos medios para que sean cada vez más accesibles a personas a las que antes no podían llegar. Con esta necesidad en mente,las WCAG (Web Content Accessibility Guidelinesse crearon), con el propósito de convertir los sitios web en sitios adaptados para que las personas con discapacidad física accedan a su contenido.

Cada versión reciente de las WCAG (Pautas de accesibilidad al contenido web) cumple con las versiones anteriores. Entonces, la versión 2.1 incluye 2.0, por lo que cada una mejora a la siguiente. Desde que WCAG se estableció en 1994 y se publicó el año siguiente, se ha modernizado a medida que avanzan las tecnologías disponibles. Es importante familiarizarse con estos estándares para desarrollar páginas web que cualquiera pueda usar.

La versión 2.1 es bastante reciente ya que se publicó en 2018, con el objetivo de mejorar las pautas de accesibilidad para:

  • Personas con discapacidades cognitivas o de aprendizaje
  • Personas con dificultades de visión
  • Personas con discapacidad que utilizan dispositivos móviles

No obstante, la accesibilidad debe ser considerada para todas las personas independientemente de su discapacidad:

Hay 3 niveles de prioridades que los desarrolladores y diseñadores deben cumplir, para que el contenido sea accesible para tantas personas como sea posible. Estos se basan en 4 principios que sitios web deben cumplir los. Los principios son:

Perceptible: la página web debe presentar los contenidos de una manera que la mayoría de la gente pueda percibir. Esto incluye letras, contrastes, detección de braille, reconocimiento de vozy símbolos.

Operable: La página web debe presentar los contenidos de una manera que la mayoría de la gente pueda operar. Esto incluye el uso del teclado, botones de tamaño adecuado, navegación y no parpadear para personas propensas a convulsiones.

Comprensible: la página web debe presentar el contenido de una manera que la mayoría de la gente pueda entender. Esto significa que la página web es predecible, fácil de usar y no propensa a errores.

Robusto: el contenido debe ser lo suficientemente robusto como para que pueda interpretarse sin problemas en navegadores, dispositivos que utilizan tecnologías de asistencia.

Prioridades de accesibilidad:

  • Prioridad 1. Algunos grupos de usuarios no podrán acceder al contenido de un sitio.
  • Prioridad 2. A determinados grupos de usuarios de Internet les resultaría muy difícil acceder a la información de un sitio.
  • Prioridad 3. Algunos usuarios tendrían ciertas dificultades a la hora de acceder al contenido de un portal.

Prioridad 1:

Aquí se deben implementar cinco criterios:

Atajos de teclas de caracteres: el usuario debe poder reasignar o ajustar los atajos de teclas según sus preferencias

Etiqueta en el nombre: El usuario debe comprender claramente la diferencia en las etiquetas y el texto cuando lee la pantalla

Gestos del puntero: para dispositivos móviles uso, los usuarios deben poder configurar para toques únicos para evitar deslizar, pellizcar y omitir otros gestos multipunto.

Cancelación del puntero: en dispositivos móviles Onclick o Onclick down (cuando se mantiene presionada una acción), los eventos deben ajustarse para que las personas con discapacidades motoras no hagan clic accidentalmente en el contenido.

Actuación por movimiento: en los dispositivos móviles, las funciones como la rotación, la agitación o la inclinación deben ajustarse para las personas con discapacidades de otra manera que tenga sentido.

Prioridad 2:

Aquí se deben implementar siete criterios:

Identificar la respuesta de entrada: Esto requiere diferentes formas de acceder a las entradas, como voz a texto, etc.

Reflujo: el texto debe ajustarse para usar el formato estándar en los dispositivos y desplazarse de manera predecible.

Contraste sin texto: los colores deben tener una proporción adecuada de contraste para evitar confusiones.

Espaciado de texto: el usuario debe poder ajustar el espaciado de texto para tener en cuenta la velocidad de lectura y la visibilidad

Contenido al: el desplazarse o enfocarcontenido debe permitir desplazarse hacia afuera, enfocarse hacia afuera, tener un tiempo establecido para facilitar la lectura y debe tener zoom si el usuario Requiere

nivel de orientación: el contenido web debe poder consumirse independientemente de la orientación y todas las funciones deben ser iguales.

Mensajes de estado: todos los mensajes de estado deben comunicarse al usuario sin abrumarlos o distraerlos de su trabajo y deben permitir la personalización y el ajuste.

Prioridad 3:

deben ser implementados cinco criterios aquí:

Identificar propósito: comunicar el propósito de botones, iconos, cuadros de texto, etc.

Tiempos de espera: se comunica con los usuarios si hay tiempos de espera durante la carga, etc.

Animación de Interacciones: El movimiento y animaciones se debe permitir que se desactivado para personas que podrían tener migrañas, convulsiones, etc.

Tamaño del objetivo: un objetivo debe tener al menos 44 × 44 píxeles CSS a menos que no sea interactivo.

Mecanismos de entrada simultáneos: los usuarios deben poder utilizar diferentes dispositivos, desde teclados hasta voz y texto para introducir e interactuar con el contenido de la página web.

Niveles de conformidad :

Hay 3 niveles de conformidad que se construyen entre sí de acuerdo con los principios y prioridades establecidos.

  • Nivel de conformidad “A”: alcanzado cuando todos los puntos de prioridad 1 se aplican con 5 criterios.
  • Nivel de Conformidad “AA”: se alcanza cuando todos los puntos de prioridad 1 y 2 se aplican con 7 criterios
  • Nivel de Cumplimiento “AAA”: se alcanza cuando todos los puntos de prioridad 1, 2 y 3 se aplican con 5 criterios

Conformidad Nivel “A”: alcanzado cuando todos los puntos de prioridad 1 se aplican con 5 criterios.

Nivel de Conformidad “AA”: se alcanza cuando todos los puntos de prioridad 1 y 2 se aplican con 7 criterios

Nivel de Conformidad “AAA”: se alcanza cuando todos los puntos de prioridad 1, 2 y 3 se aplican con 5 criterios

  • Definiciones rápidas:
  • WAI: WAI es la iniciativa de accesibilidad web del W3, este programa cubre estándares, pautas, reglas y técnicas de accesibilidad.
  • WCAG: WCAG son las pautas de accesibilidad al contenido que se deben utilizar al desarrollar un sitio web o una aplicación que debe ser accesible.
  • ARIA
  • ARIA es elInternet enriquecidas y accesibles, estándar de aplicaciones de que es un conjunto de técnicas y adiciones a HTML que permiten un marcado adicional a una página web para que pueda ser interpretada por dispositivos de accesibilidad como lectores de pantalla utilizados por ciegos o personas con discapacidades visuales. .

Mejora progresiva:

la mejora progresiva es un desarrollo enfoque depara el diseño web que enfatiza el contenido sobre la funcionalidad. Este enfoque se centra en el desarrollo a lo largo del tiempo en el que agrega capas de presentación,más personalizadas, matizadas y técnicamente rigurosas funcionalidad y característicassobre el contenido, según el usuario y sus capacidades en el navegador, el dispositivo y la conexión.

Los principios básicos de la mejora progresiva son:

  • El contenido básico debe ser accesible desde todos los navegadores web, dispositivos o modos de conexión.
  • La funcionalidad básica debe ser accesible para todos los navegadores web, dispositivos y modos de acceso.
  • Elmarcado semántico y disperso contiene todo el contenido, lo que facilita la búsqueda, el intercambio y la transformación de la información.
  • El diseño mejorado es proporcionado por CSS vinculado externamente, las hojas de estilo mejoran el contenido pero no son necesarias para su uso.
  • El comportamiento mejorado lo proporcionadiscreto y vinculado externamente JavaScript, solo cuando es necesario y si el dispositivo, el navegador o la conexión lo admiten.
  • usuario final preferencias ynavegador web del personalizaciones del Se permiten las.

Todo esto tiene ventajas desde el accesibilidad punto de vista de lay la optimización de los motores de búsqueda, ya que los usuarios pueden interactuar con el contenido de muchas formas diferentes y los motores de búsqueda pueden indexar, organizar y publicar el contenido para facilitar su consumo.

¿Dónde puede obtener estas actualizaciones?

Muchas empresas de todo el mundo requieren que sus tecnologías comerciales se adapten a estas necesidades especiales. Para saber cómo lograr este tipo de desarrollo visite: https://www.appspringtech.com/services/

ScreenReaders:

Existen diferentes lectores de pantalla según el sistema operativo al que tenga acceso el usuario:

All:

WebAnywhere: https: // www. webanywhere.co.uk/

ChromeVox para Google Chrome: https://chrome.google.com/webstore/detail/chromevox-classic-extensi/kgejglhpjiefppelpmljglcjbhoiplfn

ChromeVis para Google Chrome: https://usabilitygeek.com/10-free-screen -reader-blind-visual-impedired-users /

Windows

NVA: https://www.nvaccess.org/

Acceso al sistema Serotek para acceder a Internet Explorer: https://www.satogo.com/en/

SpokenWeb: http: / /www.spoken-web.com/index.cgi?p=download

Linux

Orca: https://wiki.gnome.org/Projects/Orca

Brllty: http://mielke.cc/brltty/

EmacSpeak: http: // emacspeak.sourceforge.net/

Mac

Apple voice over: https://www.apple.com/accessibility/mac/vision/

Windows:

NVA: https://www.nvaccess.org/

Serotek Acceso al sistema para ir a Internet Explorer: https : //www.satogo.com/en/

SpokenWeb: http: / /www.spoken-web.com/index.cgi?p=download

Linux

Orca: https://wiki.gnome.org/Projects/Orca

Brllty: http://mielke.cc/brltty/

emacspeak: http: // emacspeak.sourceforge.net/

Mac

Voz en off deApple:: https://www.apple.com/accessibility/mac/vision/

Herramientas y páginas de pruebaComprobador de

accesibilidad web: https://achecker.ca/checker/index.php

Web Herramienta de evaluación de accesibilidad: https://wave.webaim.org/

Lista de herramientas de evaluación de accesibilidad web: https://www.w3.org/WAI/ER/tools/

Ainspector para Mozilla: https://addons.mozilla.org/ en-US / firefox / addon / ainspector-sidebar /

EqualWeb para Chrome: https://chrome.google.com/webstore/detail/equalweb-accessibility-ch/imemciokfejbnonkkinhcdfigdilcllg?utm_source=chrome-ntp-icon

Referencias:

https: / /www.w3.org/WAI/WCAG21/quickref/

https://olgacarreras.blogspot.com/2017/04/wcag-21-medida-provisional-hasta-las.html

https://usabilitygeek.com/10- lector-de-pantalla-gratuito-usuarios-ciegos-con-discapacidad-visual /

https://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines

https://www.w3.org / TR / WCAG21 /

https://www.w3.org/WAI/WCAG21/implementation-report/

https://www.shopify.com/partners/blog/what-is-progressive-enhancement-and-why-should -you-care

https://medium.com/simple-human/the-real-progressive-enhancement-25368b163f9c

https://webaim.org/standards/wcag/WCAG2Checklist.pdf

https://vinceumo.github.io/ devNotes / A11Y / wcag /

http://accessw3.com/wcag21-accessibility-checklist.html

https://www.shopify.com/partners/blog/what-is-progressive-enhancement-and-why-should-you -care

https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/#:~:text=Progressive%20Enhancement%20(PE) % 20es% 20la,% 20puede% 20controlar% 20la% 20% 20experiencia mejorada.

https://medium.com/simple-human/the-real-progressive-enhancement-25368b163f9c

https://www.levelaccess.com/wcag-2-1-exploring-new-success-criteria/

Feb 28, 2022