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

Coordinando el foco del teclado con el foco de lectores de pantallas

29/35
Recursos

Aportes 15

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

Me tard茅 mucho pero pude crear un carrusel 100% accesible y reutilizable para react con typescript, estoy aplicando todos estos nuevos conceptos en un proyecto de un blog, por si gustan checarlo: https://blog.brandonargel.me

鈱笍 Manejando el foco del teclado

<h4>Ideas/conceptos claves</h4>

Tab index 鈬 indica si su elemento puede ser enfocado y si participa en la navegaci贸n secuencial del teclado

<h4>Recursos</h4>

Uso de tabindex | Web | Google Developers

<h4>Apuntes</h4> <h3>Botones</h3>
  • Hoy en d铆a se necesita usar JS para las interacciones de usuario
  • Puedes usar JS para manejar estas interacciones
  • La etiqueta Button se debe usar siempre y cuando habr谩 una interacci贸n
<h3>Carousel</h3>
  • Valores de tab index
    • Valor negativo (-1) 鈬 El elemento debe ser enfocado, pero no debe de ser accesible a trav茅s de la navegaci贸n
    • Valor positivo (>0) 鈬 debe poder ser enfocado y su orden relativo es definido por el valor del atributo
    • Valor de 0 鈬 El elemento debe ser enfocado y ser accesible a trav茅s de la navegaci贸n secuencial del teclado, pero su orden relativo es definido por convenci贸n de la plataforma
  • Valores de aria hidden para los elementos que est谩n ocultos

RESUMEN: Se puede dar a los websites con interacciones m谩s accesibilidad manipulando los atributos conocidos anteriormente para mejorar la accesibilidad mediante el JS

setAttribute: Agrega un nuevo atributo.
remoteAttribute: Elimina un atributo

Hola, tengo una duda:
L铆nea 27 y 33 el estado de aria-hidden: true, est谩 primero sin comillas, y luego entre. Afecta el c贸digo o es irrelevante?

Gracias, profesora, qued贸 muy completo.

驴para webs hechas en wordpress?
como aplicamos, existe plugins recomendados?

Yo estoy m谩s asustado pero cada vez mejor mucho que aprender gracias Juliana

Recuerdo un amigo, o alguien que conoc铆 de Nicaragua que, una vez le expuse una idea de negocios tipo marketing, estaba tan emocionado que le sali贸 un 鈥淢an, me est谩s dando miedo鈥

En esa l铆nea puedo decir lo mismo sobre la profe Juliana sin ni siquiera llegar al final del curso: 鈥淢e est谩 dando miedo鈥 por su magistral claridad, le estoy aprendiendo y comprendiendo m谩s que a casi ning煤n otro profesor, aunque no se trate de comparar. Este curso tiene el plus que necesitaba para robustecer mis proyectos鈥

duro es complicado pero hay vamos, me falta mucho

Nota: Los elementos de referencia HTML (<main>, <header>, <nav> etc.) tienen roles ARIA impl铆citos, por lo que no es necesario duplicarlos.

馃挌JS

Muy buena explicaci贸n.

Muy bueno!

Qued贸 perfecto el slider

Bastante genial aprender cada vez m谩s piezas que puedan ayudar a que todas las personas puedan interactuar con nuestra web.