HTML tag img: título atributo atributo alt vs.?

Question

Eu estava navegando Amazon e notei que quando procurar " 1TB " se você passa o cursor do mouse sobre as estrelas classificação da imagem, você só ver a pontuação se estiver usando o IE. Se você estiver usando outro navegador, em seguida, a pontuação não será exibido.

A classificação de 3,8 e uma classificação de 4.2 tanto mostrar-se como 4 estrelas. É claro que uma 3,8 estrelas vs 4,2 estrelas (76% vs pontuação 84%) poderia fazer a diferença!

Isto é porque a forma padrão de exibição de texto alt é somente quando o usuário desliga gráfica ou quando o navegador é "ler" (navegador exemplo para os usuários que são deficientes visuais). IE no entanto, mostra-a em foco.

Então eu acho que se a Amazon é mostrar que, independentemente do navegador do usuário, então title deve ser usado em conjunto com alt. Você concorda?

Answer 1

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

Dito isso, eu adoraria ver algumas estatísticas de quantos "surfistas" lá fora, indo para uma "loja" a mercadoria browse realmente têm imagens desligado ou está usando um navegador que não suporta imagens. Eu acho que os dias em que 90% da população está usando um modem de 28k para se conectar à Interweb é looooong mais.

Answer 2

Eles são usados ??para coisas diferentes. O atributo alt é usado em vez da imagem. Se a imagem não pode ser mostrado, ou (eu acredito) em leitores de tela.

O atributo title é mostrada juntamente com a imagem, tipicamente como uma dica pairar.

Um não deve ser usado "em vez" do outro. Cada um deve ser usado corretamente , para fazer as coisas que eles foram projetados para fazer.

Answer 3

alt e título são para coisas diferentes, como já mencionado. Enquanto o título atributo irá fornecer uma dica de ferramenta, alt também é um atributo importante, uma vez que especifica o texto a ser exibido se a imagem não pode ser exibida. (E, em alguns navegadores, como o Firefox, você também vai ver este texto enquanto as cargas de imagem)

Outro ponto que me parece que deve ser feita é que o alt atributo é necessário para validar como um documento XHTML, enquanto o título atributo é apenas uma "opção extra", por assim dizer.

Answer 4

Isso porque eles servem a propósitos diferentes e ambos devem ser não utilizado apenas um sobre o outro.

O "alt" é para o que vocês já disse, para que possa ver o que é a imagem é tudo sobre se a imagem não pode ser exibida (por qualquer motivo), ele também permite que as pessoas entendem o que é a imagem deficientes visuais aproximadamente.

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

Answer 5

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

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

w3.org

Answer 6

Eu acredito alt é necessário para cumprimento estrito XHTML.

Como outros já mencionado, o título é para dicas de ferramentas (bom ter), alt é para acessibilidade. errado nada com o uso de ambos, mas alt deve sempre estar lá.

Answer 7

Não, eu acho alt é melhor porque a finalidade desse atributo é fornecer texto "alternativo" no caso em que a imagem não pode ser vista (seja de que a imagem está faltando, ou que o próprio navegador é incapaz de exibir -lo).

Answer 8

Os MVCFutures para ASP.NET MVC decidiu fazer as duas coisas. De fato, se você fornecer 'alt' ele irá criar automaticamente um 'título' com o mesmo valor para você.

Eu não tenho o código fonte para a mão, mas uma rápida pesquisa no google apareceu 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);
    }

Answer 9

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

Presumivelmente informações de legenda é uma informação importante que deve estar disponível para todos os usuários por padrão. Se assim apresentar este conteúdo como texto ao lado da imagem.

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

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

Baseando-se no atributo do título é actualmente desencorajado como muitos agentes de utilizador não exponha o atributo de uma maneira acessível como requerido pela presente memória descritiva (por exemplo, a necessidade de um dispositivo apontador, tal como um rato para causar um dica para apear, que exclui teclado- apenas os usuários e os usuários só toque, como qualquer pessoa com um telefone moderno ou tablet).

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

Quando se trata de leitores de acessibilidade e de tela diferente:

• Jaws 10-11: desativada por padrão
• Window-Eyes 7.02: ativada por padrão
• NVDA: não suportado (sem opções de suporte)
• VoiceOver: não suportado (sem opções de suporte)

Assim, como Denis Boudreau colocá-lo adequadamente: não é claramente uma prática recomendada .

Answer 10

O atributo ALT é para o usuário com deficiência visual que iria usar um leitor de tela. Se o ALT está faltando a partir de qualquer tag de imagem, toda a url para a imagem será lido. Se as imagens são para parte do design do site, eles ainda devem ter a ALT, mas eles podem ser deixados em branco para que o url não tem de ser lido em todas as partes do site.

Answer 11

ALT Atributo

O atributo alt é definida em um conjunto de tags (ou seja, img, area e, opcionalmente, para input e applet) para que você possa fornecer um equivalente de texto para o objeto.

Um texto equivalente traz os seguintes benefícios para o seu site e seus visitantes nas seguintes situações comuns:

• hoje em dia, navegadores da Web estão disponíveis em uma grande variedade de plataformas com capacidades muito diferentes; alguns não podem exibir imagens em todos ou apenas um conjunto restrito de tipo de imagens; alguns podem ser configuradas para não carregar imagens. Se o seu código tem o conjunto atributo alt em suas imagens, a maioria desses navegadores irá exibir a descrição que você deu em vez das imagens
• alguns de seus visitantes não podem ver imagens, sejam elas cego, daltônico, baixa de visão; o atributo alt é de grande ajuda para aquelas pessoas que podem contar com ele para ter uma boa idéia do que está em sua página
• procurar bots motor pertencem às duas categorias acima: se você quiser que seu site a ser indexado, assim como ele merece, use o atributo alt para se certificar de que eles não vai perder partes importantes de suas páginas
.

Título Atributo

O objectivo desta técnica é fornecer ajuda sensível ao contexto para os usuários que entram dados em formulários, fornecendo as informações de ajuda em um atributo title. 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 é imediatamente adjacente ao campo de texto usado para inserir o termo de pesquisa. A relação entre o campo de pesquisa e no menu suspenso é claro para os utilizadores que podem ver o design visual, que não tem espaço para uma etiqueta visível. O atributo title é usado para identificar o menu select. O atributo title pode ser falada por leitores de tela ou exibido como uma dica de ferramenta para as pessoas que utilizam 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 Web contém controles para a entrada de um número de telefone nos Estados Unidos, com três campos para código de área, câmbio e 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: A função de pesquisa A página da Web contém um campo de texto onde o usuário pode inserir termos de pesquisa e um botão "Pesquisar" para executar a pesquisa. O atributo title é usado para identificar o controlo de formulário e o botão está posicionado logo após o campo de texto para que seja claro para o usuário que o campo de texto é onde o termo de pesquisa devem ser inseridos.

<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 controlo de forma precisa para associar cada controlo com os cabeçalhos das colunas e linhas para essa célula. Sem um título (ou fora da tela ETIQUETA) é difícil para utilizadores não visuais para fazer uma pausa e interrogar para valores de cabeçalho de linha / coluna correspondente, utilizando a sua tecnologia de apoio enquanto tabulação através da forma.

Por exemplo, um formulário de pesquisa tem quatro cabeçalhos de coluna na primeira linha: Pergunta, concordar, indeciso, discordo. Cada linha seguinte 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 título para cada botão de opção é uma concatenação do opção de resposta (cabeçalho da coluna) eo texto da pergunta (cabeçalho da linha) com um hífen ou cólon como separador.

Img Elemento

attribut admitidoses mencionados na MDN .

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

Como você pode ver atributo title não é permitido dentro elemento img. Gostaria de usar atributo alt e se exige que eu iria usar CSS (Exemplo: class :hover pseudo) em vez de atributo title.