html - emplea - Atributo Alt o título para la etiqueta i

title html definicion

Question

Uso font-awesome y visualizo sus fuentes de esa manera:

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

Esto mostrará un pequeño y bonito símbolo de candado. Para que el usuario sepa exactamente qué significa eso, intenté agregar atributos como title y alt, pero fue en vano.

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

Answer 1

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

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

Y luego escriba su marcado de esa manera:

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

Answer 2

Puede usar el atributo title en un elemento i , como cualquier elemento, por ejemplo

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

Si ayuda es un problema más difícil. Los navegadores generalmente muestran el valor del atributo de title como una "información sobre herramientas" al pasar el mouse, pero ¿por qué el usuario debería pasar el mouse sobre el ícono? Y tales tooltips son de mala usabilidad; Los llamados tooltips CSS a menudo funcionan mejor.

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

Answer 3

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

Los elementos en cursiva no admiten atributos alt , IMG elementos IMG sí. Si quieres un atributo ALT , usa una imagen.

Answer 4

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

• La presentación del rol para eliminar la semántica del rol nativo implícito del elemento. Esto es especialmente importante si usa (ab) un elemento con una semántica nativa para proporcionar iconos, como este es el caso en su ejemplo usando el elemento i (que, de acuerdo con las especificaciones, "representa un lapso de texto en una voz alternativa" o estado de ánimo [...] " ).
• Una etiqueta aria para proporcionar un valor de cadena que marque el elemento -o bien- un atributo de título HTML nativo si está de acuerdo con que el navegador muestre una información sobre herramientas cuando está suspendido.
• 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). De acuerdo con las especificaciones:

Los autores PUEDEN, con precaución, utilizar aria-hidden para esconder contenido visiblemente presentado de tecnologías de asistencia solo si el acto de ocultar este contenido tiene la intención de mejorar la experiencia de los usuarios de tecnologías de asistencia eliminando contenido redundante o extraño. Los autores que usan aria-hidden para ocultar el contenido visible de 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, por lo que me tomo la libertad de usar el caso más simple de proporcionar un número de teléfono. En orden decreciente de preferencia, usaría:

<span aria-label="Our phone number">
  <span class="icon-phone" aria-hidden="true"></span>
  [phone]
</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">[phone]</span>

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

<i class="icon-phone" role="presentation" 
  aria-label="Our phone number">[phone]</i>

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

Tenga en cuenta que los atributos de aria-label y title deberían describir el contenido del elemento. No es el siguiente elemento hermano. Por lo tanto, creo 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 que si el número de teléfono estuviese realmente dentro del elemento span ):

<span class="icon-phone" 
  title="Our phone number"></span>[phone]