Aprendiendo sobre WCAG y sus criterios de conformidad

**¿Qué es WCAG? ** En inglés son las Web Content Accessibility Guidelines o en español las Pautas de Accesibilidad para el Contenido Web. Un rango de recomendaciones para crear contenido web más accesible.

**Historia de WCAG **

• W3C - World Wide Web Consortium : Creadores de los estándares que usamos para construir la web.

• WAI - Web Accessibility Initiative : Iniciativa dentro de W3C cuya meta es asegurar la accesibilidad web.

Evolución de nivel - Pautas de Accesibilidad para el Contenido Web (WCAG) 2.0
Recomendación del W3C del 11 de diciembre de 2008

• [ ] 1. Perceptible
  • [ ] 1.1 Alternativas textuales
    • [ ] 1.1.1 - A - Contenido no textual:
      • [ ] Controles, Entrada de datos
      • [ ] Contenido multimedia tempodependiente
      • [ ] Pruebas
      • [ ] Sensorial
      • [ ] CAPTCHA
      • [ ] Decoración, Formato, Invisible
  • [ ] 1.2 Medios tempodependientes
    • [ ] 1.2.1 - A - Sólo audio y sólo vídeo (grabado)
      • [ ] Sólo audio grabado
      • [ ] Sólo vídeo grabado
    • [ ] 1.2.2 - A - Subtítulos (grabados)
    • [ ] 1.2.3 - A - Audiodescripción o Medio Alternativo (grabado)
    • [ ] 1.2.4 - AA - Subtítulos (en directo)
    • [ ] 1.2.5 - AA - Audiodescripción (grabado)
    • [ ] 1.2.6 - AAA - Lengua de señas (grabado)
    • [ ] 1.2.7 - AAA - Audiodescripción ampliada (grabada)
    • [ ] 1.2.8 - AAA - Medio alternativo (grabado)
    • [ ] 1.2.9 - AAA - Sólo audio (en directo)
  • [ ] 1.3 Adaptable
    • [ ] 1.3.1 - A - Información y relaciones
    • [ ] 1.3.2 - A - Secuencia significativa
    • [ ] 1.3.3 - A - Características sensoriales
  • [ ] 1.4 Distinguible
    • [ ] 1.4.1 - A - Uso del colo
    • [ ] 1.4.2 - A - Control del audio
    • [ ] 1.4.3 - AA - Contraste (mínimo)
      • [ ] Textos grandes
      • [ ] Incidental
      • [ ] Logotipos
    • [ ] 1.4.4 - AA - Cambio de tamaño del texto
    • [ ] 1.4.5 - AA - Imágenes de texto
      • [ ] Configurable
      • [ ] Esencial
    • [ ] 1.4.6 - AAA - Contraste (mejorado)
      • [ ] Textos grandes
      • [ ] Incidental
      • [ ] Logotipos
    • [ ] 1.4.7 - AAA - Sonido de fondo bajo o ausente
      • [ ] Ningún sonido de fondo
      • [ ] Apagar
      • [ ] 20 dB
    • [ ] 1.4.8 - AAA - Presentación visual
    • [ ] 1.4.9 - AAA - Imágenes de texto (sin excepciones)
• [ ] 2. Operable
  • [ ] 2.1 Accesible por teclado
    • [ ] 2.1.1 - A - Teclado
    • [ ] 2.1.2 - A - Sin trampas para el foco del teclado
    • [ ] 2.1.3 - AAA - Teclado (sin excepciones)
  • [ ] 2.2 Tiempo suficiente
    • [ ] 2.2.1 - A- Tiempo ajustable
      • [ ] Apagar
      • [ ] Ajustar
      • [ ] Extender
      • [ ] Excepción de tiempo real
      • [ ] Excepción por ser esencial
      • [ ] Excepción de 20 horas
    • [ ] 2.2.2 - A - Poner en pausa, detener, ocultar
      • [ ] Movimiento, parpadeo, desplazamiento
      • [ ] Actualización automática
    • [ ] 2.2.3 - AAA - Sin tiempo
    • [ ] 2.2.4 - AAA - Interrupciones
    • [ ] 2.2.5 - AAA - Re-autentificación
  • [ ] 2.3 Convulsiones
    • [ ] 2.3.1 - A - Umbral de tres destellos o menos
    • [ ] 2.3.2 - AAA - Tres destellos
  • [ ] 2.4 Navegable
    • [ ] 2.4.1 - A - Evitar bloques
    • [ ] 2.4.2 - A - Titulado de páginas
    • [ ] 2.4.3 - A - Orden del foco
    • [ ] 2.4.4 - A - Propósito de los enlaces (en contexto)
    • [ ] 2.4.5 - AA - Múltiples vías
    • [ ] 2.4.6 - AA - Encabezados y etiquetas
    • [ ] 2.4.7 - AA - Foco visible
    • [ ] 2.4.8 - AAA - Ubicación
    • [ ] 2.4.9 - AAA - Propósito de los enlaces (sólo enlaces
    • [ ] 2.4.10 - AAA - Encabezados de sección
• [ ] 3. Comprensible
  • [ ] 3.1 Legible
    • [ ] 3.1.1 - A - Idioma de la página
    • [ ] 3.1.2 - AA - Idioma de las partes
    • [ ] 3.1.3 - AAA - Palabras inusuales
    • [ ] 3.1.4 - AAA - Abreviaturas
    • [ ] 3.1.5 - AAA - Nivel de lectura
    • [ ] 3.1.6 - AAA - Pronunciación
  • [ ] 3.2 Predecible
    • [ ] 3.2.1 - A - Al recibir el foco
    • [ ] 3.2.2 - A - Al recibir entradas
    • [ ] 3.2.3 - AA - Navegación coherente
    • [ ] 3.2.4 - AA - Identificación coherente
    • [ ] 3.2.5 - AAA - Cambios a petición
  • [ ] 3.3 Entrada de datos asistida
    • [ ] 3.3.1 - A - Identificación de errores
    • [ ] 3.3.2 - A - Etiquetas o instrucciones
    • [ ] 3.3.3 - AA - Sugerencias ante errores
    • [ ] 3.3.4 - AA - Prevención de errores (legales, financieros, datos)
      • [ ] Reversible
      • [ ] Revisado
      • [ ] Confirmado
    • [ ] 3.3.5 - AAA - Ayuda
    • [ ] 3.3.6 - AAA - Prevención de errores (todos)
      • [ ] Reversible
      • [ ] Revisado
      • [ ] Confirmado
• [ ] 4. Robusto
  • [ ] 4.1 Compatible
  • [ ] 4.1.1 - A - Procesamiento
  • [ ] 4.1.2 - A - Nombre, función, valor

¡Ooooh no! Son muchos factores a tomar en cuenta, ¿Cómo me voy a guiar? ¿Qué usaré de referencia? ¿Qué estándar seguiré?
.
Chill out, tenemos a las Web Content Accessibility Guidelines (de ahora en más referidas como WCAG) que nos guiarán en nuestro camino a crear una web más accesible.
.
Las WCAG son un rango de recomendaciones para crear contenido web más accesible, creadas por nuestra confiable y vieja amiga la W3C, quien nos ha dado estándares para las demás áreas del desarrollo web.
.
Dentro de las WCAG tenemos 12 criterios, que a su vez se divide cada uno en 3 niveles que determinan el nivel de inversión que se hará en accesibilidad.
.
Nivel A (básico), Nivel AA (Intermedio) y Nivel AAA (Más alto).
.
Aquí pueden leer toda la documentación al respecto: https://www.w3.org/WAI/standards-guidelines/wcag/

El link oficial por si quieren consultarlo
ES https://www.w3.org/WAI/standards-guidelines/wcag/es
EN https://www.w3.org/WAI/standards-guidelines/wcag/

En Colombia existe una documentación sobre accesibilidad establecida por ICONTEC ( Instituto Colombiano de Normas Técnicas y Certificación ) la norma NTC 5854

https://www.icontec.org/rules/accesibilidad-a-paginas-web/

Qué es WCAG

• En inglés son las Web Content Accessibility Guidelines o en español las Pautas de Accesibilidad para el Contenido Web
• Un rango de recomendaciones para crear contenido web más accesible

Historia

• Son creados por la W3C - World Wide Web Consortium → Creadores de los estándares que usamos para construir la web
• WAI - Web Accesibility Initiative → Iniciativa dentro de la W3C cuya meta es asegurar la accesibilidad web. Ha dado las guías para implementar la accesibilidad web
• WCAG → Va a en el nivel 2.0

WCAG

• Dentro de WCAG hay doce criterios de conformidad que debemos respetar, y cada criterio se divide en tres niveles. Cada nivel nos ayuda a escoger cuanta inversión le queremos poner a la accesibilidad web
  • Nivel A → Nivel más bajo, nos garantiza una necesidad básica para nuestro productos
  • Nivel B → Nivel intermedio
  • Nivel C → Nivel Alto → Lo usan empresas que trabajan con gobiernos o universidades

Web Content Accessibility Guidelines (WCAG) Overview

Resumen - Pautas de Accesibilidad para el Contenido Web (WCAG) 2.0
Recomendación del W3C del 11 de diciembre de 2008

• [ ] 1 Perceptible
  • [ ] 1.1 Proporcionar alternativas textuales para todo contenido no textual de modo que se pueda convertir a otros formatos que las personas necesiten, tales como textos ampliados, braille, voz, símbolos o en un lenguaje más simple.
  • [ ] 1.2 Medios tempodependientes: proporcionar alternativas para los medios tempodependientes.
  • [ ] 1.3 Crear contenido que pueda presentarse de diferentes formas (por ejemplo, con una disposición más simple) sin perder información o estructura.
  • [ ] 1.4 Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo.
• [ ] 2 Operable
  • [ ] 2.1 Proporcionar acceso a toda la funcionalidad mediante el teclado.
  • [ ] 2.2 Proporcionar a los usuarios el tiempo suficiente para leer y usar el contenido.
  • [ ] 2.3 No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones.
  • [ ] 2.4 Proporcionar medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran.
• [ ] 3 Comprensible
  • [ ] 3.1 Hacer que los contenidos textuales resulten legibles y comprensibles.
  • [ ] 3.2 Hacer que las páginas web aparezcan y operen de manera predecible.
  • [ ] 3.3 Ayudar a los usuarios a evitar y corregir los errores.
• [ ] 4 Robusto
  • [ ] 4.1 Maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las ayudas técnicas.

Techniques for WCAG 2.1.

Niveles de accesibilidad (WCAG) 2.0:

• [ ] A - nivel basico
• [ ] AA - nivel intermedio
• [ ] AAA - nivel avanzado al cual debemos apuntar si trabajamos en servicios del gobierno, universidades o servicios esenciales de la vida cotidiana.

Ideas/conceptos claves

WCAG son las Web Content Accessibility Guidelines o en español las pautas para el Contenido Web

Apuntes

• WCAG es un rango de recomendaciones para crear un contenido más accesible
  • Es creado por W3C ⇒ Creadores de los estándares que usamos para construir la web
  • WAI - Web Accessibility Initiative
    • Iniciativa dentro W3C cuya meta es asegurar la accesibilidad web
• Existen diferentes niveles para clasificar nuestros productos
  • Nivel A ⇒ Es el más bajo nos garantiza una accesibilidad básica
  • Nivel AA ⇒ Nivel Intermedio
  • Nivel AAA ⇒ Nivel más alto es usado mayormente por el gobierno o universidades para asegurarse que su contenido sea legible para todo publico

RESUMEN: WCAG son unas guías para poder crear contenido accesible para la web, podemos clasificar los sitios con A, AA y AAA según que tan accesible puede llegar a ser

Accesibilidad Web en mis propias palabras:

• Es la forma en que nosotros como desarrolladores permitimos que el público en general pueda consumir nuestro contenido de forma sencilla y sin trabas.

Las pautas de accesibilidad de contenido web nos guían al momento de implementar la accesibilidad web. Las podemos usar durante todo el proceso de desarrollo de producto, desde que nace la idea para lo que queremos construir, durante el diseño de los estilos y las interfaces, hasta cuando escribimos código y hacemos pruebas de calidad. Nos señalan los puntos importantes para tener en cuenta con eso podemos construir páginas, productos y aplicaciones que le funcionan a todos nuestros usuarios sin importar su capacidades, dispositivos o preferencias.

Aunque las pautas (referidas también por su nombre en inglés WCAG) son muy completas y siguen creciendo a medida que nuestras tecnologías crecen, es importante conocer los 4 principios que nos guían para poder tomar decisiones puntuales a nivel de nuestros productos. Dentro de cada principio encontramos los criterios de conformidad que se pueden interpretar acorde al nivel de WCAG que le quieres o debes aplicar a tu sitio web. Recuerda que los 3 niveles son:

A - nivel basico

AA - nivel intermedio

AAA - nivel avanzado al cual debemos apuntar si trabajamos en servicios del gobierno, universidades o servicios esenciales de la vida cotidiana.

En esta lectura vamos a profundizar sobre los criterios de conformidad para tener una idea más clara de que podemos encontrar dentro de WCAG. Podemos empezar por el primer principio:

1. Perceptible

Los criterios de conformidad bajo este principio se enfocan en asegurar que todo el contenido que es importante se pueda interpretar de varias maneras. Aqui nos queremos

1.1 Asegurar que estamos proporcionando alternativas textuales para todo contenido no textual.
1.2 Proporcionar alternativas para los medios tempodependientes (como videos o audios, queremos ofrecer opciones como subtítulos o guiones).

1.3 Crear contenido que se pueda presentar de diferentes formas sin perder información o estructura.

1.4 Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo

1. Operable

Cuando hablamos de ser operable, queremos asegurarnos que nuestro sitio es fácil de usar y navegar, que se puede navegar de diferentes maneras y con mouse y/o teclado

2.1 Proporcionar acceso a toda la funcionalidad mediante del teclado

2.2 Darle a las usuarias suficiente tiempo para leer y usar el contenido (tener esto en cuenta cuando hacemos time outs, comunicarlos y dar opciones para pedir más tiempo si es necesario)

2.3 Tener mucho cuidado de no usar elementos que brillan o se mueven muy rápido ya que pueden provocar ataques, espasmos o convulsiones

2.4 Asegurarnos que nuestros usuarios pueden navegar, encontrar contenido y determinar dónde se encuentran en nuestros sitios

1. Comprensible

Hacer que nuestro sitio web sea comprensible nos asegura que un rango de personas lo pueden usar desde la persona que vive con una discapacidad mental que necesita patrones comunes para saber cómo usar la web hasta la persona que va de carrera y necesita consultar algo rápido

3.1 Tener en cuenta los tamaños de texto y contraste de colores para que los textos resulten legibles y comprensibles

3.2 Hacer que las páginas web aparezcan y operen de manera predecible.

3.3 Dar instrucciones para evitar errores y oportunidades para corregirlos cuando ocurren

1. Robusto

Cuando hacemos productos que funcionan en muchos lados, abrimos las posibilidades que cualquier persona los use sin importar su ubicación, máquina, navegador y mucho más

4.1 Maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las tecnologías asistivas

Así son los criterios de conformidad para la version 2.0 de WCAG. Te invito a entrar a la documentación y leer sobre que es necesario a cada nivel. ¿Hay alguno que te sorprende? ¡Cuéntame en los comentarios!

En Colombia esto es ley?

Muy buena informacion del Link de las pautas WCAG 2.0,en mi caso voy por : las recomendables, así como a tratar de buscar consejo acerca de las mejores prácticas actuales que aseguren un contenido web accesible, en la medida de lo posible, para esos grupos de discapacidades. Los metadatos pueden ayudar a los usuarios a localizar los contenidos más apropiados para sus necesidades.

La accesibilidad web tiene como objetivo lograr que las páginas web sean accesibles y utilizables por el máximo número de personas, independientemente de sus conocimientos, capacidades personales o las características técnicas del dispositivo de acceso empleado.

A nivel internacional, el W3C promueve la progresiva adopción de directrices de accesibilidad en la Web, especialmente a través de su grupo de trabajo Iniciativa para la Accesibilidad Web (WAI). Este grupo publicó en 1999 la primera versión de su documento Directrices de Accesibilidad del Contenido Web (Web Content Accessibility Guidelines o WCAG) que se han convertido en una referencia internacionalmente aceptada.

La última versión de este documento, las denominadas WCAG 2.1, fueron publicadas en junio de 2018 y en ellas se explica cómo hacer el contenido Web accesible para personas con discapacidades. Estas directrices están dirigidas a los desarrolladores y diseñadores de sitios Web, a los desarrolladores de herramientas de autor para el diseño y programación de sitios Web, a los desarrolladores de herramientas de evaluación de la accesibilidad Web y para cualquiera que necesite un estándar de referencia con el que comprobar la accesibilidad de un determinado contenido en la Web.

Contenido de la versión 2.1: http://www.codexexempla.org/traducciones/pautas-accesibilidad-contenido-web-2.0.htm

World Wide Web Consortium (W3C): Creadores de los estándares que usamos para construir la web, como HTML y CSS.

• Actualmente el estándar o nivel vigente en la Web es el 2.0
• WCAG maneja 12 criterios de conformidad que deben respetarse en la Web, cada uno significa un nivel de compromiso e inversión en Accesibilidad Web:
• A - El nivel más bajo, garantiza una accesibilidad básica
• AA - El nivel intermedio en cuanto a accesibilidad
• AAA - El nivel más alto, garantiza una accesibilidad completa (utilizado principalmente por empresas de alto nivel que trabajan para el gobierno, instituciones públicas, financieras, universidades, etc, las cuales se aseguran que su contenido de gran interés o importancia pueda ser accedido para todo el público).

💭 3.2.3 Navegación coherente: Los mecanismos de navegación que se repiten en múltiples páginas web dentro de un conjunto de páginas web aparecen siempre en el mismo orden relativo cada vez que se repiten, a menos que el cambio sea provocado por el propio usuario. (Nivel AA)

W3C → WAI → WCAG → Principios (4) → Pautas (12) → Criterios de conformidad comprobables (3 niveles, 61 en total) → Técnicas (suficientes y recomendables)

Hago una sutil correccion.
El W3C no son los creadores de la WWW y CSS, sino quienes lo estandarizaron.

En Colombia a través del anexo 1 de la Resolución 1519 de 2020 se adoptan los criterios establecidos WCAG 2.1

Versión actual WCAG 2.1 publicada en su reciente versión el 5 de junio de 2018.

https://www.w3.org/TR/2018/REC-WCAG21-20180605/

Corto y potente! Como debe ser 😎
WCAG 2.0
WCAG 2.1

WCAG es un conjunto de pautas y buenas prácticas reunidas por expertos en accesibilidad para tratar qué significa “accesibilidad” de manera metódica. Varios países indican el uso de estas pautas en sus requisitos legales de accesibilidad web.

En pocas palabras, un rango de recomendaciones para crear contenido web más accesible.
.

Las WCAG se organizan sobre la base de cuatro principios a menudo llamados con la palabra POUR:

• Perceptible
• Manejable
• Comprensible
• Solido

.
Dentro de las WCAG tenemos 12 criterios, que a su vez se divide cada uno en 3 niveles que determinan el nivel de inversión que se hará en accesibilidad.

Nivel A (básico), Nivel AA (Intermedio) y Nivel AAA (Más alto).

.
Historia de WCAG

W3C - World Wide Web Consortium : Creadores de los estándares que usamos para construir la web. (HTML, CSS).

WAI - Web Accessibility Initiative : Iniciativa dentro de W3C cuya meta es asegurar la accesibilidad web.

WCAG=
(Pautas de accesibilidad de contenido web)
W3C= world wide web consortium (consorcio mundial de red)
WAI= Web accessibility initiative (Iniciativa de accesibilidad web)

• Principio 1: Perceptible - La información y los componentes de la interfaz de usuario deben ser presentados a los usuarios de modo que ellos puedan percibirlos.
• Principio 2: Operable - Los componentes de la interfaz de usuario y la navegación deben ser operables.
• Principio 3: Comprensible - La información y el manejo de la interfaz de usuario deben ser comprensibles.
• Principio 4: Robusto - El contenido debe ser suficientemente robusto como para ser interpretado de forma fiable por una amplia variedad de aplicaciones de usuario, incluyendo las ayudas técnicas.

Creo que podemos empezar con sus principios y luego indagar más en cada uno de ellos.

Creo que no se implementa mucho, empresas que trabajan con gobiernos aplicando estandares de accesibilidad web?, las paginas del gobierno ni siquiera cumplen con eurísticas básicas de usabilidad…

Mozilla Foundation también esta contribuyendo a la documentación de Accesibilidad!
https://developer.mozilla.org/es/docs/Web/Accesibilidad

Directrices de accesibilidad WCAG 2.1

• Alternativas de texto
• Contenido alternativo al audio o video
• Adaptable
• Distinguible
• Accesible mediante el teclado
• Tiempo suficiente para el uso
• No ataques (flash, parpadeos)
• Navegabilidad
• Diversas entradas de datos
• Legibilidad
• Predictibilidad
• Autocorrección o ayuda en la entrada de datos
• Compatibilidad
  Fuente 1
  Fuente 2

Las pautas de WCAG (Web content accessibility guidelines) 2.0 son perceptibles, operables , comprensibles y robustas.
.
Criterios de conformidad que deben ser aplicados a todas las paginas, como estándar principal.
.
Control del audio.
Sin trampas para el foco del teclado
Umbral de tres destellos o menos.
Poner en pausa, detener, ocultar.

Para ser honesto, no había pensado en éste tema. Hasta éste curso.

Como demandar a mis viejas universidades :u

wow increíble

WCAG = pautas de accesibilidad para el contenido web, creado por la W3C, al momento de grabación del video incluyo a hoy 2021, está en la versión 2.0

Niveles de implementación de accesibilidad

A = bajo
AA = intermedio
AAA = Alto

No creo que las universidades sean los sitios web mas accesibles, son todo lo contrario, si una persona normal casi no puede acceder ahora no me imagino a alguien con una discapacidad, y no solo las universidades tambien hay muchas paginas del gobierno o por lo menos asi es colombia, no se en otros paises como sea

como tal la w3c no creo css, fue mas bien creado por la comunidad, y ellos fueron los que establecieron esto como un estandar web, ya que como tal ese es su trabajo

Que bueno que existan estas pautas para quienes quieran desarrollar contenido accesible puedan saber que hacer

buena clase !!!