Guia de Acessibilidade

1. Semântica

• Utilize as tags HTML corretamente, como <header>, <footer>, e <main>, para estruturar a página. Isso ajuda tecnologias assistivas a entenderem o página e a funcionarem de forma correta.

Conceito 📖

O uso correto de tags semânticas permite que tecnologias assistivas, como leitores de tela , interpretem melhor a estrutura da página. Isso beneficia usuários com deficiência visual, ajudando-os a navegar de maneira lógica e eficiente pelo conteúdo.Guia de Boas Práticas UK-BR [1].

---

2. Breadcrumbs

• Inclua trilhas de navegação para que os usuários saibam onde estão no site e possam retornar facilmente às páginas anteriores.

Conceito 📖

As trilhas de navegação orientam os usuários sobre sua posição dentro do site, possibilitando um retorno fácil às páginas anteriores. Esse recurso é especialmente útil para pessoas com dificuldades cognitivas ou para quem depende de uma navegação estruturada. Guia de Boas Práticas UK-BR [2].

---

3. Rótulos e Descrições de Botões e Links

• Use textos descritivos nos botões e links, como “Enviar formulário” ao invés de “Clique aqui”. Assim, os usuários sabem exatamente a função do elemento.

Conceito 📖

Textos descritivos tornam mais claro o propósito de botões e links, evitando ambiguidades como "Clique aqui". Isso facilita o uso por leitores de tela e melhora a experiência de navegação para todos, incluindo pessoas com deficiência visual ou motora. Guia de Boas Práticas UK-BR [3].

---

4. Textos Alternativos

• Adicione descrições claras e objetivas às imagens por meio do atributo alt. Isso garante que pessoas com deficiência visual compreendam o conteúdo visual.

Conceito 📖

O atributo alt permite que leitores de tela descrevam o conteúdo de imagens para usuários cegos ou com baixa visão. Imagens sem texto alternativo são inacessíveis para essas pessoas, deixando-as sem acesso a informações importantes. Guia de Boas Práticas UK-BR [4].

---

5. Textos em Imagens

• Evite incluir textos importantes em imagens. Caso seja necessário, forneça uma alternativa textual para garantir acessibilidade.

Conceito 📖

Incluir textos importantes em imagens pode impedir a acessibilidade, pois leitores de tela não conseguem interpretar texto dentro de imagens. Alternativas textuais são fundamentais para garantir que o conteúdo seja acessível a todos.Guia de Boas Práticas UK-BR [5].

---

6. CSS e Árvore de Acessibilidade

• Configure o CSS de forma que ele respeite a hierarquia semântica do HTML. Isso mantém a página acessível para leitores de tela.

Conceito 📖

Um CSS bem configurado que respeita a semântica HTML preserva a hierarquia visual e estrutural da página. Isso é crucial para usuários que dependem de leitores de tela ou outras tecnologias assistivas, garantindo que a navegação seja intuitiva. Guia de Boas Práticas UK-BR [6].

---

7. Alturas

• Certifique-se de que os elementos na página tenham altura suficiente para facilitar cliques e leitura, especialmente em dispositivos móveis.

Conceito 📖

Garantir alturas adequadas para áreas clicáveis melhora a usabilidade em dispositivos móveis e para pessoas com dificuldade motora. Isso evita cliques acidentais e torna a interação com a página mais confortável.Guia de Boas Práticas UK-BR [7].

Referências

1. CEWEB.br. BRUK - Guia HTML, seção: Semântica. Disponível em: https://ceweb.br/projetos/bruk/guia-html/#introducao. Acesso em: 25 Jan. 2025.

2. CEWEB.br. BRUK - Guia HTML, seção: Semântica. Disponível em: https://ceweb.br/projetos/bruk/guia-html/#estrutura-basica-de-um-documento-html. Acesso em: 25 Jan. 2025.

3. CEWEB.br. BRUK - Guia HTML, seção: Semântica. Disponível em: https://ceweb.br/projetos/bruk/guia-html/#uso-de-tags-sem%C3%A2nticas. Acesso em: 25 Jan. 2025.

4. CEWEB.br. BRUK - Guia HTML, seção: Execução. Disponível em: https://ceweb.br/projetos/bruk/guia-html/#atributos-alt-em-imagens. Acesso em: 25 Jan. 2025.

5. CEWEB.br. BRUK - Guia HTML, seção: Cabeçalhos. Disponível em: https://ceweb.br/projetos/bruk/guia-html/#estrutura-e-hierarquia. Acesso em: 25 Jan. 2025.

6. CEWEB.br. BRUK - Guia HTML, seção:CSS e a Árvore de Acessibilidade . Disponível em: https://ceweb.br/projetos/bruk/guia-html/#praticas-de-acessibilidade. Acesso em: 25 Jan. 2025.

7. CEWEB.br. BRUK - Guia HTML, seção: Altura. Disponível em: https://ceweb.br/projetos/bruk/guia-html/#introducao. Acesso em: 25 Jan. 2025.