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

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Pruebas manuales con tu teclado

10/35
Recursos

Aportes 22

Preguntas 3

Ordenar por:

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

o inicia sesi贸n.

El teclado es muy importante en la accesibilidad web porque las tecnolog铆as asistivas tienden a conectarse con el teclado para darle a sus usuarios diferentes maneras de navegar cuando no tienen acceso a un mouse o un teclado como nosotros.

Los elementos que reciben foco de teclado son elementos interacctivos:

  • Enlaces: nos llevan a otra p谩gina, son para la navegaci贸n.
  • Botones: nos ayudan a interactuar con la p谩gina de alguna manera.
  • Formularios: requieren nuestra interacci贸n para llenar nuestros datos.

Los div no reciben foco porque son un elemento presentacional, no esperan ninguna interacci贸n a menos de que t煤 lo programes.

OOOH con shift+tab se vuelve, no sab铆a, yo daba toda la vuelta a la p谩gina con tab si me pasaba

Vaya!! Me encanta m谩s el curso porque, me demuestra lo ognorante que soy en 茅ste tema.

Lo m谩s impresionante fue: Con la tecla 鈥淭ab鈥 avanzamos y con la combinaci贸n 鈥淪hift + Tab鈥 retrocedemos.
No sab铆a c贸mo retroceder jajajaj

De lejos este es el curso que m谩s me ha tocado, tener la posibilidad de reproducir las discapacidades visuales de alguien m谩s a trav茅s de estas herramientas me hace dar cuenta de lo dif铆cil que puede ser para ciertas personas el acceder a servicios que usamos a diario.

En donde trabajo tienen este concepto muy sostenido, ya que trabajamos para sistemas contables, hemos visto que los contadores casi no usan el mouse en los formularios para moverse entre los inputs, siempre utilizan el tab, ayudandolos a agiliazar sus registros.

Asi que nos piden que asignemos el tabindex manualmente para que pueda seguir una secuencia y el sistema no realize un salto no esperado de tabs que confunda al usuario.

La accesibilidad del teclado es uno de los aspectos m谩s importantes de la accesibilidad web. Muchos usuarios con discapacidades motrices dependen de un teclado. Algunos tienen temblores que no permiten un control muscular fino. Otros tienen poco o ning煤n uso de las manos, o no tienen manos en absoluto. Adem谩s de los teclados tradicionales, algunos usuarios pueden utilizar teclados modificados u otro hardware que imita la funcionalidad de un teclado. Los usuarios ciegos tambi茅n suelen utilizar un teclado para navegar. Los usuarios sin discapacidades pueden utilizar un teclado para la navegaci贸n por preferencia o eficiencia.

.

.

Muy bonita clase, me ha ayudado a entender mejor lo necesario de la accesibilidad.

yo les llamo elementos focuseables (focusables in english)鈥na forma de permitir a un elemento no focuseable que pueda recibir el foco es agreg谩ndole un tabindex=0鈥 esto se hace mucho para cuando uno quiere que se le pueda seleccionar usando un screen reader y que se lea鈥

Todos estos problemas se solucionan con un buen HTML sem谩ntico.

Ahora veo mucho la importancia de accesibilidad. Muy buen curso hasta el momento.

Las etiquetas Input y a si cuentan con focus del teclado.

El teclado es una herramienta 煤til para manejar las tecnolog铆as asistivas y as铆 permitir el desplazamiento por la pantalla para personas con discapacidades visuales o para personas que no cuentan con un mouse.
.
Es importante destacar que no todos los elementos de un sitio web pueden recibir foco con el teclado, s贸lo aquellos que son interactivos (formularios, links, botones, chatboxes, etc.) son los 煤nicos que s铆 pueden ser manipulados por medio del teclado. Generalmente las fotos, im谩genes y textos no reciben foco, a menos que sean interactivos, es decir, que lleven al usuario a otra parte del sitio o generen una acci贸n.
.
En el tecado asistivo, nos movemos hacia adelante con la tecla Tab y hacia atr谩s con la tecla Shift.

Y no solo hablando en terminos de accesibilidad resulta importante pensar en que toda la web sea manejable con el teclado, sino que tambi茅n hablando en terminos de usabilidad para los usuarios que no tienen discapacidades puesto que es mucho f谩cil y agil usar solo el teclado para navegar que hacerlo en combinaci贸n con el mouse. Tal vez no aplique para todos las paginas y / o secciones, pero lo mejor es que las paginas puedan ser 100% manejadas solo con el teclado.
.
Ahora me pregunto 驴Lo unico que se puede hacer con el teclado es usar el tab y shit tab? 驴O hay otras combinaciones para navegar a trav茅s de la pagina? S茅 que con Ctrl + Tab se cambia de pesta帽a. Pero, escribiendo este comentario me doy cuenta鈥 驴C贸mo puedo enviarlo usando solo el teclado?
.
Si pulso tab, me genera un espacio y no me hace foco en el boton de enviar

Aprendi algo mas pa que sirve el tab y su componentes con resultados buenisimo gracias Juliana en todo los curso que he ingresado siempre hay algo que aprender

Ya quiero aprender como poder hacer focus en divs y cosas como esas. Eso estar铆a realmente cool

-馃憣

Esta demasiado bueno e importante conocer sobre accesibilidad

Solamente los hiperv铆nculos y elementos de formularios permiten hacerle focus?

Por defecto las siguientes etiquetas tienen focus del navegador.

<a>
<Link>
<button>
<select>
<textarea>
<input>
<iframe>

  • El teclado es muy importante para la accesibilidad web
  • Las tecnolog铆as asistivas tienden conectarse con el teclado para darle a los usuarios diferentes maneras de navegar
  • Foco de teclado 鈫 no todos los elementos de la p谩gina reciben un foco. Los elementos que reciben foco del teclado son interactivos, c贸mo qu茅 son enlaces, botones, elementos de formularios
    • Tipo de pruebas que podemos hacer con el teclado teniendo en cuenta cuales son los elementos que se enfocan con el teclado 鈫 elementos interactivos

Ojala esto se convierta en un standart en toda la industria 鉂わ笍

Input si reciben foco del teclado