Tag HTML img: atributo de título vs. atributo alt?

Eu estava navegando na Amazon e notei que ao pesquisar " 1 TB ", se você passar o cursor do mouse sobre a imagem de classificação de estrelas, você só verá a pontuação se estiver usando o IE. Se você estiver usando outro navegador, a pontuação não será exibida.

Uma classificação de 3,8 e uma classificação de 4,2 aparecem como 4 estrelas. É claro que 3,8 estrelas contra 4,2 estrelas (76% contra 84% de pontuação) podem fazer a diferença!

Isso ocorre porque a maneira padrão de exibir alttexto é apenas quando o usuário desativa os gráficos ou quando o navegador é "lido" (por exemplo, navegador para usuários com deficiência visual). No entanto, o IE mostra isso ao pairar.

Então eu acho que se a Amazon deve mostrar isso independentemente do navegador do usuário, então titledeve ser usado além de alt. Você concordaria?

Eu iria para ambos. Título mostrará uma boa dica de ferramenta em todos os navegadores e alt dará uma descrição ao navegar em um navegador sem imagens.

Dito isso, adoraria ver algumas estatísticas de quantos "surfistas" que vão a uma "loja" para procurar mercadorias realmente têm as imagens desativadas ou estão usando um navegador que não oferece suporte a imagens. Acho que os dias em que 90% da população está usando um modem de 28k para se conectar à InterWeb estão looooongo.

Eles são usados ​​para coisas diferentes. O altatributo é usado em vez da imagem. Se a imagem não puder ser mostrada e em leitores de tela.

O titleatributo é mostrado junto com a imagem, normalmente como uma dica de ferramenta instantânea.

Um não deve ser usado "em vez" do outro. Cada um deve ser usado apropriadamente , para fazer as coisas para as quais foram designados.

alt e title são para coisas diferentes, como já mencionado. Embora o atributo title forneça uma dica de ferramenta, alt também é um atributo importante, pois especifica o texto a ser exibido se a imagem não puder ser exibida. (E em alguns navegadores, como o firefox, você também verá este texto enquanto a imagem carrega)

Outro ponto que acho que deve ser feito é que o atributo alt é necessário para validar como um documento XHTML, enquanto o atributo title é apenas uma "opção extra", por assim dizer.

Isso porque eles têm finalidades diferentes e ambos devem ser usados ​​não apenas um em relação ao outro.

O "alt" é para o que vocês já disseram, então você pode ver do que se trata a imagem se ela não puder ser exibida (por qualquer motivo), ele também permite que pessoas com deficiência visual entendam do que se trata a imagem.

O atributo "título" é o correto para mostrar a dica de ferramenta com um título para a imagem.

Na minha opinião, o texto alternativo deve sempre descrever o que é visível na imagem, para o caso de a imagem não ser exibida.

alt = text [CS] Para agentes de usuário que não podem exibir imagens, formulários ou applets, este atributo especifica o texto alternativo. O idioma do texto alternativo é especificado pelo atributo lang.

w3.org

Acredito que alt é necessário para conformidade estrita com XHTML.

Como outros notaram, o título é para dicas de ferramentas (bom ter), alt é para acessibilidade. Não há nada de errado em usar os dois, mas o alt deve estar sempre lá.

O atributo ALT é para o usuário com deficiência visual que usaria um leitor de tela. Se ALT estiver faltando em QUALQUER tag de imagem, todo o url da imagem será lido. Se as imagens forem para parte do design do site, elas ainda devem ter o ALT, mas podem ser deixadas em branco para que a url não precise ser lida para todas as partes do site.

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 .

• alt
• crossorigin
• decoding
• height
• importance (API experimental)
• intrinsicsize (API experimental)
• ismap
• referrerpolicy (API experimental)
• src
• srcset
• width
• usemap

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.

Não, acho que alté melhor porque o objetivo desse atributo é fornecer texto "alternativo" no caso de a imagem não poder ser vista (seja porque a imagem está faltando ou porque o próprio navegador é incapaz de exibi-la).

O MVCFutures para ASP.NET MVC decidiu fazer ambos. Na verdade, se você fornecer 'alt', ele criará automaticamente um 'título' com o mesmo valor para você.

Não tenho o código-fonte disponível, mas uma rápida pesquisa no Google revelou um caso de teste para ele!

    [TestMethod]
    public void ImageWithAltValueInObjectDictionaryRendersImageWithAltAndTitleTag() {
        HtmlHelper html = TestHelper.GetHtmlHelper(new ViewDataDictionary());
        string imageResult = html.Image("/system/web/mvc.jpg", new { alt = "this is an alt value" });
        Assert.AreEqual("<img alt=\"this is an alt value\" src=\"/system/web/mvc.jpg\" title=\"this is an alt value\" />", imageResult);
    }

Você não deve usar o atributo title para o elemento img. O raciocínio por trás disso é bastante simples:

Presumivelmente, as informações de legenda são informações importantes que devem estar disponíveis para todos os usuários por padrão. Nesse caso, apresente este conteúdo como texto ao lado da imagem.

Fonte: http://blog.paciellogroup.com/2010/11/using-the-html-title-attribute/

O HTML 5.1 inclui conselhos gerais sobre o uso do atributo title:

Depender do atributo de título é atualmente desencorajado, pois muitos agentes de usuário não expõem o atributo de uma maneira acessível, conforme exigido por esta especificação (por exemplo, exigir um dispositivo apontador como um mouse para fazer com que uma dica de ferramenta apareça, o que exclui usuários apenas de teclado e usuários somente de toque, como qualquer pessoa com um telefone ou tablet moderno).

Fonte: http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute

Quando se trata de acessibilidade e leitores de tela diferentes:

• Jaws 10-11: desativado por padrão
• Window-Eyes 7.02: ativado por padrão
• NVDA: não compatível (sem opções de suporte)
• VoiceOver: não compatível (sem opções de suporte)

Portanto, como Denis Boudreau colocou adequadamente: claramente não é uma prática recomendada .