ARIA properties

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

<label class=“form-label” for=“name”>Nombre</label>
<input type=“text” aria-label=“nombre” id=“name” />

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: “aria-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

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

• 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 “Propiedades 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:

• ARIA states and properties

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 “aria-label” 😅 Qué interesante!

👌

gracias

nb