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

Conociendo la importancia de la accesibilidad web

2/35
Recursos
Transcripción

Aportes 40

Preguntas 2

Ordenar por:

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

La historia de Dominos que comenta Juliana

https://www.cnbc.com/2019/10/07/dominos-supreme-court.html

Accesibilidad Web: Es la práctica continua de asegurarnos que todo lo que creamos para la web se puede usar, interpretar y operar por una variedad de personas en una variedad de situaciones.

**a11y ** numerónimo de accesibilidad

¿Por qué accesibilidad?

  • Para incluir a personas en situaciones de discapacidad.
  • Para mejorar la usabilidad de nuestros proyectos.
  • Porque en algunos lugares es la ley.

Americans with Disabilities Act (ADA) became law in 1990.

Como desarrolladores es nuestra responsabilidad hacer que nuestras aplicaciones sean lo mas accesibles posible para la mayor cantidad de usuarios.

Al hablar de accesibilidad Web se está haciendo referencia a un diseño Web, que va a permitir que estas personas puedan percibir, entender, navegar e interactuar con la Web aportando contenidos. La accesibilidad Web también beneficia a otras personas, incluyendo adultos mayores que han visto mermadas sus capacidades a consecuencia de la edad.

La accesibilidad Web va a beneficiar a muchos tipos de discapacidades, incluyendo a personas con discapacidad visual, auditiva, física, cognitiva, neurológica y del habla.
Comparto una página incluyente, con los niveles más altos de accesiblidad de la CONAPRED en México:
http://www.conapred.org.mx/depositobv/CARPETA-WEB_ACCESIBLE.pdf

Ideas/conceptos claves

Accesibilidad web es la practica continua de que todo lo que creamos para la web se puede usar, interpretar y operar por una variedad de personas en una variedad de situaciones

a11y es el numerónimo de accesibilidad

Apuntes

<h3>¿Por qué accesibilidad?</h3>
  1. Para incluir a personas en situaciones de discapacidad
    • Es estimado que aproximadamente el 20% del mundo vive con alguna discapacidad
      • Mala vista
      • Mala comprensión de lo que un sitio hace
    • Se estima que la mayoría de las personas que implementan la accesibilidad web lo hacen por un llamado moral
  2. Para mejorar la usabilidad de nuestros proyectos
    • Cuando tienes un producto accesible, es un producto que la gente suele amar porque es muy personalizado, debido a que las personas pueden personalizarlo a sus gustos
  3. Porque en algunos lugares es ley
    • En EEUU existe una ley que menciona que, si tus usuarios están en el país, ellos tienen el derecho de que todos los productos, servicios o servicios que ellos desean participar sean accesibles
    • Hubo casos como ser el de Domino’s el cual fue denunciado por qué el sitio no era accesible y un ciudadano los llevo a las cortes por eso, siendo multados por ese motivo

RESUMEN: Es importante poder realizar un sitio web accesible debido a que podemos llegar a más personas, podemos crear un producto mejor por que sera personalizado a cualquier necesidad y también se pueden evitar problemas legales en algunos países

Me sentí excluído, primero dió la bienvenida a ellas y luego se refiere al resto de las personas como nosotras, por favor, un lenguaje más inclusivo para nosotros 😦 😦 😦 en diseño también hay hombres, no solo mujeres…

a11y - keyword para buscar en linea

Viene de accesibillity -> a11y

“productos personalizables a situaciones y preferencias”, WOW! Me encantaron los ejemplos del celular en modo vibración y el uso de modo oscuro… “La accesibilidad mejora la calidad de nuestro productos”

Qué es la accesibilidad web

  • Es la práctica continua de asegurarnos que todo lo que creamos para la web se puede usar, interpretar y operar por una variedad de personas en una variedad de situaciones
  • numerónimo de accesibilidad → a11y
<h3>Por qué accesibilidad</h3>
  • Incluir a personas en condiciones de discapacidad → 20% del mundo vive con alguna discapacidad: visión, operar la web con normalidad, entender un sitio. Web Aim → la mayoría de las personas que implementan la accesibilidad es por un concepto moral
  • Para mejorar la usabilidad de nuestro proyecto
  • Porque en algunos lugares es la ley → Ejemplo juicio Dominos’ Pizza. → Normas para la Web de algunos países

En Colombia el ICONTEC sacó la NTC5854 (Norma técnica Colombiana) la cual nos da 3 niveles de conformidad de usabilidad para páginas web (A, AA, AAA) que debemos cumplir.
Como mínimo las páginas web Colombianas deben estar en el nivel de conformidad A
Aquí les dejo el link de la NTC por si les interesa conocer un poco más de la norma.
https://www.mincit.gov.co/ministerio/ministerio-en-breve/docs/5854-1.aspx

Siento que ponen el video mas lento de lo que realmente es

La accesibilidad Web significa que personas con algún tipo de discapacidad van a poder hacer uso de la Web.

Tuve curiosidad de encontrar la ley en mi país 🇭🇳, y la más cercana a la accesabilidad web es Ley de Equidad y Desarrollo Integral para las personas con discapacidad, y además desconocía que hay un PLAN NACIONAL DE ACCESIBILIDAD UNIVERSAL 😬

cómo se conecta o diferencia la accesibilidad de la web con la UX o experencia de usuario?

Me gusta que se refiere siempre en femenino, espero que así las personas en contra del lenguaje inclusivo sientan un poco como se sienten las mujeres con el lenguaje cotidiano

A grandes rasgos, cuando decimos que un sitio es accesible, queremos decir que el contenido del sitio está disponible y, literalmente, cualquiera puede manejar su funcionalidad. Como programadores, es sencillo asumir que todos los usuarios pueden ver y usar un teclado, mouse o pantalla táctil, y pueden interactuar con el contenido de tu página de la misma forma que tú. Esto puede llevar a una experiencia que funciona bien para algunas personas, pero genera problemas que varían desde simples molestias hasta impedimentos para otras personas.
.

“El poder de la web está en su universalidad. El acceso de todos, independientemente de la discapacidad, es un aspecto esencial”. - Tim Berners-Lee

.
Les comparto un par de links que me fueron de mucha ayuda:

No tenia idea que te podían demandar por eso. Esto si se me quedo grabado en la mente.

Tendras un link a la mano de que paises tienen esas leyes y donde consultarlas?

¡Esperaba este curso!¡Súper chevere!

Sin duda lo como desarrollador lo moral hoy en dia enriquece mucho, todos tenemos el mismo derecho de experimentar la tecnología

La accesibilidad te puede ahorrar mucho dinero y mejorar el alcance de tus productos!

La accesibilidad es directamente una mejora a la UX
Te beneficia y beneficia a todos los que usen tus productos!

En definitiva la accesibilidad web es algo que debemos implementar en cada proyecto que realicemos para que podamos llegar a la mayor cantidad de personas posibles. Excelente tema!

La accesibilidad web es inclusión y sinónimo de calidad en los productos digitales. Es verdaderamente importante !

Tambien otro datos por el que deberiamos darle accesiblidad a nuestro sitio web es por que

You are not yout users

Eso es una gran verdad,pero sobre todo es por que segun OMS hay un %15 de personas que tienen algún tipo de discapacidad en el mundo

IMPORTANCIA DE LA ACCESIBILIDAD WEB

Accesibilidad web es la práctica continua de asegurarnos que lo que creamos para la web se puede usar, interpretar y operar por una variedad de personas en una variedad de situaciones.

¿ Por qué accesibilidad?

  • Para incluir a personas en situaciones de discapacidad
  • Para mejorar la usabilidad de nuestros proyectos
  • Porque en algunos lugares es ley

Pueden saber más información al respecto sobre A11Y en el siguiente enlace:

A11Y Project: https://www.a11yproject.com/

Libro sobre Accesibilidad Web: (Accesibilidad web. WCAG 2.1): https://www.usableyaccesible.com/archivos/Accesibilidad_Web_WCAG_21 ARIA_21_12_2020.pdf

Creo que es importante que los y las responsables de programar contenidos accesibles, puedan incorporar en -la conducta humana- (no se como explicarlo de otra forma) otras herramientas de lenguaje creativo. Por ej, ¿por què no practicar lengua de señas con una persona sorda? ¿Por què no experimentar la comida con los ojos cerrados? . Creo que la accesibilidad es una invitación para aprender a con-vivir en diversidad.

Muy interesante este tema. Dentro del UX conecta con la programación

desconocía la importancia del tema, gran curso para aprender esto tan importante

Waauu interesante clase. Normalmente creemos que todo es código pero empiezo a ver la importancia de la accesibilidad. No sabía que por esto podían demandar a una empresa 😮

Si señores, yo vengo porque en la agencia para la que trabajo le pidieron accesibilidad web para una página del gobierno, así que espero poder aportar estos conocimientos para mi trabajo

Si el proyecto es accesible, es amado porque es personalizado.

que opinan de la pagina de amazon, si es accesible?

No sabia de la importancia del tema y ahora creo que es verdaderamente importante, sobre todo me gusta la idea de que todos y todas podamos tener acceso al internet

👌

Algunos datos sobre las personas con discapacidad
Panorama general

Alrededor del 10% de la población mundial, o sea 650 millones de personas, vive con una discapacidad.Constituyen la mayor minoría del mundo.
Esta cifra está aumentando debido al crecimiento de la población, los avances de la medicina y el proceso de envejecimiento, dice la Organización Mundial de la Salud (OMS).

En resumen:
.
¿Por qué es importante la accesibilidad?:
.
Cerca del 20% del mundo tiene alguna discapacidad que le impide utilizar la web con la misma facilidad que nosotros. Wait, what???
.
Eso es muchísima gente,mucha más que el total de personas que viven en Colombia, Ecuador, Perú y Venezuela. ¿Quieres excluir a ese gentío?, una pregunta más comercial: ¿Quieres perder ese pocotón de usuarios?
.
Las razones morales son importantes, somos privilegiados pero es nuestro deber pensar en los que no lo son tanto. Pero ojito con esta otra motivación: Un producto accesible es un producto amado.
.
Dos ejemplos rapiditos de como la accesibilidad resultó ser buena para todos:
.

  • La vibración de tu celular fue pensada para la gente que no podía escucharlo.
    .
  • El dark mode con el cual no podemos vivir los programadores (¿cómo que se puede programar con un tema claro?), fue pensado para las personas que no leían muy bien en un tema claro.

.
Is the law: Importante recordar también que la accesibilidad es ley en algunos lugares (as it should be). Piensa en eso cuando crees un producto que pueda ser usado en lugares como EEUU.
.
Dominoes fue multado por no pensar en la accesibilidad, y todos recordamos el famoso caso de McDonalds donde un consumidor los demandó porque las tazas de café no decían que estaba caliente (ganó la demanda).