Good Mood

Page Content

Terminologia

Existem vários termos que são comumente usados para descrever ALT texto. Eles podem ser usados em diferentes contextos, mesmo dentro deste site.,

• texto ALT-o conceito de adicionar um texto amigável do leitor de tela Descrição alternativa de uma imagem. Isto pode ser implementado de forma diferente em todos os tipos de documentos.
• alt attribute (HTML) – In HTML, The ALT text is inserted into the ALT attribute within the IMG tag.
• ALT ” Tag ” – referência abreviada ao atributo ALT.

Demo of ALT Text

Purpose

The ALT text adds a text description to an image on a Web page, and should be used for all images, graphical bullets, and graphical horizontal rules.,

ALT text is accessed by screen reader users to provide them with a text equivalent of images. Em navegadores visuais como o Firefox, o texto ALT é mostrado quando uma imagem está quebrada, ou quando todas as imagens foram desativadas. orientação do WCAG orientação do WCAG

orientação do WCAG 2.0 1.1.1.—”Todo o conteúdo não-texto que é apresentado ao usuário tem uma alternativa de texto que serve a finalidade equivalente.”

exemplos de botões de imagem

considere as imagens para seções de um hipotético local de educação abaixo do qual todos contêm texto decorativo.,Nota: qualquer texto usado em uma imagem deve seguir as Diretrizes de legibilidade e contraste.

resultado do Leitor do Ecrã Com a tecla ALT da Tag

Se as imagens não são carregadas, ALT texto irá mostrar o que as imagens teriam dito em um navegador como o Firefox.

Screen Reader Output Without ALT Tag

Without the ALT text, No one can know what the content of the image would have been.Nota: O leitor do ecrã diz “imagem” cinco vezes.,

Implementar o Atributo ALT

Abaixo estão alguns exemplos de como como ALT texto pode ser implementado, dependendo do contexto.

George Washington Painting

View the Code

Implement the ALT text as an attribute in the IMG tag. Veja o exemplo abaixo.

nota: um comprimento de texto ALT recomendado é de cerca de 125 caracteres. Isto acomoda o ecrã do leitor de Mandíbulas ALT campo de texto. No entanto, isto não está dentro das orientações do WCAG.

Legendas de imagem vs. texto ALT

qualquer informação sobre a imagem, tais como informação de copyright, fonte de imagem ou informação extra deve ser colocada no texto de legenda por baixo da imagem, não no texto ALT. Veja o exemplo abaixo.

Caption: Painting “Washington and Lafayette at Valley Forge” by John Ward Dunsmore from 1907. Imagem cortesia da Biblioteca do Congresso.,

Logotipos

Para logotipos, especialmente logotipos que são repetidos, é suficiente para identificar que o logotipo é, não necessariamente descrevê-lo totalmente

uso Impróprio da ALT Texto

não deve ser usado para:

• introduzir texto da dica,
• fornecer informações de copyright ou fonte sobre uma imagem ou

transmitir informações suplementares sobre o gráfico.,introduzir Termos de pesquisa (isto pode ser feito através de uma boa utilização de rubricas).

texto Alt vazio para imagens decorativas

algumas imagens são usadas apenas para fins de disposição ou para melhorar o conteúdo para os utilizadores com visão e não fornecem conteúdo.

A ALT tag para estas imagens podem ser em branco ( <alt= “” > ou <alt=” “>), de modo a que os leitores de tela irá ignorá-los completamente.,

o exemplo abaixo irá usar uma imagem de amostra de uma barra de ferramentas rainbow, seguida de alguns exemplos de código acessíveis e inacessíveis.

barra de ferramentas arco-íris

suponha que um lado Web foi projetado com uma barra de ferramentas arco-íris usado para separar peças de texto.

Nota: o atributo ALT com o carácter espaço é considerado menos correcto, mas pode ser a única opção permitida em alguns sistemas de gestão de conteúdo.

texto Em alt conciso

Se uma descrição de texto já está fornecida para uma imagem dentro do texto principal da página, então a tag ALT pode apenas fornecer um resumo da imagem, não uma descrição completa.,

Veja imagens complexas para exemplos de como isso pode ser usado em diferentes situações.

exemplo texto com imagem

abaixo é uma imagem de uma molécula de gordura saturada com 18 moléculas de carbono. Observe que as ligações únicas entre os elementos tornam a cadeia de carbono relativamente reta.,

Links para Descrições detalhadas

Em alguns casos pode ser necessário adicionar um link para uma descrição de uma imagem, especialmente em casos onde as imagens são usadas para transmitir conteúdo significativo. Existem várias maneiras que isso pode ser realizado-incluindo uma tag LONGDESC, um D-link ou um link mais overt para a descrição mais longa. Veja abaixo exemplos

Link para texto de legenda

Se a informação é crítica, então uma ligação de legenda overt pode ser a melhor solução. Este método fornece a indicação mais clara de que uma descrição mais longa está disponível.,

View Extended Text Description

d-links

alguns especialistas defendem o uso de um D-link para sinalizar a presença de uma descrição de texto estendido. No entanto, alguns utilizadores podem não ter conhecimento da Convenção. Este método é melhor utilizado para fornecer informações que são puramente suplementares.

D

atributo LONGDESC

Este é um atributo que está escondido nos navegadores visuais, mas reconhecido por alguns leitores de tela. O LONGDESC é melhor para fornecer detalhes extras que aumentam o conteúdo, mas não é crítico., Deve-se notar que o LONGDESC tem suporte incompleto entre navegadores visuais e leitores de tela, e é obsoleto no HTML5.

ligações e botões

para imagens utilizadas como elementos de navegação para activar funções como impressão, carregamento ou gravação, o texto ALT deve descrever o destino ou função, não a imagem.

Clickable vs. Non-Clickable Penn State Shield

When a Penn State shield is used on a Web page, the ALT text used depends on whether it is clickable (i.e. links to the Penn State home page) or not.,

Se uma imagem de escudo do Estado do Penn estiver a ser usada para fornecer uma ligação clicável à página inicial, o texto ALT deverá indicar o destino (isto é, ALT=”Penn State Home Page”). Note que a marca IMG está embutida numa etiqueta A para a ligação.Nota: Se o escudo não é clicável, então o texto ALT pode ser “Penn State” ou “Penn State shield”.

atributo TITLE for Tool Tips

o atributo TITLE de um texto IMG pode ser usado para gerar uma dica para usuários com visão. Mas, por favor, estejam cientes disso.,

• o atributo TITLE não é lido em voz alta por omissão na maioria dos leitores do ecrã.
• o texto ALT não é normalmente mostrado como uma dica na maioria dos navegadores.

Se for necessária uma dica para os utilizadores com visão, então tanto um atributo TITLE como ALT com a mesma informação podem ser usados para garantir que a mesma informação seja fornecida a ambos os públicos.

Veja este exemplo abaixo

Favoritos botão coração com Dica

considere uma versão da imagem cardíaca abaixo da qual pode ser usada em uma interface para selecionar itens favoritos (por exemplo, músicas favoritas ou E-books).,

Tanto o texto do atributo ALT e TITLE são “Favoritos”

Ver o Código