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 properties

19/35
Recursos

Aportes 23

Preguntas 2

Ordenar por:

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

o inicia sesi贸n.

Existe un atributo importante para los label que es el atributo for, Funciona del la siguiente manera:

<label class=鈥渇orm-label鈥 for=鈥渘ame鈥>Nombre</label>
<input type=鈥渢ext鈥 aria-label=鈥渘ombre鈥 id=鈥渘ame鈥 />

Esto lo que hace es unir el label con el componente input por medio de su id, y su finalidad es direccionar al usuario al input al dar click en el label.

https://www.w3schools.com/tags/att_label_for.asp

Propiedades de ARIA: Comunican atributos que son esenciales para el comportamiento o significado de un elemento pero que suelen comunicar visualmente.

Atributo: 鈥渁ria-label鈥

  • Las propiedades ARIA la vamos a usar m谩s seguido

Qu茅 son

Comunican atributos que son esenciales para el comportamiento o significado de un elemento pero que se suelen comunicar visualmente

  • Agregar significado a nuestro contenido visual

ARIA label

  • Podemos usar para agregar un string para describir un elemento de nuestro c贸digo
  • Aria Ejemplo:
<form class="form-container">
        Nombre<input type="text" aria-label="nombre"/> <br />
        Correo<input type="text" aria-label="correo"/> <br />
        <div class="message-input">Mensaje<input type="text" /> <br /></div>
        <button class="send-button">Enviar</button>
      </form>

Buscando documentaci贸n, veo que hay un mont贸n de properties y states!
Es un tema muy amplio, y hay muy poca info en espa帽ol

<h4>Ideas/conceptos claves</h4>

ARIA properties le comunican atributos que son esenciales para el comportamiento o significado de un elemento pero que se suelen comunicar visualmente.

<h4>Apuntes</h4>
  • Normalmente se ven patrones de dise帽o que se toma por sentados comunicados visuales
    • Iconos
    • Interacciones 鈬 Input de un formulario
  • Esto puede ser com煤n para una persona que cuenta con todos los beneficios f铆sicos y materiales, pero para una persona con discapacidades no es tan obvio
<div class="carousel">
  <div class="arrow arrow-left" aria-label="backward button"></div>
  <div class="window">
    <ul class="project-container">
			...
    </ul>
  </div>
  <div class="arrow arrow-right" aria-label="fordward button"></div>
</div>

RESUMEN: Aria label properties nos ayuda a especificar atributos de que es, para cosas de son m谩s que todo visuales como ser iconos o inputs, se puede notar estos atributos a trav茅s de lectores de pantalla

0:03 鈥淧ropiedades Arias鈥. Declaraci贸n peligrosa XD

aria-label => Podemos dejar mensajes informativos accesibles para lectores de pantalla.

Que pasa con la etiqueta <label>?

Donde estaba el Nombre fuera de las etiquetas input Ubiese sido mejor usar una etiqueta label y de esa forma lo podia hacer mucho mas semantico.

Esto aplica para iconos de fontawesome que se colocan en la etiqueta <i>?

Excelente, una herramienta fundamental para no dejar a nadie sin acceso a tu informacion.

Ahora s茅 que utilidad tiene el atributo aria-label

Algunos recursos complementarios:

Conceptos a aprender:

Forward: hacia delante
Backward: hacia atr谩s

es importante que este en el idioma del usuario, por que no todos los usuarios de lector de pantalla saben ingles

PROPIEDADES ARIA:
Comunican atributos que son esenciales para el comportamiento o significado de un elemento pero que se suelen comunicar visualmente.
ARIA-LABEL

Muy interesante

As铆 hice mi parte del reto

 <form class="form-container">
        Nombre<input type="text" aria-label="Nombre" /> <br />
        Correo<input type="text" aria-label="Correo"/> <br />
        <div class="message-input">Mensaje<input type="text" aria-label="Escribe un mensaje"/> <br /></div>
        <button class="send-button" aria-label="Enviar formulario">Enviar</button>
      </form>```

Encontr茅 este canal enfocado a la Accesibilidad.
https://www.youtube.com/channel/UCa5D8O8-1p5UriHTJYXiTig

He observado mediante el inspector de c贸digo y los cursos de Platzi disponen del atributo 鈥渁ria-label鈥 馃槄 Qu茅 interesante!

馃憣

gracias

nb