Atributo ALT
O altatributo é definido em um conjunto de tags (ou seja, img, areae, opcionalmente, para inpute applet) para permitir que você fornecer um equivalente de texto para o objeto.
Um equivalente em texto traz os seguintes benefícios para seu site e seus visitantes nas seguintes situações comuns:
- hoje em dia, os navegadores da Web estão disponíveis em uma ampla variedade de plataformas com capacidades muito diferentes; alguns não podem exibir imagens ou apenas um conjunto restrito de tipos de imagens; alguns podem ser configurados para não carregar imagens. Se o seu código tiver o atributo alt definido em suas imagens, a maioria desses navegadores exibirá a descrição que você deu em vez das imagens
- alguns de seus visitantes não podem ver imagens, sejam eles cegos, daltônicos, míopes; o atributo alt é de grande ajuda para aquelas pessoas que podem confiar nele para ter uma boa ideia do que está em sua página
- os robôs dos mecanismos de pesquisa pertencem às duas categorias acima: se você deseja que seu site seja indexado da maneira que merece, use o atributo alt para garantir que eles não percam seções importantes de suas páginas.
Atributo do Título
O objetivo desta técnica é fornecer ajuda sensível ao contexto para os usuários à medida que eles inserem dados em formulários, fornecendo as informações de ajuda em um title atributo. A ajuda pode incluir informações de formato ou exemplos de entrada.
Exemplo 1: Um menu suspenso que limita o escopo de uma pesquisa
Um formulário de pesquisa usa um menu suspenso para limitar o escopo da pesquisa. O menu suspenso fica imediatamente ao lado do campo de texto usado para inserir o termo de pesquisa. A relação entre o campo de pesquisa e o menu suspenso é clara para os usuários que podem ver o design visual, que não tem espaço para um rótulo visível. O titleatributo é usado para identificar o selectmenu. O titleatributo pode ser falado por leitores de tela ou exibido como uma dica de ferramenta para pessoas que usam ampliadores de tela.
<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
...
</select>
Exemplo 2: Campos de entrada para um número de telefone
Uma página da Web contém controles para inserir um número de telefone nos Estados Unidos, com três campos para código de área, câmbio e os quatro últimos 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>
Exemplo 3: uma função de pesquisa
Uma página da Web contém um campo de texto onde o usuário pode inserir os termos de pesquisa e um botão denominado "Pesquisar" para realizar a pesquisa. O titleatributo é usado para identificar o controle do formulário e o botão é posicionado logo após o campo de texto para que fique claro para o usuário que o campo de texto é onde o termo de pesquisa deve ser inserido.
<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>
Exemplo 4: Uma tabela de dados de controles de formulário
Uma tabela de dados de controles de formulário precisa associar cada controle aos cabeçalhos de coluna e linha dessa célula. Sem um título (ou LABEL fora da tela), é difícil para usuários não visuais pausar e interrogar os valores de cabeçalho de linha / coluna correspondentes usando sua tecnologia de assistência enquanto acessam o formulário.
Por exemplo, um formulário de pesquisa tem quatro cabeçalhos de coluna na primeira linha: Pergunta, Concordo, Indeciso, Discordo. Cada linha a seguir contém uma pergunta e um botão de opção em cada célula correspondente à opção de resposta nas três colunas. O atributo de título para cada botão de opção é uma concatenação da escolha de resposta (cabeçalho da coluna) e o texto da pergunta (cabeçalho da linha) com um hífen ou dois pontos como separador.
Elemento Img
Atributos permitidos mencionados no MDN .
altcrossorigindecodingheightimportance (API experimental)intrinsicsize (API experimental)ismapreferrerpolicy (API experimental)srcsrcsetwidthusemap
Como você pode ver, o titleatributo não é permitido dentro do imgelemento. Eu usaria altatributo e, se necessário, usaria CSS (exemplo: pseudo classe :hover) em vez de titleatributo.