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

驴Qu茅 es el HTML sem谩ntico y por qu茅 es importante?

14

Usando HTML sem谩ntico en el header de nuestro sitio

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

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
2H
45M
11S

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.

...

Reg铆strate o inicia sesi贸n para leer el resto del contenido.

Aportes 37

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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.

驴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! 馃く

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.

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.

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

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

A caray, ahora s铆 a programar con 茅tica

platzi simpre salvandome los amo!!!

No he entendido el punto 2.2

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

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.

La Accesibilidad en la web deber铆a implementarse por ley en todos los pa铆ses del mundo, ya que 茅sta es verdadera inclusividad de todos los sectores de la poblaci贸n, que por largo tiempo usualmente son los m谩s relegados, marginados o poco tomados en cuenta en los aspectos tecnol贸gicos.

Estas pautas deber铆amos adoptarlas paulatinamente (pues es muy abrumador todo lo que implica) y hacerlas parte de esencial de nuestro ciclo de creaci贸n de contenido y desarrollo de software.

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 鈥淥K鈥 y rojo 鈥淔AIL鈥 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 鈥減ong谩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. ?