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

A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Curso de Accesibilidad Web

Curso de Accesibilidad Web

Juliana Gómez

Juliana Gómez

Pruebas manuales con tu teclado

10/35
Recursos

Aportes 19

Preguntas 1

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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 ‚ÄúTab‚ÄĚ avanzamos y con la combinaci√≥n ‚ÄúShift + Tab‚ÄĚ retrocedemos.
No sabía cómo retroceder jajajaj

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.

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

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.

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

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.

-ūüĎĆ

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

Esta demasiado bueno e importante conocer sobre accesibilidad

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

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

yo les llamo elementos focuseables (focusables in english)…una 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…

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