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

No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Curso de Accesibilidad Web

Curso de Accesibilidad Web

Juliana Gómez

Juliana Gómez

ARIA roles

18/35
Recursos

Aportes 14

Preguntas 3

Ordenar por:

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

Roles de ARIA: Define el tipo general del objeto ( como un artículo, una alerta o un deslizador)

Los roles le comunican al navegadores cuales son las interacciones que debería esperar y cómo se va a usar este objeto en nuestro proyecto. Se usan en situaciones muy especificas, es mejor depender del HTML semántico para comunicar los roles.

Entonces, hay que usar los roles solamente cuando el HTML sem√°ntico se nos queda corto para dar accesibilidad a lo que tenemos.

<h4>Apuntes</h4>
  • Definen el tipo general del objeto (como un art√≠culo, una alerta o deslizador)
  • Los roles comunican al navegador cuales son las interacciones que deber√≠a esperar y como se va usar este objeto dentro de la p√°gina o aplicaci√≥n
  • Se usan en ocasiones especiales es mejor usar HTML sem√°ntico para no meterse en agregar roles a todos los elementos
  • Es una especificaci√≥n dif√≠cil de usar y se debe saber muy bien c√≥mo usar
  • Especifican de c√≥mo se navega en esa secci√≥n
  • Los navegadores, en especial los lectores de pantalla navegan diferentes roles en diferentes estilos
  • Ejemplo ‚áí
    • Articulo ‚áí Poca Interacci√≥n
    • Formulario ‚áí Mucha Interacci√≥n

RESUMEN: Los ARIA roles preparan al navegador o lectores de pantalla a indicar cuales son las interacciones que debería esperar, se usan en ocasiones especiales, en la mayoría de los casos se recomienda usar HTML semántico

Un buen ejemplo de cu√°ndo utilizar los ARIA roles es con los emojis ūüöÄ que deben de quedar as√≠:

<span role="img" aria-label="emoji de cohete">ūüöÄ</span>

Los roles de ARIA definen el tipo general del objeto.
.
Sólo se usan en situaciones muy específicas, siempre es mejor depender de HTML semántico para especificar los roles y no agregar roles a todos los elementos ya que esta especificación es compleja de utilizar.

  • Los roles definen el tipo general del objeto (como un art√≠culo, una alerta o un deslizador)
  • Comunican al navegador cuales son las interacciones que se debe esperar y como se va a usar este objeto dentro de nuestra p√°gina o aplicaci√≥n
  • Se usan en situaciones muy espec√≠ficas
  • Es una especificaci√≥n muy dif√≠cil de usar
  • Los navegadores y especialmente los lectores de pantalla navegan diferentes roles en diferentes estilos

Friendly suggestion: hubiera sido interesante ver un ejemplo concreto en pr√°ctica ūüėÉ saludos

En qu√© casos hay que tenerlos en cuenta para usarlos?¬ŅAAA?

El atributo role define el tipo general del objeto (como un artículo, una alerta o un deslizador).

Los roles se usarían más en aplicaciones complejas no? Como herramientas de G Suite

Los roles definen el tipo general del objeto (como un artículo, una alerta o un deslizador). Le comunican al navegador cuáles son las interacciones que debería esperar y cómo se va a usar el objeto dentro de nuestra página o aplicación. Solo se usan en situaciones muy específicas y difíciles de usar. Es mejor usar HTML semántico.

No me qued√≥ muy claro. ūüėĄ

n