HTML tag img: título atributo atributo alt vs.?
-
22-08-2019 - |
Pergunta
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?
Solução
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.
Outras dicas
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
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.
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.
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.
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.
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á.
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).
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);
}
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 .
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.
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 .
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.
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
.