Verificado em 24/09/2026 · https://www.heise.de/
5 barreiran crítican · além disso, 2 a verificar.
Desde a última análise: sem alterações.
Como se obtém a pontuação? (100 pontos iniciais)
| 36 de 521 imagens sem atributo alt | -18 |
| 4 campo(s) de formulário sem etiqueta reconhecível | -18 |
| 13 ligação(ões) sem nome reconhecível no HTML | -18 |
| 6 botão(ões) sem nome no HTML | -18 |
| 5 regran CSS com contraste de texto possivelmente insuficiente | -18 |
| Sem título <h1> no HTML fornecido | -7 |
| 6 atributos id duplicados | -7 |
| Resultado | 0 / 100 |
Percetível
36 de 521 imagens sem atributo alt
As imagens carregadas por JavaScript não são contempladas aqui.
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="3983" height="2238"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="3200" height="1798"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="300" height="250"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="1672" height="940">
Isto é o que deve fazer: Dar um alt a cada <img>: descrição breve nas imagens com conteúdo, alt="" nas puramente decorativas.
4 campo(s) de formulário sem etiqueta reconhecível
Verifique se existe um aria-label definido por JavaScript.
<input type="text" name="q" placeholder="Suchen"><input type="text" name="q" placeholder="Suchen"><select name="in"><input type="text" name="fs" placeholder="Im Preisvergleich suchen">
Isto é o que deve fazer: Ligar cada campo a um elemento <label for> ou definir aria-label / aria-labelledby. Um placeholder por si só não chega.
5 regran CSS com contraste de texto possivelmente insuficiente
Necessário: 4,5:1 (normal) ou 3:1 (texto grande). Em caso de «fundo de página presumido», o fundo real não pôde ser determinado com segurança — na dúvida, verificar no navegador. Encontrado, entre outros: `.dark a-gift-link dialog`: #e0e0e0 auf #fff (Vorfahren-Hintergrund) = 1.32:1 · `a-color-scheme .a-color-scheme__icon--moon`: #959595 auf #c7c7c7 (Vorfahren-Hintergrund) = 1.77:1 · `a-opt-in[is-active] .opt-in__footnote`: #959595 auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 3.00:1 · `.a-android-native-app-prompt__load-app`: #fff auf #27a209 = 3.36:1 · `a-topic .topic-label`: #fff auf #ed3725 = 4.06:1
.dark a-gift-link dialog, a-color-scheme .a-color-scheme__icon--moon, a-opt-in[is-active] .opt-in__footnote, .a-android-native-app-prompt__load-app, a-topic .topic-label
Isto é o que deve fazer: Escurecer a cor do texto ou clarear o fundo até atingir o valor mínimo correspondente. Nunca usar a cor como único meio de distinção.
Operável
13 ligação(ões) sem nome reconhecível no HTML
Ligações vazias ou só com um ícone/imagem sem alt. Um aria-label definido por JavaScript não é reconhecido aqui.
<a-click-performance><a name="topnavi.ho.magazine-nav.ct" class="hover:bg-brand dark:hover:<a name="topnavi.ho.magazine-nav.ix" class="hover:bg-brand-alternative<a name="topnavi.ho.magazine-nav.foto" class="hover:bg-brand dark:hove
Isto é o que deve fazer: Acrescentar texto de ligação visível ou, nas ligações com ícone, usar aria-label ou uma imagem com alt.
6 botão(ões) sem nome no HTML
Os botões sem texto e sem aria-label são mudos para os leitores de ecrã — a menos que o nome seja definido por JavaScript.
<button class="scroll-left text-ho-text"><button class="scroll-right text-ho-text"><button class="scroll-left text-ho-text"><button class="scroll-right text-ho-text">
Isto é o que deve fazer: Acrescentar o texto do botão ou definir aria-label.
Sem título <h1> no HTML fornecido
Cada página deve começar com exatamente um h1. Em páginas construídas com JavaScript, o h1 pode surgir apenas no navegador — nesse caso, verificar no DOM renderizado.
body
Isto é o que deve fazer: Inserir um <h1> significativo como primeiro título (de preferência já no servidor).
Robusto
6 atributos id duplicados
p. ex. heisetopnavi_search, HEI_M_Incontent-2-label, HEI_M_Incontent-2, circle. Quebra as associações label-for e aria.
[id]
Isto é o que deve fazer: Atribuir id únicos.
Próximos passos
- 36 de 521 imagens sem atributo alt. Dar um alt a cada <img>: descrição breve nas imagens com conteúdo, alt="" nas puramente decorativas.
- 4 campo(s) de formulário sem etiqueta reconhecível. Ligar cada campo a um elemento <label for> ou definir aria-label / aria-labelledby. Um placeholder por si só não chega.
- 13 ligação(ões) sem nome reconhecível no HTML. Acrescentar texto de ligação visível ou, nas ligações com ícone, usar aria-label ou uma imagem com alt.
- 6 botão(ões) sem nome no HTML. Acrescentar o texto do botão ou definir aria-label.
- 5 regran CSS com contraste de texto possivelmente insuficiente. Escurecer a cor do texto ou clarear o fundo até atingir o valor mínimo correspondente. Nunca usar a cor como único meio de distinção.
Nova análise semanal, com renderização JS, e-mail para novas barreiras — em breve.
Criar uma declaração de acessibilidade →
Método & limites
Em 24/09/2026 foi verificado o HTML que www.heise.de fornece no primeiro acesso sem sessão iniciada, mais até quatro ficheiros CSS ligados do mesmo domínio. Verificados: contraste de cor (a partir do CSS), alternativas de texto, etiquetagem de formulários, nomes dos elementos de controlo, estrutura dos títulos, título e idioma da página, bloqueio do zoom, id duplicados, valores tabindex positivos, marcos de referência.
Não verificados: tudo o que é gerado por JavaScript, a usabilidade por teclado, a visibilidade do foco, a ordem de foco, o anúncio pelos leitores de ecrã, os conteúdos por trás de sessão iniciada, as subpáginas. O teste automático deteta cerca de 20–35 % das infrações às WCAG — o resto exige uma auditoria manual. Instantâneo, não um juízo jurídico.
Os widgets overlay (botões de acessibilidade que mudam o contraste ou a letra) não tornam um site conforme — as barreiras encontradas têm de ser corrigidas no código-fonte. Porque é que os overlays não ajudam