Dominar las bases de la accesibilidad
¿Listo para hacer la web un mejor lugar para todos sus usuarios?
Conociendo la importancia de la accesibilidad web
Aprendiendo sobre WCAG y sus criterios de conformidad
Profundizando los 12 criterios de conformidad
Los 4 principios de WCAG
Tecnología Asistivas - cuáles son y cómo funcionan
Presentar el proyecto
Instalación del proyecto y primeros pasos
Evaluar la accessibilidad de sitios web
Pruebas automáticas con Lighthouse
Pruebas con simuladores de discapacidades visuales
Pruebas manuales con tu teclado
Pruebas manuales con lectores de pantalla
Pruebas manuales con VoiceOver
Refactorizar HTML para ser mas accessible
¿Qué es el HTML semántico y por qué es importante?
Usando HTML semántico en el header de nuestro sitio
Usando HTML semántico en el contenido principal de nuestro sitio
Usando HTML semántico en footer de nuestro sitio
ARIA - Accessible Rich Internet Applications
ARIA roles
ARIA properties
ARIA states
Overview del proyecto con los retos resueltos
Utilizar CSS para aumentar la acessibilidad de un sitio web
Contrastes de color
Iconos
Skip Links
Estilos de foco y hover
Overview retos resueltos con CSS
Extender la accesibilidad usando JavaScript
Manejando el foco del teclado - botones
Manejando el foco del teclado - el carousel
Coordinando el foco del teclado con el foco de lectores de pantallas
Manejando modales
Mejorando la accesibilidad con teclado de nuestro modal
Ayudando a nuestros usuarios a interactuar correctamente con el sitio
Validando formularios
Manejando cambios dinámicos
Conclusión
Siguientes pasos
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Las WCAG (Web Content Accessibility Guidelines) son reconocidas mundialmente. Estas pautas han sido diseñadas por la World Wide Web Consortium (W3C), una organización influyente que establece estándares web, como HTML y CSS. Gracias a estas directrices, el contenido web se vuelve más accesible y comprensible para todos.
Tomemos un momento para ahondar, ¿por qué es tan crucial la accesibilidad web? Simplemente, porque permite a todas las personas, independientemente de sus capacidades o discapacidades, tener acceso y usar contenido web de manera efectiva. Esto no solo favorece la inclusión, sino que también amplía el alcance de quienes crean contenido en línea.
Las WCAG están diseñadas con un total de 12 criterios de conformidad, los cuales a su vez se dividen en tres niveles principales. Cada nivel ofrece un grado diferente de accesibilidad:
Nivel A: Considerado el nivel más básico. Emplear este nivel asegura una accesibilidad mínima, proporcionando un punto de partida para la inclusión.
Nivel AA: Es un término medio, bastante popular y requerido en muchas industrias. Este nivel ofrece medidas de accesibilidad que son suficientes para la mayoría de los casos de uso.
Nivel AAA: Este es el nivel más exigente y avanzado. A menudo, es adoptado por organizaciones que tienen un fuerte compromiso con la accesibilidad, como instituciones gubernamentales y educativas. Al implementar este nivel, se busca asegurar que el contenido sea accesible para el público más amplio posible.
Implementar estos niveles no solo mejora la experiencia del usuario, sino que también puede traer beneficios económicos y reputacionales. A medida que más usuarios pueden acceder y participar en el contenido, la fidelización y compromiso aumentan.
Si estás listo para integrar las pautas WCAG en tus proyectos, aquí tienes algunos consejos prácticos:
Empieza con lo básico: Familiarízate con el nivel A de conformidad. Comprender estas bases es crucial para avanzar de manera sólida hacia niveles más complejos.
Evalúa necesidades: Antes de saltar al nivel AA o AAA, evalúa las necesidades de tu audiencia. Considera si es necesario subir de nivel según el tipo de contenido que ofreces y quién es tu audiencia principal.
Utiliza herramientas de evaluación: Existen diversas herramientas en línea que pueden ayudarte a comprobar la conformidad de tu contenido web. Estas herramientas pueden señalar aspectos que requieren atención.
Educación continua: Las tecnologías web evolucionan constantemente, y las pautas de accesibilidad no son la excepción. Mantente al día con las actualizaciones de la WCAG para asegurarte de que tu contenido cumpla con las nuevas directrices.
La integración de estas pautas puede parecer una tarea ardua al principio, pero con el tiempo y la práctica, se convertirá en una parte natural de tu proceso de desarrollo web. █ Con cada paso hacia una web más accesible, estarás contribuyendo a disminuir la brecha digital y promoviendo un ambiente inclusivo para todos.
Aportes 36
Preguntas 0
**¿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
¡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/
Resumen - Pautas de Accesibilidad para el Contenido Web (WCAG) 2.0
Recomendación del W3C del 11 de diciembre de 2008
Niveles de accesibilidad (WCAG) 2.0:
Ideas/conceptos claves
WCAG son las Web Content Accessibility Guidelines o en español las pautas para el Contenido Web
Apuntes
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:
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:
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
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
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
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!
Creo que podemos empezar con sus principios y luego indagar más en cada uno de ellos.
En Colombia a través del anexo 1 de la Resolución 1519 de 2020 se adoptan los criterios establecidos WCAG 2.1
Hago una sutil correccion.
El W3C no son los creadores de la WWW y CSS, sino quienes lo estandarizaron.
W3C → WAI → WCAG → Principios (4) → Pautas (12) → Criterios de conformidad comprobables (3 niveles, 61 en total) → Técnicas (suficientes y recomendables)
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.
💭 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)
Versión actual WCAG 2.1 publicada en su reciente versión el 5 de junio de 2018.
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:
.
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)
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…
Directrices de accesibilidad WCAG 2.1
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 !!!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?