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

Conociendo la importancia de la accesibilidad web

2/35
Recursos
Transcripci贸n

Aportes 44

Preguntas 3

Ordenar por:

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

o inicia sesi贸n.

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鈥檚 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鈥

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

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鈥 鈥淟a accesibilidad mejora la calidad de nuestro 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 !

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

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

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

隆Esperaba este curso!隆S煤per chevere!

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?

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

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 accesibilidada11y
<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

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?

Hey, no lo hab铆a visto de esa forma.
La accesibilidad no solo est谩 para permitir que m谩s personas usen la tecnologia, sino que en ese mismo proceso mejora los productos para todos

En El Salvador la ley que manda a cumplir la accesibilidad web es: Norma T茅cnica Salvadore帽a: 35.105.01:20. Tecnolog铆a de la Informaci贸n. Accesibilidad. Comunicaciones. Requisitos para Contenidos en la Web.

Las principales razones de importancia de la Accesibilidad Web:
.

  • Para incluir a personas en situaciones de discapacidad en el uso y manejo de sitios web
  • Para mejorar la usabilidad de nuestros proyectos web
  • Porque en algunos pa铆ses es la ley: En Estados Unidos, la Americans with Disabilities Act (ADA) entr贸 en vigor como ley desde 1990, y se ha ido aplicando en el 谩mbito de la Web. En Latinoam茅rica, el 55% de pa铆ses tienen una norma o gu铆a espec铆fica para la Accesibilidad Web; el resto de pa铆ses (45%) tienen leyes relacionadas con las personas con discapacidades diversas.
  • Por un llamado 茅tico-moral, es decir, se percibe como lo correcto

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

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

鈥淓l 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:

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

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).