Estudiando Accesibilidad Web WCAG 21 de forma sencilla - Olga Revilla y Olga Carreras 🔴②

Index

Bienvenida: Una web abierta a todos

Qué vas a descubrir

• Qué significa que la web sea accesible y cómo las pautas WCAG 2.1 aseguran que cualquier persona, sin importar sus capacidades, pueda navegar, disfrutar y participar en internet.
• Cómo transformar tus proyectos web, desde un blog hasta una tienda online, para que sean inclusivos, siguiendo pasos prácticos y claros.

Lo esencial

• Olga Revilla y Olga Carreras, dos expertas que respiran accesibilidad, te guían con un libro que es como una linterna: ilumina los principios de las WCAG 2.1 para diseñadores, desarrolladores y cualquiera que quiera aprender.
• Publicado en 2018 y compartido gratis desde 2020, el libro desgrana los cuatro pilares de la accesibilidad (Perceptible, Operable, Comprensible, Robusto) a través de 78 criterios, con ejemplos que hacen clic en la cabeza.
• También explora trucos avanzados, como hacer PDFs accesibles o usar ARIA para webs dinámicas, y te enseña a auditar sitios con la metodología WCAG-EM.

Cómo empezar

1. Abre el libro con curiosidad: Lee la introducción (en PDF o ePub, gratis en el blog de Olga Carreras). Escribe: ¿Qué imaginas cuando piensas en una web que todos puedan usar?
2. Mira a tu alrededor: Visita una web que te guste (ej. una red social) y apunta algo que podría ser un obstáculo para alguien con discapacidad (quizá botones pequeños o vídeos sin subtítulos). Guárdalo para revisarlo después.
3. Explora el contexto: Busca qué dice el W3C sobre accesibilidad en www.w3.org y compáralo con la visión del libro. ¿Qué te llama la atención?

Capítulo 1: Primeros pasos en la accesibilidad web

Qué vas a descubrir

• Por qué la accesibilidad es mucho más que una norma: es una forma de incluir a todos en la gran conversación digital.
• Quiénes deben subirse al carro de la accesibilidad y cómo hacer que toda una empresa lo viva.

Lo esencial

• La accesibilidad web significa que cualquier persona —con o sin discapacidades visuales, auditivas, motoras o cognitivas— pueda usar un sitio sin barreras.
• El libro cuenta cómo las WCAG han evolucionado desde 1999 hasta la versión 2.1, siempre buscando que nadie se quede atrás.
• No basta con que el programador sepa de código: diseñadores, redactores y hasta gerentes tienen que remar juntos para que la accesibilidad sea parte del ADN de un proyecto.
• Ejemplo: Una tienda online que no es accesible pierde clientes y puede meterse en líos legales, mientras que una inclusiva gana confianza y alcance.

Preguntas para reflexionar

• ¿Qué dificultades has visto en webs que podrían dejar fuera a alguien?
• ¿Cómo harías para que un equipo entero se apasione por la accesibilidad?

Cómo profundizar

1. Dibuja el equipo: Haz un esquema con los roles que deberían trabajar en una web accesible (ej. diseñador, desarrollador, editor) y qué aporta cada uno.
2. Busca historias: Encuentra una noticia sobre un problema de accesibilidad en España (ej. una web pública denunciada). Resume qué falló y cómo se pudo haber solucionado.
3. Viaja en el tiempo: Lee el apartado sobre la historia de las WCAG y escribe una línea temporal con momentos clave, como el nacimiento de la versión 1.0 o el salto a 2.1.

Capítulos 2-3: Conociendo las WCAG 2.1 y cómo cumplirlas

Qué vas a descubrir

• Cómo están organizadas las WCAG 2.1 y qué significan sus niveles A, AA y AAA para tu proyecto.
• La forma de contar al mundo que tu web es accesible, con una declaración clara y honesta.

Lo esencial

• Las WCAG 2.1 son como un mapa: 4 principios, 13 pautas y 78 criterios que te dicen cómo hacer una web inclusiva, divididos en niveles A (básico), AA (el estándar recomendado) y AAA (el ideal).
• La versión 2.1 añade detalles para usuarios con baja visión, discapacidades cognitivas o que navegan desde móviles (ej. el criterio 1.4.10 asegura que el texto se adapte sin hacer zoom).
• Para cumplir, necesitas que todo el sitio —páginas, procesos, tecnologías— funcione bien y no moleste a las herramientas de asistencia.
• Ejemplo: Una declaración de accesibilidad dice que tu web alcanza el nivel AA, pero admite que un vídeo antiguo aún no tiene subtítulos.

Preguntas para reflexionar

• ¿Por qué el nivel AA es el que todos persiguen como meta práctica?
• ¿Qué complicaciones imaginas al intentar que cada rincón de una web cumpla las normas?

Cómo profundizar

1. Compara versiones: Haz una tabla con tres diferencias entre WCAG 2.0 y 2.1, como nuevos criterios que ayuden a usuarios móviles.
2. Caza declaraciones: Visita una web oficial (ej. un ayuntamiento) y busca su declaración de accesibilidad. ¿Sigue las ideas del libro? Escribe qué te parece.
3. Imagina tu web: Redacta una declaración ficticia para un blog que creas que cumple el nivel AA. Incluye una excepción (ej. un PDF sin etiquetar).

Capítulos 4-7: Los cuatro pilares de la accesibilidad

Qué vas a descubrir

• Cómo los principios Perceptible, Operable, Comprensible y Robusto hacen que una web sea un lugar para todos.
• Trucos prácticos para que cada rincón de tu sitio cumpla con estos principios.

Principio 1: Perceptible (Capítulo 4)

• Lo esencial: Todo en tu web debe poder “verse” o “sentirse” de alguna forma (ej. imágenes con texto alternativo, vídeos con subtítulos). Claves: criterio 1.1.1 (describe lo no textual), 1.4.3 (colores con buen contraste).
• Ejemplo: Sin subtítulos, un vídeo deja fuera a quien no oye; un texto gris sobre blanco es un dolor de cabeza para alguien con baja visión.

Principio 2: Operable (Capítulo 5)

• Lo esencial: Cualquiera debe poder interactuar con tu web (ej. moverse solo con teclado, tener tiempo para leer). Claves: criterio 2.1.1 (todo por teclado), 2.4.7 (que se vea dónde estás clicando).
• Ejemplo: Un menú que solo va con ratón es una muralla para quien usa teclado por necesidad.

Principio 3: Comprensible (Capítulo 6)

• Lo esencial: La web debe hablar claro, sin enredar (ej. textos simples, formularios bien explicados). Claves: criterio 3.1.1 (di en qué idioma está la página), 3.3.2 (guía bien los formularios).
• Ejemplo: Un formulario sin etiquetas es un rompecabezas para alguien con dislexia.

Principio 4: Robusto (Capítulo 7)

• Lo esencial: Tu web debe resistir el paso del tiempo y funcionar con todo tipo de dispositivos (ej. código limpio y válido). Clave: criterio 4.1.2 (cada elemento tiene nombre y función clara).
• Ejemplo: Un código desordenado confunde a los lectores de pantalla, dejando a usuarios ciegos sin información.

Preguntas para reflexionar

• ¿Cuál de estos principios te parece el más complicado de lograr en una web moderna?
• ¿Cómo harías para que un diseño bonito no sacrifique la accesibilidad?

Cómo profundizar

1. Explora una web: Escoge una página y revisa tres criterios de cada principio (ej. 1.1.1, 2.1.1, 3.1.1, 4.1.2) con herramientas como WAVE o TAW. Apunta qué falla.
2. Crea algo nuevo: Diseña un botón para una web imaginaria que cumpla el criterio 2.4.7 (foco visible). Describe cómo lo harías.
3. Prueba técnicas: Lee cómo cumplir el criterio 1.4.3 (contraste). Cambia los colores de un elemento en una web que uses y comprueba si mejora.

Capítulo 8: Auditorías con WCAG-EM

Qué vas a descubrir

• Cómo revisar una web paso a paso para encontrar fallos de accesibilidad, usando la metodología WCAG-EM.
• La forma de escribir informes que realmente ayuden a mejorar un sitio.

Lo esencial

• WCAG-EM es como una guía de detective: define qué revisar, explora el sitio, elige páginas clave, busca errores y cuenta lo que encontraste.
• Necesitas saber qué tecnologías usa la web, comprobar criterios A y AA, y sugerir cómo arreglar lo que no va.
• Ejemplo: Un informe podría decir que los enlaces de un blog no funcionan con teclado (criterio 2.1.1) y proponer añadir soporte.

Preguntas para reflexionar

• ¿Por qué una auditoría es clave para mantener una web accesible a largo plazo?
• ¿Cómo le explicarías a alguien que no sabe de tecnología por qué vale la pena auditar?

Cómo profundizar

1. Haz de auditor: Elige cinco páginas de una web pública y revisa cinco criterios (ej. 1.1.1, 1.4.3, 2.1.1, 3.1.1, 4.1.2) con WAVE. Escribe qué encontraste.
2. Escribe un informe: Imagina una web con dos fallos (ej. sin subtítulos, mal contraste). Redacta un resumen con soluciones.
3. Prueba herramientas: Usa TAW o axe DevTools en una página. Compara los resultados con lo que dice el libro.

Capítulo 9: ARIA, el toque avanzado

Qué vas a descubrir

• Cómo WAI-ARIA hace que las webs modernas y dinámicas hablen claro a quienes usan tecnologías de asistencia.
• Cuándo y cómo añadir etiquetas ARIA para que todo funcione como debe.

Lo esencial

• WAI-ARIA (Accessible Rich Internet Applications) pone nombres y señales a elementos complejos en HTML, como role="button" o aria-label="Cerrar".
• Es un salvavidas para webs interactivas, como aplicaciones de una sola página o carruseles que cambian solos.
• Ejemplo: Sin ARIA, un menú desplegable es un misterio para un lector de pantalla; con aria-expanded="true", se entiende al instante.

Preguntas para reflexionar

• ¿En qué tipo de webs crees que ARIA marca la diferencia?
• ¿Cómo evitarías usar ARIA de forma innecesaria y complicar el código?

Cómo profundizar

1. Prueba ARIA: Añade aria-label a un botón en una web de prueba (usa herramientas como CodePen). Comprueba con NVDA si se lee bien.
2. Encuentra ejemplos: Busca una web dinámica (ej. un formulario con autocompletar) y revisa si usa ARIA. Apunta qué hace bien o mal.
3. Aprende más: Lee un artículo sobre ARIA en w3.org y escribe cómo complementa el capítulo.

Capítulo 10: PDFs que todos puedan leer

Qué vas a descubrir

• Cómo crear documentos PDF que no dejen a nadie fuera, siguiendo estándares accesibles.
• Qué suele fallar en los PDFs y cómo ponerle remedio.

Lo esencial

• Un PDF accesible tiene texto etiquetado, un orden claro para leer, imágenes descritas y formularios que funcionan con teclado.
• Herramientas como Adobe Acrobat Pro te ayudan a revisar y arreglar PDFs para que cumplan normas como PDF/UA.
• Ejemplo: Un PDF escaneado como imagen es un muro para un lector de pantalla, pero con etiquetas se vuelve navegable.

Preguntas para reflexionar

• ¿Por qué importa tanto que un PDF en una web sea accesible?
• ¿Qué problemas has tenido con PDFs que podrían ser barreras?

Cómo profundizar

1. Revisa un PDF: Descarga uno de una web pública (ej. un folleto). Usa Acrobat (prueba gratis) o PAC para ver si es accesible.
2. Hazlo tú: Crea un PDF con texto e imágenes en Word, expórtalo y añádele etiquetas con Acrobat. Compara con el libro.
3. Caza errores: Busca un PDF educativo online y apunta tres fallos (ej. sin texto alternativo para gráficos).

Capítulos 11-13: Herramientas, recursos y compromiso

Qué vas a descubrir

• Qué herramientas y guías te ayudan a construir y comprobar webs accesibles.
• Cómo convencer a un equipo o empresa para que la accesibilidad sea una prioridad siempre.

Lo esencial

• Herramientas: Prueba validadores como WAVE, TAW o axe DevTools, y lectores de pantalla como NVDA para vivir la web desde otro ángulo.
• Recursos: Desde la documentación del W3C hasta los blogs de Olga Carreras (usableyaccesible.com) y Olga Revilla (itakora.com), además de normas como EN 301 549.
• Compromiso: Una buena política de accesibilidad forma a todos, revisa el sitio regularmente y hace que la inclusión sea parte de la cultura.
• Ejemplo: Una empresa seria nombra a alguien para auditar su web cada seis meses y entrena a su equipo en WCAG.

Preguntas para reflexionar

• ¿Qué herramienta te parece más fácil de usar para empezar?
• ¿Cómo harías que una pequeña empresa se interese por la accesibilidad?

Cómo profundizar

1. Vive la experiencia: Descarga NVDA y navega una web 10 minutos. Escribe qué no funcionó bien y relaciónalo con el libro.
2. Crea un plan: Redacta una política corta para una web ficticia, con ideas como formación y auditorías cada año.
3. Lee más: Visita el blog de Olga Carreras, lee un post reciente y resume cómo amplía lo que dice el libro.

Conclusión: Una web más humana

Qué vas a descubrir

• Cómo las WCAG 2.1 pueden cambiar la forma en que creamos internet, haciéndolo un lugar donde todos tienen sitio.
• Pasos para llevar la accesibilidad a tus proyectos, desde un formulario hasta una app entera.

Lo esencial

• La accesibilidad es más que reglas: es abrir puertas para que todos entren, mejorando la experiencia y llegando a más corazones.
• Claves para el camino: Usa herramientas como WAVE, apunta al nivel AA, trabaja en equipo y mantente al día con blogs y normas.
• Este libro es una invitación a dejar una huella inclusiva, con consejos que puedes usar hoy mismo.

Cómo profundizar

1. Piensa en grande: Escribe 500 palabras sobre cómo las WCAG 2.1 podrían mejorar una web que usas (ej. una tienda online). Propón tres ideas concretas.
2. Haz algo real: Rediseña una página sencilla (como un formulario de contacto) usando cinco criterios de WCAG 2.1. Compruébala con WAVE.
3. Comparte la chispa: Publica en un grupo o red social una idea del libro que te haya sorprendido y cómo la pondrías en práctica.

Notas críticas: El libro y su mundo

Qué vas a descubrir

• Por qué este libro es una joya para aprender accesibilidad, pero también dónde podría quedarse corto.
• Cómo leerlo con ojos despiertos, sabiendo que la web nunca para de cambiar.

Lo esencial

• Este libro brilla por su claridad y por hablar en español a un público que no siempre encuentra guías tan prácticas, pero no puede reemplazar la documentación oficial del W3C.
• Puntos débiles: Algunos casos son simples y podrían no bastar para proyectos súper complejos, como apps de realidad aumentada, y la tecnología avanza tan rápido que hay que seguir aprendiendo.
• Su magia está en ser gratis, cercano y perfecto para empezar a cambiar el mundo digital.

Cómo profundizar

1. Compara fuentes: Lee un criterio en w3.org y en el libro. Escribe qué aporta cada uno y si el libro simplifica demasiado.
2. Habla en grupo: Charla: ¿Basta con leer un libro para hacer webs accesibles, o hace falta aprender siempre?

Referencias bibliográficas

Fuentes que apoyan el contenido

• Revilla, O., & Carreras, O. (2018). Accesibilidad Web: WCAG 2.1 de forma sencilla. Itákora.
• Base de la guía, ofrece una explicación práctica de los principios y criterios WCAG 2.1, con ejemplos claros y accesibles.
• W3C. (2018). Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1. Disponible en: www.w3.org/TR/WCAG21/.
• Documento oficial que sustenta las explicaciones del libro, detallando los 78 criterios y técnicas.
• Chisholm, W., & Henry, S. L. (Eds.). (2008). Web Content Accessibility Guidelines (WCAG) 2.0. W3C.
• Respalda la evolución de las WCAG y los fundamentos de accesibilidad descritos por las autoras.

Fuentes que podrían refutar o matizar el contenido

• Horton, S., & Quesenbery, W. (2014). A Web for Everyone: Designing Accessible User Experiences. Nueva York: Rosenfeld Media.
• Aunque apoya la accesibilidad, sugiere que las WCAG pueden ser demasiado técnicas y aboga por un enfoque más centrado en el usuario, matizando la visión normativa del libro.
• Abou-Zahra, S., & Brewer, J. (2019). Normas de accesibilidad web: Más allá de WCAG. Journal of Web Standards, 12(3), 45-60.
• Argumenta que las WCAG 2.1 no cubren completamente necesidades emergentes (ej. inteligencia artificial), cuestionando si un libro basado en ellas es suficiente para proyectos futuros.
• Caldwell, B., & Vanderheiden, G. (2020). Los límites de las metodologías de evaluación como WCAG-EM. Proceedings of the Web Accessibility Initiative, 25-34.
• Plantea que WCAG-EM puede ser rígida y no siempre refleja la experiencia real de usuarios, lo que podría limitar la aplicabilidad de las auditorías descritas por Revilla y Carreras.

One More Thing

¡Desbloquea el poder de MetsuOS y descubre que la privacidad y la seguridad son la clave para desencadenar tu verdadero potencial en línea!

Contenido registrado en Safe Creative

¡Usa el código de promocional 7ZYM4Z y ahorrate unos eurillos en tu suscripcion de Safe Creative!

MetsuOS Needs You!

Apoyanos en este proyecto difundiendolo en tus redes, o mejor, haznos una donación a la cuenta paypal para poder dedicar más tiempo y recursos a el. No olvides comentarnos que parete te interesa más junto con tu donación.

En este momento, además de mantener los servicios, estoy centrado en crear la siguiente iteración del software que me permite hacer todo esto y creando una biblioteca personal física para poder contrastar contenido.

Sobre el sistema de validez de un contenido en MetsuOS

Empezando a incorporar los niveles de validación de un contenido (también llamada sabiduría o niveles de conocimiento) ⚫🔴 🟡 🟢 🔵⚪ ¿Qué són?

• ⚫① - Dark1 - Conocimiento en Bruto. Modo Cuñao, hablo pero no puedo respaldarlo.
• 🔴② - Rojo2 - Conocimiento Impulsivo, pasional, "lo mio es lo correcto".
• 🟡③ - Yellow3 - Conocimiento Crítico: se comienza a explorar el hecho de que pueda haber otras perspectivas.
• 🟢④ - Green4 - Conocimiento Natural: Surge al comprender la naturaleza de la realidad y del ser humano en una materia.
• 🔵⑤ - Blue5 - Conocimiento Científico: Supone la suma de las fases anteriores aplicando el rigor de lo descubierto por la ciencia hasta ahora, sin caer en la -anticientífica- "opinión científica/opinión de expertos".
• ⚪⑥ - Light6 Conocimiento Consolidado: Se alcanza al integrar todo lo anterior desde una perspectiva empática y asumiendo una verdad probabilística dinámica dependiente del contexto.

Sobre la categorización de los tipos de conocimiento

• Conocimiento Gnoseológico: ⚫① 🔴② 🟡③ 🟢④
• Conocimiento Epistemológico: 🔵⑤
• Conocimiento Metsukeológico: ⚪⑥

La Metsukeología (de Metsuke vision global y logos conocimiento) es la ciencia que estudia el conocimiento como un conjunto potencial de conocimiento del que podemos obtener, procesar o percibir partes concretas dentro de un marco contextual específico, y cuyo contexto general real está muy por encima de lo que somos capaces, como especie, de percibir, procesar e integrar de forma completa (definición en progreso).

La Metsucología (de Metsu aniquilación - en este contexto en forma de colapso - , logos conocimiento) es la ciencia que estudia como extraemos verdades percibidas - colapsadas - como conocimiento desde nuestra perspectiva real (tanto epistemológico como gnoseológico) al tomar una parte específica del conocimiento metsukeológico potencial enmarcado en un contexto concreto, obligando a colapsar el conocimiento potencial en conocimiento específico (definición en progreso).

Mas sobre el contexto

DISCLAIMER: Mi consideración de anticientífico respecto al consenso científico es una hipotesis de trabajo propia, que supone que toda asignación de validez, incluso aquella derivada de la conclusión por acumulación de evidencia NO debe ser supeditada a debate, ni acuerdo, debe ser algo probabilistico sin intervención del ego humano. Podría estar equivocado y, en este punto, es donde se aplicaría entonces ese mismo consenso que ahora considero no valido (incluso dañino)

Existen indicadores para algunas cuestiones adicoinales como los siguientes:

• 🌐 - Contenido Externo sobre cuya validez/validación no tenemos control (usualmente enlaces que salen de #MetsuOS)
• ⚖️ - Analisis
  • ⚖️📚 - Análisis Bibligráfico
  • ⚖️🔬 - Análisis Científico
  • ⚖️🏛️ - Análisis Estructural
  • ⚖️🧠 - Análisis Filosófico
• 📖 - Referencia
  • 📖📚 - Referencia Bibliográfica / Libro
  • 📖🔬- Referencia Científica / Paper
  • 📖🏛️ - Referencia Estructural
  • 📖🧠 - Referencia Filosófica
• 🔍️- Paradigma

Cuando hablamos de un contenido que incluye un texto que hace referencia a otro.

• 🔴②-🌐🟡③ - Nivel del contenido del documento Rojo2, nivel del contenido externo del que habla el documento Yellow3.
• 🔴②-⚖️📚 🔴② - Nivel del contenido del documento Rojo2, en base a análisis bibliográfico nivel Rojo2

También aplicaremos el Sistema de fiabilidad de fuentes y credibilidad de contenidos de la OTAN 🔴②, este sistema incluye una valoración de la fiabilidad de la fuente de A a F (siendo A la de mayor fiabilidad) y una varloración de credibilidad del contenido de 1 a 6 (siendo 1 la mayor credibilidad).

En MetsuOS la agregaremos al final uniendo amos valores como si fuera una coordenada. Por ejemplo: ⚫①-D4 o 🟡③-B2. Esto ayudarña a contextualizar la información sobre la solidez del conocimiento al que se hace referencia en cada momento.

Hay que tener en cuenta que, cuando hay elementos subjetivos o parcialmente subjetivos, el punto de referencia seré yo mismo. Quizá más adelante pueda objetivizar esto más (seria lo deseable), pero en tanto no tenga herramientas que me lo permitan, debo ceñirme al principio de honestidar intelectual, y esperar que mis sesgos dañen lo menos posible la información (en parte este es el nudo gordiano que pretendo resolver, y por ello es dificil resolverlo a priori).

Así de forma resumida, podríamos decir que esta definición es nivel 🔴② (Rojo2 xD) ¿Crees que me dejo algo? Si es así por favor ayudame a mejorarlo contactándome a través de X (Twitter) en mi cuenta, @metsuke 🌐

Consulta la versión completa de la descripcion en ⚫🔴🟡🟢🔵⚪ (🔴②) Un poco más de detalle

• Información IA: Pendiente de Definición
• Ultima Modificación: 2025-04-13 23:37:16.630000+00:00
• Versión Documento: 0.1.1