Atributo ALT
El altatributo se define en un conjunto de etiquetas (es decir, img, areay, opcionalmente, para inputy applet) para permitir que proporcione un texto equivalente para el objeto.
Un equivalente de texto brinda los siguientes beneficios a su sitio web y a sus visitantes en las siguientes situaciones comunes:
- hoy en día, los navegadores web están disponibles en una amplia variedad de plataformas con capacidades muy diferentes; algunos no pueden mostrar imágenes en absoluto o solo un conjunto restringido de tipos de imágenes; algunos pueden configurarse para no cargar imágenes. Si su código tiene el atributo alt establecido en sus imágenes, la mayoría de estos navegadores mostrarán la descripción que proporcionó en lugar de las imágenes.
- algunos de sus visitantes no pueden ver imágenes, ya sean ciegos, daltónicos o con poca visión; El atributo alt es de gran ayuda para aquellas personas que pueden confiar en él para tener una buena idea de lo que hay en tu página.
- Los bots de los motores de búsqueda pertenecen a las dos categorías anteriores: si desea que su sitio web sea indexado tan bien como se merece, use el atributo alt para asegurarse de que no se pierdan secciones importantes de sus páginas.
Título Atributo
El objetivo de esta técnica es proporcionar ayuda sensible al contexto para los usuarios a medida que ingresan datos en formularios proporcionando la información de ayuda en un titleatributo. La ayuda puede incluir información de formato o ejemplos de entrada.
Ejemplo 1: Un menú desplegable que limita el alcance de una búsqueda
Un formulario de búsqueda utiliza un menú desplegable para limitar el alcance de la búsqueda. El menú desplegable está inmediatamente adyacente al campo de texto utilizado para ingresar el término de búsqueda. La relación entre el campo de búsqueda y el menú desplegable es clara para los usuarios que pueden ver el diseño visual, que no tiene espacio para una etiqueta visible. El titleatributo se utiliza para identificar el selectmenú. Los titlelectores de pantalla pueden pronunciar el atributo o mostrarlo como información sobre herramientas para las personas que utilizan lupas de pantalla.
<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
...
</select>
Ejemplo 2: campos de entrada para un número de teléfono
Una página web contiene controles para introducir un número de teléfono en los Estados Unidos, con tres campos para el código de área, el intercambio y los últimos cuatro dígitos.
<fieldset>
<legend>Phone number</legend>
<input id="areaCode" name="areaCode" title="Area Code" type="text" size="3" value="" >
<input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="Last four digits of phone number" type="text" size="4" value="" >
</fieldset>
Ejemplo 3: una función de búsqueda
Una página web contiene un campo de texto donde el usuario puede ingresar términos de búsqueda y un botón con la etiqueta "Buscar" para realizar la búsqueda. El titleatributo se usa para identificar el control de formulario y el botón se coloca justo después del campo de texto para que el usuario tenga claro que el campo de texto es donde se debe ingresar el término de búsqueda.
<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>
Ejemplo 4: una tabla de datos de controles de formulario
Una tabla de datos de controles de formulario debe asociar cada control con los encabezados de columna y fila de esa celda. Sin un título (o ETIQUETA fuera de la pantalla), es difícil para los usuarios no visuales hacer una pausa e interrogar por los valores de encabezado de fila / columna correspondientes utilizando su tecnología de asistencia mientras se desplaza por el formulario.
Por ejemplo, un formulario de encuesta tiene cuatro encabezados de columna en la primera fila: Pregunta, De acuerdo, Indeciso, En desacuerdo. Cada fila siguiente contiene una pregunta y un botón de opción en cada celda correspondiente a la opción de respuesta en las tres columnas. El atributo de título para cada botón de opción es una concatenación de la opción de respuesta (encabezado de columna) y el texto de la pregunta (encabezado de fila) con un guión o dos puntos como separador.
Elemento Img
Atributos permitidos mencionados en MDN .
altcrossorigindecodingheightimportance (api experimental)intrinsicsize (api experimental)ismapreferrerpolicy (api experimental)srcsrcsetwidthusemap
Como puede ver, el titleatributo no está permitido dentro del imgelemento. Usaría altatributo y, si es necesario, usaría CSS (Ejemplo: pseudoclase :hover) en lugar de titleatributo.