Dominar las bases de la accesibilidad

1

¬ŅListo para hacer la web un mejor lugar para todos sus usuarios?

2

Conociendo la importancia de la accesibilidad web

3

Aprendiendo sobre WCAG y sus criterios de conformidad

4

Profundizando los 12 criterios de conformidad

5

Los 4 principios de WCAG

6

Tecnología Asistivas - cuáles son y cómo funcionan

Presentar el proyecto

7

Instalación del proyecto y primeros pasos

Evaluar la accessibilidad de sitios web

8

Pruebas autom√°ticas con Lighthouse

9

Pruebas con simuladores de discapacidades visuales

10

Pruebas manuales con tu teclado

11

Pruebas manuales con lectores de pantalla

12

Pruebas manuales con VoiceOver

Refactorizar HTML para ser mas accessible

13

Usando HTML sem√°ntico en el header de nuestro sitio

14

¬ŅQu√© es el HTML sem√°ntico y por qu√© es importante?

15

Usando HTML sem√°ntico en el contenido principal de nuestro sitio

16

Usando HTML sem√°ntico en footer de nuestro sitio

17

ARIA - Accessible Rich Internet Applications

18

ARIA roles

19

ARIA properties

20

ARIA states

21

Overview del proyecto con los retos resueltos

Utilizar CSS para aumentar la acessibilidad de un sitio web

22

Contrastes de color

23

Iconos

24

Skip Links

25

Estilos de foco y hover

26

Overview retos resueltos con CSS

Extender la accesibilidad usando JavaScript

27

Manejando el foco del teclado - botones

28

Manejando el foco del teclado - el carousel

29

Coordinando el foco del teclado con el foco de lectores de pantallas

30

Manejando modales

31

Mejorando la accesibilidad con teclado de nuestro modal

32

Ayudando a nuestros usuarios a interactuar correctamente con el sitio

33

Validando formularios

34

Manejando cambios din√°micos

Conclusión

35

Siguientes pasos

Curso de Accesibilidad Web

Curso de Accesibilidad Web

Juliana Gómez

Juliana Gómez

Profundizando los 12 criterios de conformidad

4/35

Lectura

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!

http://www.sidar.org/traducciones/wcag20/es/

Aportes 35

Preguntas 0

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

Hola, 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.

¬ŅPor qu√© casi no se habla de accesibilidad en las escuelas? Creo que debe ser super fundamental desarrollar tecnolog√≠a 100% accesible

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.

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.

¬Ņ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?

Ac√° solamente se habla del primer nivel de accesibilidad! ūü§Į

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.

No he entendido el punto 2.2

con respecto a la 3.1 cuan tipos de fuentes podemos asignar a la web?

platzi simpre salvandome los amo!!!

A caray, ahora sí a programar con ética

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

estos cuatro criterios corresponden apenas al primer nivel de WCAG, verdad?

En la guia rapida se describe cada criterio de comformidad y se presentan diferentes tecnicas para cumplirlos. Muy util!

Estoy empezando mi carrera como frontend y todo esto me parece buenísimo. Quiero que mis proyectos sean accesibles para todos.

A gran parte de las administradoras tributarias en LatAm pareciera que no les importa.

Lo que mas me llamo la atencion, fue lo de consulta rapida, ojala mas paginas lo imprementaran

Hola! Saludos desde Costa Rica. Me llamó mucho la atención el curso porque actualmente estoy probando la accesibilidad de una aplicación para Mac en la cual estoy basándome en muchas de las cosas que se mencionan en WCAG a pesar de que no se trata de un sitio web.
Me sirvió de mucho evaluar la accesibilidad con el teclado, que la secuencia de las cosas tenga sentido y sea fácil de comprender, que si hay colores, el uso de los mismos no sea un problema para personas con daltonismo, etc
Me pas√≥ que hab√≠a un indicador de estado con colores, verde ‚ÄúOK‚ÄĚ y rojo ‚ÄúFAIL‚ÄĚ pero no ten√≠a ninguna indicaci√≥n alternativa como un texto para evitar confusion en personas dalt√≥nicas.

Estoy muy satisfecho con la lectura, ahora tengo mas o menos una mejor idea de como contruir mis productos web.

Para mí es sorprendente el contraste que hay en la manera en que los proyectos de tecnología priorizan la accesibilidad, algunos no le dan tanta importancia, pero otros por ejemplo dentro de las universidades, lo ponen en el centro de todo.

Es información muy valiosa, te amamos!

¬°Incre√≠ble! S√≥lo ten√≠a en cuenta la 1.1 y s√≥lo desde mi privilegio ūüėĒ pues dec√≠a ‚Äúpong√°mosle informaci√≥n al atributo alt por si el usuario tiene problemas con la conexi√≥n y no carga la imagen‚ÄĚ pero ¬ŅY las personas que tengan problemas visuales y requieran de alg√ļn lector para poder navegar? Todos los d√≠as se puede aprender a ser mejor ciudadano de la web ūüíö.

Se toma a la ligera , pero el que sea robusto es muy importante

Muy bueno!

La 3.3. me pareci√≥ muy novedosa y √ļtil.

Me sorprende estos principios. Muy interesante el curso.

Es interesante como la accesibilidad pasa a tener una adaptaci√≥n muy √ļtil a todo tipo de personas y no solo a las personas con diversidad funcional. Por ejemplo, explicar lo que aparece en la pantalla para personas ciegas, es funcional incluso para captar la atenci√≥n de las personas que pueden ver.

Siento que debia conocer esto antes!

Solo conocía la parte de Alternativas, y creía que eso era todo, excelente y mucho por aprender

Es vital dise√Īar y desarrollar productos accesibles!!

Hace un a√Īo vengo aplicando revisiones de accesibiilidad a multiples aplicaciones de una empresa gubernamental y es increible las falencias que se encuentran; pero lo importante es que al momento de recibir el feedback y las sugerencias de mejora lo toman con mucha calma y disposici√≥n para mejorar sus productos.

ūüĎĆ

Esto está muy alineado con la usabilidad de los sitios web, algunos principios se repiten aquí como criterios.

Hay empresas que no te piden accesibilidad en sus paginas. ?