Como usar aria-label para fines de enlace

Como usar aria-label para fines de enlaceEl objetivo de esta técnica es describir el propósito de un enlace utilizando el atributo aria-label. El atributo aria-label proporciona una forma de colocar una etiqueta de texto descriptivo en un objeto, como un enlace, cuando no hay elementos visibles en la página que describen el objeto. Si hay elementos descriptivos visibles en la página, se debe usar el atributo aria-labelledby en lugar de aria-label. Al proporcionar una etiqueta de texto descriptivo, el usuario puede distinguir el enlace de los enlaces en la página web que conducen a otros destinos y ayuda al usuario a determinar si debe seguir el enlace. En algunas tecnologías de asistencia, el valor de la etiqueta aria se mostrará en la lista de enlaces en lugar del texto del enlace real.

De acuerdo con la especificación WAI-ARIA y la Guía de implementación de las API de accesibilidad de HTML a plataforma, el texto con etiqueta de aria anulará el texto proporcionado dentro del enlace. Como tal, el texto suministrado se utilizará en lugar del texto de enlace de AT. Debido a esto, se recomienda iniciar el texto utilizado en aria-label con el texto utilizado en el enlace. Esto permitirá una comunicación consistente entre los usuarios.

Ejemplo


Describir el propósito de un enlace en HTML usando el elemento aria-label. En algunas situaciones, los diseñadores pueden optar por disminuir la apariencia visual de los enlaces en una página utilizando un enlace más corto y repetido, como "leer más". Estas situaciones proporcionan un buen caso de uso para aria-label, ya que el texto más simple y no descriptivo de "leer más" de la página se puede reemplazar por una etiqueta más descriptiva del enlace. Las palabras "leer más" se repiten en la etiqueta aria (que reemplaza el texto de anclaje original de "[Leer más ...]") para permitir una comunicación constante entre los usuarios.
<h4>Tutoriales En Linea</h4>
<p>Tutoriales En Linea es un portal web de tutoriales, cursos online y de aprendizaje que pretenden simular al maestro mostrando al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...
<a href="index.html" aria-label="Leer más...">[Leer más...]</a>
</p> 
<p> hagalo usted mismo, tutorias online.
<a href="index.html" aria-label="Leer más...">[Leer más...]</a>
</p>


<a onclick=Tutoriales En Linea" class='avatar avatar-64 photo' height='64' width='64'>
  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-07-15
  • Categorias: Diseño Web html5 WebSite webmasters Noticias Tutorial



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!