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

ARIA roles

18/35
Recursos

Define el tipo general del objeto ( como un art铆culo, una alerta o un deslizador)

Los roles le comunican al navegador cu谩les son las interacciones que deber铆a esperar y c贸mo se va a usar este objeto en nuestro proyecto. Se utilizan en situaciones muy espec铆ficas, es mejor depender del HTML sem谩ntico para comunicar los roles.

Contribuci贸n creada con aportes de: Karla

Aportes 17

Preguntas 3

Ordenar por:

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

o inicia sesi贸n.

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>

Friendly suggestion: hubiera sido interesante ver un ejemplo concreto en pr谩ctica 馃槂 saludos

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

Recursos complementarios:

Sirven para agregar informaci贸n que interpretan los lectores de pantalla a los elementos de una pagina pero la recomendacion sigue siendo usar HTML semantico
.

  • Vienen ya predeterminados, debe escoger entre los que hay
  • No cambian el comportamiento del elemento, pero si cambian el arbol de accesibilidad
  • Hay restricciones en los atributos role que se aplican a algunos elementos
  • Le comunican al navegador como ser谩 la interacci贸n de tal elemento
  • No hay que usarlos mucho solo en situaciones muy especificas (驴Cu谩les? excelente pregunta) Usalos en esas situaciones donde el HTML semantico no es suficiente para describir un elemento, por ejemplo, los popup

Hey pero necesitamos ejemplos de esto

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