APRENDER. PRATICAR. EVOLUIR.Destino e ação
A ligação do cartão abre um relatório; o seu href deve representar esse destino real. Se uma opção apenas altera estado local, como expandir um painel, um botão exprime essa intenção e precisa do comportamento correspondente. Usar href="#" para simular todas as ações torna copiar, abrir noutro separador e interpretar o controlo menos previsível.
Começa pela intenção do utilizador, não pela aparência azul ou pelo formato de um ícone.
Caminhos dependem do contexto
O caminho relatorios/r7.html parte do URL base do documento. Mover o mesmo fragmento de /guias/ para /guias/rede/ pode alterar o destino, apesar de o atributo não mudar. Um caminho iniciado por / parte da raiz da origem; ../ sobe um nível do diretório.
Se existir base com href, considera esse URL na resolução, incluindo ligações só com fragmento. Num 404, compara o destino pedido com o destino pretendido antes de culpar o formato ou o tamanho da imagem.
O papel da imagem determina a alternativa
No cartão, o separador visual não acrescenta informação à frase e recebe alt vazio. Já o ícone dentro da ligação é o único conteúdo que explica a sua finalidade; o alt identifica a abertura do relatório R7. O mesmo ficheiro gráfico pode ter tratamentos diferentes em contextos diferentes.
Omitir alt não é equivalente a declarar uma imagem decorativa e pode expor nomes de ficheiro pouco úteis. Faz a escolha depois de ler o conteúdo que rodeia a imagem.
Informação complexa e texto visível
Uma etiqueta breve pode identificar um gráfico, mas não substitui doze valores necessários a uma decisão. Fornece os dados e uma explicação relevante em texto ou tabela associados ao gráfico. O objetivo é conservar o significado, não transcrever cada pixel.
Também não guardes informação indispensável apenas em title: um tooltip dependente de hover pode não chegar a quem usa teclado ou toque. Informação necessária deve estar disponível numa apresentação apropriada ao contexto.
Dimensões e formatos têm contratos próprios
width e height coerentes permitem antecipar a proporção antes de a imagem chegar e ajudam a reservar espaço. CSS pode alterar o tamanho apresentado; as dimensões não impedem esse ajuste nem substituem alt. Se picture oferecer fontes alternativas, conserva img como elemento que apresenta a imagem e fornece fallback.
Ter vários source não prova que algum seja utilizável no browser alvo. Uma decisão sobre download deve considerar o recurso efetivamente selecionado e as condições de apresentação.
Dados tabulares com relações explícitas
Na tabela do exemplo, cada nome de serviço é um th com scope row e os nomes no topo são th com scope col. O valor 120 fica relacionado com Consulta e Pedidos. Pôr todos os td a negrito não exprime essas relações.
Esta é uma tabela simples; relações com vários níveis de cabeçalho podem exigir uma modelação mais cuidadosa. Usa uma tabela para dados cuja organização em linhas e colunas tenha significado, conservando esse significado ao rever o layout.
Diagnóstico antes da correção
Se um ícone deixa de aparecer depois de mover uma página, verifica o URL resolvido; se a ligação não tem nome útil, verifica o conteúdo textual e alt; se o relatório perde contexto, verifica os cabeçalhos e as alternativas dos gráficos. São problemas diferentes mesmo quando ocorrem no mesmo cartão.
Explica que observação sustentaria cada diagnóstico e o que ainda falta confirmar. A leitura do excerto permite escolher uma correção, mas não demonstra disponibilidade real dos recursos nem acessibilidade integral do portal.
<article aria-labelledby="relatorio-r7">
<h2 id="relatorio-r7">Relatório R7</h2>
<p>
<img src="assets/separador.svg" alt="" width="16" height="16">
Medições do turno da manhã.
</p>
<a href="relatorios/r7.html">
<img src="assets/relatorio.svg" alt="Abrir relatório R7" width="24" height="24">
</a>
<table>
<caption>Pedidos observados por serviço</caption>
<thead>
<tr><th scope="col">Serviço</th><th scope="col">Pedidos</th></tr>
</thead>
<tbody>
<tr><th scope="row">Consulta</th><td>120</td></tr>
<tr><th scope="row">Exportação</th><td>35</td></tr>
</tbody>
</table>
</article>O cartão é um fragmento HTML para um documento PT-PT. O primeiro ícone é decorativo; o segundo dá nome à ligação que o contém. A tabela separa cabeçalhos e dados sem depender do negrito.
Os URLs são relativos ao contexto em que o fragmento é inserido. Os ficheiros e o relatório são referências ilustrativas, não recursos fornecidos por este excerto; a avaliação consiste em interpretar a marcação.
Armadilhas comuns
Tratar todos os ícones como decorativos; usar title como substituto de alt; confundir URL relativo com caminho desde a raiz; remover img de picture; pôr cabeçalhos de tabela apenas a negrito; atribuir a CSS uma resposta 404 de um URL diferente.
Tópicos relacionados: Estrutura do documento e semântica · Formulários, controlos e submissão · Design responsivo e media queries · Foco, estados, movimento e preferências
Uma ligação precisa de um destino correto e de uma finalidade compreensível. Uma imagem precisa de tratamento segundo o seu papel; tamanho e formato não substituem significado. Quando há dados tabulares, conserva a relação entre valores e cabeçalhos. Diagnostica cada camada com a evidência correspondente.
Referência: HTML relative navigation · HTML Living Standard; modular CSS