Os 10 problemas sérios de accesibilidade mais comuns

De acordo com os limiares do rácio de contraste das WCAG 2 AA, todos os elementos de texto devem ter um contraste suficiente entre o texto em primeiro plano e as cores de fundo.

Os alvos tácteis devem ter uma dimensão mínima de 24 por 24 píxeis CSS. A maior área não obscurecida do alvo tátil é utilizada para calcular o tamanho. O alvo deve estar a uma distância mínima de 24 píxeis CSS de qualquer outro alvo tátil se o seu tamanho for insuficiente.

Quando utilizados como hiperligações, o texto da hiperligação e o texto alternativo para as imagens devem ser reconhecíveis pelos leitores de ecrã, não ter etiquetas duplicadas e ser focalizáveis.

A etiqueta visível dos itens interactivos etiquetados através do seu conteúdo deve ser incluída no seu nome acessível.

Todos os itens da lista (li) devem ter elementos pais ul ou ol.

Certifique-se de que as pessoas que não conseguem distinguir as cores conseguem perceber quando o texto é uma hiperligação, verificando se a hiperligação tem um estilo distinto que não depende da cor ou uma diferença de contraste superior a 3:1, o que indica que é necessário efetuar um teste manual.

Elements with ARIA command roles — link, button, or menuitem — must have an accessible name so that screen reader users can understand their purpose. Without a discernible name, these interactive elements are announced without any meaningful label, making it impossible for assistive technology users to know what action the element performs or where it leads. Fix this by providing inner text content, an aria-label attribute, an aria-labelledby reference to visible text, or a title attribute.

Para evitar uma ordem de tabulação inesperada que pareceria perder alguns componentes completamente, um atributo tabindex nunca deve ter um valor maior que 0.

Scrollable regions that contain overflowing content must be reachable and navigable using only the keyboard. When a scrollable area lacks keyboard access, users who cannot use a mouse are unable to scroll through its content. To fix this, ensure the scrollable region itself is focusable (e.g., by adding tabindex="0") or that it contains at least one focusable element.

Os leitores de ecrã não anunciam controlos interactivos aninhados.