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 “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. ?