Atributo alt o título para la etiqueta i

Utilizo font-awesome y muestro sus fuentes así:

<i class="icon-lock"></i>

Esto mostrará un bonito símbolo de candado. Para que el usuario supiera qué significa eso exactamente, intenté agregar atributos como título y alt, pero fue en vano.

¿Hay algún atributo que pueda usar para la <i>etiqueta que ejecute la misma tarea que alt para imágenes y título para enlaces?

Puede usar el titleatributo en un ielemento, como cualquier elemento, por ejemplo

<i class="icon-lock" title="This symbolizes your being locked inside"></i>

Si ayuda es un tema más difícil. Los navegadores suelen mostrar el titlevalor del atributo como una "información sobre herramientas" al pasar el mouse por encima, pero ¿por qué el usuario pasa el mouse sobre el ícono? Y tales descripciones emergentes son de poca usabilidad; la información sobre herramientas CSS suele funcionar mejor.

Los lectores de pantalla pueden dar al usuario acceso opcional a los titleatributos, pero no estoy seguro de qué hacen con los elementos con contenido vacío.

Con el avance de WAI-ARIA , al usar íconos de fuentes, probablemente debería usar una combinación de los siguientes para mejorar la accesibilidad:

• La presentación de roles para eliminar la semántica de roles nativa implícita del elemento. Esto es especialmente importante si (ab) usa un elemento con una semántica nativa para proporcionar íconos, como este es el caso en su ejemplo usando el elemento i (que, de acuerdo con las especificaciones, "representa un tramo de texto en una voz alternativa o estado de ánimo [...] " ).
• Una etiqueta de aria para proporcionar un valor de cadena que etiqueta el elemento -o- un atributo de título HTML nativo si está de acuerdo con que el navegador muestre una información sobre herramientas cuando se desplaza.
• Un atributo oculto por aria para ocultar el contenido generado de las tecnologías de asistencia (ya que está utilizando una familia de fuentes de iconos, hay un carácter generado: antes de: después). Según las especificaciones:

Los autores PUEDEN, con precaución, usar aria-hidden para ocultar contenido visualmente renderizado de las tecnologías de asistencia solo si el acto de ocultar este contenido tiene como objetivo mejorar la experiencia de los usuarios de las tecnologías de asistencia al eliminar el contenido superfluo o redundante. Los autores que utilicen aria-hidden para ocultar contenido visible a los lectores de pantalla DEBEN asegurarse de que el significado y la funcionalidad idénticos o equivalentes estén expuestos a las tecnologías de asistencia.

No conozco su caso de uso exacto, así que me tomo la libertad de usar el caso más simple de proporcionar un número de teléfono. En orden de preferencia decreciente, I usaría:

<span aria-label="Our phone number">
  <span class="icon-phone" aria-hidden="true"></span>
  +33 7 1234576
</span>

(or any variation implying:
  - an `i` element with a `role` presentation attribute
    instead of the inner `span` element
  - a `title` attribute instead of an `aria-label` attribute)

<span class="icon-phone" 
  aria-label="Our phone number">+33 7 1234576</span>

(or any variation using `title` instead of `aria-label`)

<i class="icon-phone" role="presentation" 
  aria-label="Our phone number">+33 7 1234576</i>

(or any variation using `title` instead of `aria-label`)

Tenga en cuenta que los atributos aria-label y title deben describir el contenido del elemento. No es el próximo elemento hermano. Entonces , siento que la siguiente solución no está de acuerdo con las especificaciones (incluso si la mayoría de las herramientas de accesibilidad realmente tuvieran el mismo comportamiento observable como si el número de teléfono estuviera realmente dentro del spanelemento):

<span class="icon-phone" 
  title="Our phone number"></span>+33 7 1234576

Deberías usar <span>o algo parecido en su lugar. Puede usar el title=""atributo para dar texto al pasar el mouse, si eso es lo que está buscando. En cuanto a proporcionar accesibilidad a los lectores de pantalla o valor SEO, puede agregar el siguiente CSS:

.icon-lock{
    text-indent:-99999px;
}

Y luego escribe tu marcado así:

<span class="icon-lock">What I want the screen reader to say</span>

<i>Las etiquetas son para marcar texto. Está cambiando el significado semántico de esta etiqueta a algo que no tiene nada que ver con el uso de cursiva (e incluso la etiqueta en cursiva es una mala idea). Deberías usar un SPANen su lugar.

Los elementos en cursiva no admiten altatributos, los IMGelementos sí. Si quieres un ALTatributo, usa una imagen.

Creo que la función de las fuentes que actúan como imágenes debería reservarse para role = "img". Esto luego se puede usar con aria-label = "alt-text". Funciona gracias al algoritmo ARIA Accessible Name. Ver: Técnicas de Aria usando Img Role .