# Problemas de acessibilidade que testamos Cada página explica um problema que nossos testes automatizados encontram: o que significa, a qual critério da WCAG se relaciona, como corrigir em qualquer site, na Shopify e no WooCommerce, e como conferir a correção. ## Problemas de acessibilidade - [Elementos ocultados através de ARIA não devem conter elementos focalizáveis](https://www.fixreports.com/pt-br/issues/aria-hidden-focus): WCAG 4.1.2 · Nível A. Elementos focáveis estão ocultos para os leitores de tela, mas ainda podem ser alcançados pelo teclado. (Atributos e funções ARIA) - [Atributo 'autocomplete' deve ser usado corretamente](https://www.fixreports.com/pt-br/issues/autocomplete-valid): WCAG 1.3.5 · Nível AA. Um campo de formulário usa um valor de autocomplete que os navegadores não reconhecem. (Campos de formulário sem rótulo) - [Botões devem ter texto discernível](https://www.fixreports.com/pt-br/issues/button-name): WCAG 4.1.2 · Nível A. Alguns botões não têm nome acessível, então quem usa leitor de tela ouve apenas “botão”. (Links e botões sem nome) - [Os elementos devem ter contraste de cor suficiente](https://www.fixreports.com/pt-br/issues/color-contrast): WCAG 1.4.3 · Nível AA. Alguns textos não se destacam o suficiente do fundo para serem lidos por pessoas com baixa visão. (Baixo contraste de cores) - [Documentos devem ter um elemento para ajudar na navegação](https://www.fixreports.com/pt-br/issues/document-title): WCAG 2.4.2 · Nível A. Uma página não tem título, então os usuários não conseguem saber em qual página estão. (Títulos de página) - [IDs usados no ARIA e em 'labels' devem ser únicos](https://www.fixreports.com/pt-br/issues/duplicate-id-aria): WCAG 4.1.2 · Nível A. Vários elementos compartilham um id que rotula ou descreve algo, então a tecnologia assistiva pode ler o rótulo errado. (Atributos e funções ARIA) - [Os 'frames' devem ter um atributo 'title'](https://www.fixreports.com/pt-br/issues/frame-title): WCAG 4.1.2 · Nível A. Um frame incorporado (muitas vezes um mapa, um vídeo ou o widget de um app) não tem título, então quem usa leitor de tela não sabe o que ele contém. (Estrutura da página, cabeçalhos e landmarks) - [Níveis dos títulos devem aumentar de um em um](https://www.fixreports.com/pt-br/issues/heading-order): Boa prática de acessibilidade. Os níveis de cabeçalho pulam etapas (por exemplo, de H2 para H4), o que deixa a estrutura da página confusa para quem usa leitor de tela. (Estrutura da página, cabeçalhos e landmarks) - [O elemento <html> deve ter um atributo 'lang'](https://www.fixreports.com/pt-br/issues/html-has-lang): WCAG 3.1.1 · Nível A. A página não declara o idioma, então os leitores de tela podem lê-la com a pronúncia errada. (Idioma da página) - [O elemento <html> deve ter um valor válido para o atributo 'lang'](https://www.fixreports.com/pt-br/issues/html-lang-valid): WCAG 3.1.1 · Nível A. O código de idioma da página não é válido, então os leitores de tela não conseguem escolher a voz certa. (Idioma da página) - [Imagens devem ter texto alternativo](https://www.fixreports.com/pt-br/issues/image-alt): WCAG 1.1.1 · Nível A. Há imagens sem alternativa em texto, então quem usa leitor de tela não sabe o que elas mostram. (Imagens sem alternativa em texto) - [Botões de controle devem ter um texto discernível](https://www.fixreports.com/pt-br/issues/input-button-name): WCAG 4.1.2 · Nível A. Um botão input não tem texto, então os leitores de tela não conseguem dizer o que ele faz. (Campos de formulário sem rótulo) - [Botões de imagem devem ter um texto alternativo](https://www.fixreports.com/pt-br/issues/input-image-alt): WCAG 1.1.1, 4.1.2 · Nível A. Um botão de imagem não tem texto alternativo, então os leitores de tela não conseguem dizer o que ele faz. (Imagens sem alternativa em texto) - [Elementos de formulário devem ter rótulos](https://www.fixreports.com/pt-br/issues/label): WCAG 4.1.2 · Nível A. Alguns campos de formulário não têm rótulo, então quem usa leitor de tela não sabe o que digitar. (Campos de formulário sem rótulo) - [O documento deve ter uma região 'main'](https://www.fixreports.com/pt-br/issues/landmark-one-main): Boa prática de acessibilidade. A página não tem um landmark main, então quem usa leitor de tela não consegue saltar direto para o conteúdo. (Estrutura da página, cabeçalhos e landmarks) - [Links devem ser distinguidos do texto ao redor de uma maneira que não dependa da cor](https://www.fixreports.com/pt-br/issues/link-in-text-block): WCAG 1.4.1 · Nível A. Os links dentro de parágrafos só se distinguem pela cor, então quem não consegue ver a diferença de cor não os percebe. (Baixo contraste de cores) - [Links devem ter um texto discernível](https://www.fixreports.com/pt-br/issues/link-name): WCAG 2.4.4, 4.1.2 · Nível A. Alguns links não têm texto que um leitor de tela possa anunciar; muitas vezes são links só com ícone, como os de redes sociais ou o ícone do carrinho. (Links e botões sem nome) - [O zoom e a ampliação de texto não devem ser desabilitados](https://www.fixreports.com/pt-br/issues/meta-viewport): WCAG 1.4.4 · Nível AA. A página bloqueia o zoom com pinça no celular. (Zoom e refluxo) - [A página deve conter um título de primeiro nível](https://www.fixreports.com/pt-br/issues/page-has-heading-one): Boa prática de acessibilidade. A página não tem um cabeçalho de nível principal. (Estrutura da página, cabeçalhos e landmarks) - [Todo o conteúdo da página deve estar contido em regiões (landmarks)](https://www.fixreports.com/pt-br/issues/region): Boa prática de acessibilidade. Parte do conteúdo não está dentro de um landmark da página (header, nav, main ou footer). (Estrutura da página, cabeçalhos e landmarks) - [Elementos com [role='img'] tenham um texto alternativo](https://www.fixreports.com/pt-br/issues/role-img-alt): WCAG 1.1.1 · Nível A. Um elemento apresentado como imagem não tem alternativa em texto. (Imagens sem alternativa em texto) - [Certificar-se de que regiões roláveis tenham acesso via teclado](https://www.fixreports.com/pt-br/issues/scrollable-region-focusable): WCAG 2.1.1 · Nível A. Uma área com rolagem não pode ser alcançada pelo teclado, então quem navega pelo teclado não consegue rolá-la. (Acesso pelo teclado e foco) - [O elemento 'select' deve ter um nome acessível](https://www.fixreports.com/pt-br/issues/select-name): WCAG 4.1.2 · Nível A. Um menu suspenso (muitas vezes um seletor de ordenação ou de variante) não tem rótulo. (Campos de formulário sem rótulo) - [Elementos svg com um 'role' de 'img' tenham um texto alternativo](https://www.fixreports.com/pt-br/issues/svg-img-alt): WCAG 1.1.1 · Nível A. Uma imagem SVG que transmite informação não tem alternativa em texto. (Imagens sem alternativa em texto) - [Todos os alvos de toque devem ter 24px de tamanho ou deixar espaço suficiente](https://www.fixreports.com/pt-br/issues/target-size): WCAG 2.5.8 · Nível AA. Alguns alvos de toque são menores que 24 por 24 pixels e estão próximos demais, o que dificulta acertá-los no celular. (Acesso pelo teclado e foco)