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

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

6/35
Recursos
Transcripción

Aportes 33

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Tecnologías asistivas:
Visuales
-Lectores de pantallas
-Extensiones que manipulan el CSS.
Motoras
-Varilla bucal
-Switch

Las tecnologías asistivas ayudan a las personas con alguna de sus capacidades mermadas, sean visuales, auditivas o motoras, a consumir la web de la misma forma que lo hacen los demás.
.
Un ejemplo muy simple y común de este tipo de tecnologías son los lentes 👓. Estos permiten que personas con defectos en la visión puedan percibir el mundo igual que los demás.
.
Tecnologías asistivas:
.

  • Visuales:
    • Lectores de pantalla.
    • Extensiones que manipulan el CSS.

.

  • Motoras:
    • Varilla bucal.
    • Switch

Quedó muy en claro los conceptos y mas leyendo el link de WCAG.

Platzinautas!

  • Lo correcto es: personas con capacidades diferentes
  • Esta equivocado:
    • “capacidades mermadas”
    • “no tienen las capacidades”
    • “no tienen capacidades perfectas”
    • “personas con discapacidad”
    • “anormalidades”

Sí tienen capacidades pero son diferentes porque tienen diferentes necesidades.

  • Esto me lo explicó mi amiga y presidenta del grupo de alumnos con capacidades diferentes de mi universidad UANL en Monterrey, México
    😃
  • Ayudan a las personas que no tienen las capacidades visuales o motoras perfectamente
  • Las tecnologías asistivas dan alternativas a las existentes para mejorar las habilidades de consumir el mundo que esta alrededor de nosotros
<h3>Visuales</h3>
  • Lecturas de pantalla → Son software que interpretan sitios que puedan leer en voz alta para personas que no puedan leer
  • Extensiones que manipulan CSS → Estas extensiones pueden manipular el sitio en colores, texto, cambios de estilos de sitio para ayudar a las personas decidir que les ayuda mejor para interpretar el sitio web
<h3>Motoras</h3>
  • Varilla bucal
  • Switch

El teclado es el puente que conecta el sitio web con un mundo de tecnologías asistivas, tenemos que tener en cuenta que lo estamos usando de la mejor manera

Las tecnologías asistivas se valen del uso de las ayudas técnicas para suplir o mitigar las desventajas de las personas con discapacidad.

  • Tecnología Asistivas nos dan alternativas a mejorar habilidades para usar ciertas cosas

Tecnologias Asistivas

  • Visuales
    • Lectores de pantalla
    • Extensiones que manipulan el CSS
  • Motoras ⇒ Escuchan el teclado
    • Varilla bucal
    • Switch

RESUMEN: Actualmente se tienen tecnologías asisitivas que ayudan a mejorar las habilidades para personas con discapacidades, existen las visuales como lectores de pantalla y también motoras. ****Debemos prestar mucha atención al teclado por que ayudan a contactarnos a personas con discapacidades motoras

Gracias por toda la información compartida y toda la consideración al resto de las personas con capacidades diferentes! Mísmo si son adultos o pequeños! Muchas gracias Juliana! Gracias Platzi!

Las tecnología asistivas se valen del uso de las ayudas técnicas para suplir o mitigar las desventajas de las personas con discapacidad, permitiéndoles su equiparación, en lo substancial, con el resto de miembros de la sociedad.

Tecnologías Asistivas:

  • Visuales: lectores de pantalla, permiten leer el texto y transmitirlo al usuario a través de audio.

  • Motoras: extensiones que manipulas el css, cambian estilos del sitio en función de mejorar la experiencia de un usuario. Por ejemplo, aumentar el tamaño de fuente, el modo oscuro, o la activación de subtítulos a un video.

Hablando el tamaño del texto, es importante resaltar el uso de rem como medida para el font-size en css, para mas detalles vean esta clase del profe degranda

Sobre tecnologias asistivas, en Colombia:

ConVerTIC es el proyecto de inclusión del Ministerio TIC creado desde el año 2013 con el fin de promover la inclusión social, educativa, laboral y cultural a través de uso de las tecnologías para las personas ciegas o con baja visión, mediante la entrega y masificación de los software Jaws y ZoomText.

Tecnología Asistivas - cuáles son y cómo funcionan en mis propias palabras:

  • Existe un sin número de opciones que nosotros como desarrolladores no conocemos pero que para aquellos que lo utilicen puede ser gran diferencia, juliana dio el ejemplo de un switch y como nosotros lo podemos llegar a manipular para darle una mejor experiencia al usuario.

Las tecnologías asistivas son económicas para la mayoría de gente? es decir ya vienen integradas?

Que increíble todo esto, Juliana transmite verdadera pasión por este tema, me encanta

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

 
Nos dan alternativas a las existentes para mejorar nuestras habilidades de consumir el mundo alrededor de nosotros. Ej: los lentes que usamos para ver mejor.
 
Para web:

  1. Habilidades visuales:
    • Lectores de pantalla: instaladas en máquinas para interpretar y leer en voz alta los sitios.
    • Extensiones que manipulan CSS: por ejemplo, para hacer los elementos más grandes.
  2. Motoras:
    • Varilla bucal: para los que no pueden usar las manos.
    • Switch: le da la opción de manejar un interruptor que prenda o apague
       

El teclado es el puente que conecta nuestro sitio web con las tecnologías asistivas.

Lo veo más hardware que pueden ayudar a las personas espero ver como se implementa en código está interesante

VOICE OVER
JAWS
ANDI
son algunas tecnologias que nos ayudarian en este tema

Tecnologías asistivas:

  • Lectores de pantalla
  • Extensiones que manipulan el CSS
    Motoras:
  • Varilla bucal
  • Switch
VoiceOver para apple TalkBack para Android ( se activa apretando por 3 segundos los dos botones de sonido (+,-)) NVDA (Lectores Desktop) JWS (Lectores Desktop)

todo quedo bastante claro!! nunca había pensado en esto, gracias platzi!

Como es el funcionamiento del switch como tecnologia asistiva?

tecnologías asistivas para la web:

  • Visuales: Como motores de pantalla, extensiones que manipules el css del sito
  • Motoras: varilla bucal, switch, funciona escuchando el teclado

Hay una extensión que te permite ver si tu sitio web cumple con accesibilidad.
Se llama ANDI, y te dice si tu sitio falla en accesibilidad (Y en dónde lo hace)
Puedes saber más acerca e instalarla aquí

¿El tipo de tecnología asistiva que utilizaba Stephen Hawking era del tipo Switch?

¿Alguien por acá ya realizó UX Testing de tecnologías asistivas?

Estoy amando mucho este curso! La profesora es una genia!

Creo que un gran ejemplo de esto sería el software de iOS. Tiene muchas maneras de mejorar la accesibilidad. Si alguien tiene un iPhone debería echarle un ojo, me parecen muy útiles.

la velocidad perfecta de el curso es de 1.25x

La apuesta siempre debe ser por crear contenido amplio para que todos los puedan usar, por eso este curso es tan importante!!

Dónde se puede consultar más sobre las tecnologías switch?

Ojo front con screen readers y css