Contenido del curso
Pautas de Accesibilidad Web: Principios y Criterios WCAG
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
2. 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
3. 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
4. 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!
Carlos Pacheco Uribe
Estudiante
Gineth Melissa Dcosta Bernate
Estudiante
Walter Omar Barrios Vazquez
Estudiante
Efraín Hernández García
Estudiante
Juan Ignacio Arcidiacono
Estudiante
Andrés Ricaño
Estudiante
Felipe Bernardo González Barranco
Estudiante
Juan Christopher
Estudiante
Christian David Sánchez
EstudianteFelipe Bernardo González Barranco
Estudiante
Juan Esteban Galvis
Estudiante
Alder Ugalde
Estudiante
Maria Angelica Romero Carrasco
Estudiante
Sergio Estrella
Profesor
Eliseo Ávila
EstudianteFelipe Bernardo González Barranco
Estudiante
Iván Toro
Estudiante
Karen Paola Torres Archbold
Estudiante
Karla
Estudiante
Juliana Gomez
Profesor
Christian Cruz Palacios
Estudiante
Jhon Alexander Alvarez Romero
Estudiante
Daniel Esteban Santos Mendez
Estudiante
jorge llanque
Estudiante
Jorge Cruz Perez
Estudiante
Fernando Espiritu
Estudiante
bruno guerra solano
Estudiante
carlos pineda
Estudiante
ADRIANA GABRIELA RODRIGUEZ SANABRIA
Estudiante
Jesús Mur Fontanals
Estudiante
Daniel Simon
Estudiante
Juan Pablo Calao Pérez
Estudiante
Jansenio Gonzales Venegas
Estudiante
Israel Castro
Estudiante
Platzi Team
Estudiante
Guillermo Ruben Linares Martinez
EstudianteHola, saludos a todos desde Puerto Ordaz Venezuela. Tenía interés en saber si un curso en Platzi era accesible con un lector de pantalla y estas 48 horas me dieron esa oportunidad. Ingresé al curso de Git y GitHub y está muy bueno, tiene bastante contenido y Freddy lo hace muy bien a mi parecer porque es muy descriptivo, cosas como que dice lo que escribe, es excelente pues no sé si conciente o no, el complementa el lector de pantalla. Soy ciego y para los que no saben lo que es un lector de pantalla, es el software que me permite usar la computadora. Ahora bien si hablamos de accesibilidad web y partiendo del artículo de arriba puedo presentar un pequeño ejemplo de evaluación de accesibilidad web de esta misma página que es donde se presentan los videos y el resto del material de enseñanza: El principio 2- Operable - falla porque no facilita moverse o navegar a través de la página con facilidad con el teclado, los botones del reproductor de video o por lo menos el de play/pause carece de teclas de acceso directo o hotkeys, ya que estas me evitan tabular entre varios botones, algunos sin etiquetar, hasta ubicar el botón de pausa o el progressbar que también es muy usado para ir adelante o atrás en el video. Si estoy al principio de la página y quiero ir a la sección de comentarios o ver la información complementaria escrita por el profesor, tengo que moverme de arriba a abajo por la página hasta llegar a la sección deseada, pudiendo estar organizada en cabeceras o headers ya que con el lector de pantalla con una tecla brincaría a cada una de estas secciones.
Al entrar ya en las pautas se pueden especificar mejor las fallas, por ejemplo, hay recursos que son solo imagenes y no tienen ninguna alternativa textual.
Cuando programaba y veía no tenía idea de lo necesario que era tomar en cuenta estas pautas al momento de hacer una aplicación web o de escritorio, pero ahora entiendo que hay millones de personas que con alguna discapacidad podrían tener acceso independiente a la información en la web si estas están bien contruidas tomando en cuenta la accesibilidad. Así que colegas que bueno que han tomado este curso, aprendan bien y apliquenlo a sus próximos proyectos, que hay muchos que se lo van a agradecer.
Para la Profe: Navegador: Google Chrome. Lector de pantalla: NVDA 2020.3 Puede que el sitio se comporte mejor con Jaws en su versión 2019 o superior y navegando con Firefox.
Aún me faltaron navegar por otras páginas como la de examen o evaluación, recursos por mencionar algunas que recuerdo, pero en general con algo de paciencia se puede hacer los cursos. No pude terminar el curso de Git, espero volver en algún momento, cuando reuna algunos dolaritos, hay varios cursos interesantes
Gracias Platzi, Dios les bendiga. Carlos Pacheco Uribe, seguidor de Jesucristo e Ingeniero en Informática.
Wao! Gracias Carlos por compartir tu experiencia :)
Gracias colega por darnos tu perspectiva y aporte. ¡Saludos!
¿Por qué casi no se habla de accesibilidad en las escuelas? Creo que debe ser super fundamental desarrollar tecnología 100% accesible
Exactamente. Esta es la inclusión que tanto me gusta que se fomente!
Profundizando los 12 criterios de conformidad en mis propias palabras:
Las Pautas de Accesibilidad para el Contenido Web 2.0 definen cómo crear contenido web más accesible para las personas con discapacidad.
A - nivel básico AA - nivel intermedio AAA - nivel avanzado (gobiernos, universidades o servicios esenciales.)
++Principios básicos de conformidad WCAG:++
Perceptible: todo el contenido importante se pueda interpretar de distintas maneras y como es que nosotros desarrolladores estamos proporcionando esas alternativas
Operable: Qué tan sencillo es nuestro sitio de usar usar y navegar, haciendo uso de diferentes maneras (mouse y/o teclado)
Comprensible: Cómo hacemos nosotros para que nuestra páginas web aparezcan y opere de manera predecible para cualquier tipo de usuario (UX).
Robusto: Cómo nosotros desarrolladores podemos maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las tecnologías asistivas como punto clave para nuestro desarrollo.
Buen resumen!!!
Gran aporte.
En total hay 25 criterios (Link: https://bit.ly/2HpXG1w)
Contenido no textual Todo contenido no textual que se presenta al usuario tiene una alternativa textual que cumple el mismo propósito, excepto en las situaciones enumeradas a continuación.
Sólo audio y sólo vídeo (grabado) Para contenido sólo audio grabado y contenido sólo vídeo grabado, se cumple lo siguiente, excepto cuando el audio o el vídeo es un contenido multimedia alternativo al texto y está claramente identificado como tal: Sólo audio grabado: Se proporciona una alternativa para los medios tempodependientes que presenta información equivalente para el contenido sólo audio grabado. Sólo vídeo grabado: Se proporciona una alternativa para los medios tempodependientes o se proporciona una pista sonora que presenta información equivalente al contenido del medio de sólo vídeo grabado.
Gracias!!
¿Cómo se podría cumplir este principio? 4.1 Maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las tecnologías asistivas
Entiendo que la página debe ser compatible con los navegadores actuales por ejemplo, pero cómo sería respecto a aplicaciones futuras?
Yo lo entiendo como una actualización constante, conforme surgen nuevas tecnologías. Actualizarlo conforme avanzan los desarrollos en general.
Si, que tenga la posibilidad de vincularse con otros productos. Por ejemplo cuando nos registramos, ahora encontramos la posibilidad de hacerlo con la cuenta de Google sin la necesidad de llenar un formulario cada vez que tenemos la necesidad de registrarnos a un servicio
Acá solamente se habla del primer nivel de accesibilidad! 🤯
:clap::clap::clap::clap:
En la guia rapida se describe cada criterio de comformidad y se presentan diferentes tecnicas para cumplirlos. Muy util!
De verdad uno piensa que los problemas de accesibilidad no te van a tocar, pero hoy en día este termino se utiliza para todo, desde como se construyen los edificios, hasta como se organiza tu página web.
Estoy empezando mi carrera como frontend y todo esto me parece buenísimo. Quiero que mis proyectos sean accesibles para todos.
Me alegra mucho leerlo! Me cuentas si tienes preguntas :)
estos cuatro criterios corresponden apenas al primer nivel de WCAG, verdad?
Correcto
Los criterios no son los que estan dentro de los 4 principios? Y el nivel depende de como lo apliques (que tan detallista seas), eso entendí yo.
A caray, ahora sí a programar con ética
Mas que etica es con un pensamiento mas amplio considerando que nuestros usuarios no únicamente son digamos con unas cuantas características únicas, sino multidiversos, y el hecho de consideras esos aspecto no te hace no ético, si no desconsiderado si sabes al respecto y y poco profesional si no lo sabe uno, es mi opinión :)
platzi simpre salvandome los amo!!!
leyendo todo esto prefiero ser backend
principios de 2025 ¿cules siguien vigentes, cupales sean modificados?
Resumen: Criterios de Conformidad WCAG 2.0
Perceptible
Operable
Comprensible
Robusto
No he entendido el punto 2.2
Los time out: Son los tiempos de espera del servidor pueden ocurrir cuando se usa un navegador web para ver un sitio, conectarse a un servicio en línea con un juego o ejecutar una actualización de programa, entre otras situaciones.
Esto es, por ejemplo, cuando hay un contenido que se muestra por una cantidad de tiempo específica (un modal con temporizador, por ejemplo) debería tener el temporizador, y una opción de solicitar más tiempo para seguir viendo ese contenido. También es común verlo en los portales de los bancos, que tienen un tiempo límite de inactividad, pasado el cual se cierra la sesión
con respecto a la 3.1 cuan tipos de fuentes podemos asignar a la web?
Se recomienda no mas de 2 tipos.
Wuo, una pagina no es solo echar codigo y ya, tambien se debe de pensar en todos los tipos de usuario que pueden interactuar y como podemos facilitarle esto, Genial
A gran parte de las administradoras tributarias en LatAm pareciera que no les importa.
