0/0Itens marcadosem todo o site

0/0Itens marcadosem

Desenvolvimento Web

Boas práticas para garantir acessibilidade no desenvolvimento web

"Nessa fase, é importante garantir que a equipe de desenvolvimento saiba como implementar acessibilidade, verificá-la e usar as ferramentas disponíveis no mercado para testes e padronizações. Também é importante que a equipe saiba como as pessoas com deficiência usam os sítios web e aplicativos". Nesse caso, foram incluídas técnicas relacionadas ao desenvolvimento e também formas de verificar.

Imagens

Adicionar alt para imagens, botões-imagem, gráficos e imagens de mapas com pontos de acesso. [1]

Adicionar alt="" para imagens decorativas que não tem significado. [1]

Incluir a descrição no alt para imagens que contém texto. [1]

Garantir contraste adequado entre texto da imagem e plano de fundo.

Evitar textos com fontes muito pequenas dentro da imagem.

Vídeos

Adicionar legendas para áudio em vídeos existentes. [2]

Evitar conteúdo com flashes (gatilhos para convulsões) ou manter abaixo dos limites. [3]

Adicionar botão de controle de legenda e audiodescrição.

Controles

Adicionar href para links. [4]

Adicionar underline nos links. [5]

Adicionar estados de foco em campos de entrada, botões, e elementos interativos. [6]

Adicionar type="button" nos botões. [4]

Adicionar skip-link (link para pular) para o conteúdo principal. [7]

Identifique e comunique links que abrem em uma nova guia ou janela. [8]

Garantir que todos os botões tenham nome acessível por leitores de tela.

Formulário

Adicionar label para os campos de entradas associadas ao elemento correspondente. [9]

Adicionar <fildset> e <legend> para seção no formulário. [4]

Adicionar autocomplete para campos de entrada. [10]

Exibir errors (erros) de entrada acima do formulário, após envio. [11]

Adicionar aria-describedby para os campos de entrada. [11]

Exibir mensagens de erro e sucesso não só visualmente. [5]

Utilizar validação em tempo real acessível para indicar campos obrigatórios ou incorretos.

Mídia

Impedir autoplay para vídeos e audios. [12]

Adicionar type para botões e entradas. [4]

Adicionar pausa para todas as mídias. [13]

Adicionar transcrição para audios. [1]

Semântica

Uso de elementos nativos HTML.

Fluxo continuo e Lógico.

Tem descrições que podem ser facilmente compreendidas.

Tem a semântica correta.

É objetivo nos rótulos.

Texto

Evitar o uso de textos dentro de imagens.

Redimensiona os textos na página, aumentando o zoom em até 200%.

Alturas das fontes não é fixa.

Teclado

Funcionalidades da página web estão disponíveis por teclado.

Quando se tem o mouseover é permitido o uso de teclado.

Foco visível remova elementos focalizáveis invisíveis.

Adicione o .hover, .focus para tornar o foco visível.

Permite/visa o uso de Atalhos de teclado como o TAB.

Primeiro item interativo da página é um link para o conteúdo principal.

Garantir ordem lógica de navegação por teclado.

Título

A hierarquia de conteúdo da página é definida por sua lógica não pelo tamanaho do texto. [17]

Use elementos de título h1 h2 h3 para apresentar o conteúdo. [17]

Não pular níveis lógicos.

Toda página contem um título h1 descrevendo a página. [17][19]

Tabela

Use o table para elementos em formato de tabela. [4]

Insira cabeçalhos para explicar os dados, use th com scope correto. [15]

Use o captione lemento para fornecer um título para a tabela. [17]

Não usar tabelas para layout.

Modais

Deve ser fácil fechar. [19]

Permiti o uso da tecla escape ESC. [19]

A interação é uma tarefa simples. [19]

Evita modais em tela cheia. [19]

Não abrir um modal a partir de outro modal. [19]

Gerenciar foco corretamente dentro do modal.

Dispositivo Móvel e tocável

O site pode ser rotacionado para qualquer orientação. [14]

Impedir rolgem horizontal. [15]

Garantir que botões e links possam ser ativados facilmente. [16]

Garantir espaço suficiente entre elementos interativos. [7]

Garantir acessibilidade para gestos de toque.

Ferramentas e extras

Permiti pausar, parar ou ocultar conteúdo em movimento.

Usar Breadcrumbs informando a localização atual nas páginas.

Colocar página ou área de esclarecimento de dúvidas e dicas de acessibilidade.

Áreas clicáveis com no mínimo 44px (pixels) de altura e 44px de largura.

No caso de captcha garanta que seja simples de entender e tenha alternativas para pessoas com deficiência.

Incluir um campo de busca.

Indicar idioma principal da página com lang="" na tag <html>.

Referências Bibliográficas

1. WCAG 2.2 Understanding Docs. SC 1.1.1 Non-text Content (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html. Acesso em: 9 Mai. 2024.

2. WCAG 2.2 Understanding Docs. SC 1.2.2 Captions (Prerecorded) (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded.html. Acesso em: 9 Mai. 2024.

3. WCAG 2.2 Understanding Docs. SC 2.3.1 Three Flashes or Below Threshold (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html. Acesso em: 9 Mai. 2024.

4. WCAG 2.2 Understanding Docs. SC 1.3.1 Info and Relationships (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html. Acesso em: 9 Mai. 2024.

5. WCAG 2.2 Understanding Docs. SC 1.4.1 Use of Color (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html. Acesso em: 9 Mai. 2024.

6. WCAG 2.2 Understanding Docs. SC 2.4.7 Focus Visible (Level AA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html. Acesso em: 9 Mai. 2024.

7. WCAG 2.2 Understanding Docs. SC 2.4.1 Bypass Blocks (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html. Acesso em: 9 Mai. 2024.

8. WCAG 2.2 Understanding Docs. G201 Giving users advanced warning when opening a new window. Disponível em: https://www.w3.org/WAI/WCAG22/Techniques/general/G201. Acesso em: 9 Mai. 2024.

9. WCAG 2.2 Understanding Docs. SC 3.2.2 On Input (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/on-input.html. Acesso em: 9 Mai. 2024.

10. WCAG 2.2 Understanding Docs. SC 1.3.5 Identify Input Purpose (Level AA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html. Acesso em: 9 Mai. 2024.

11. WCAG 2.2 Understanding Docs. SC 3.3.1 Error Identification (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html. Acesso em: 9 Mai. 2024.

12. WCAG 2.2 Understanding Docs. SC 1.4.2 Audio Control (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/audio-control.html. Acesso em: 9 Mai. 2024.

13. WCAG 2.2 Understanding Docs. SC 2.1.1 Keyboard (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html. Acesso em: 9 Mai. 2024.

14. WCAG 2.2 Understanding Docs. SC 1.3.4 Orientation (Level AA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/orientation.html. Acesso em: 9 Mai. 2024.

15. WCAG 2.2 Understanding Docs. SC 1.3.1 Info and Relationships (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html. Acesso em: 9 Mai. 2024.

16. WCAG 2.2 Understanding Docs. SC 1.4.10 Reflow (Level AA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/reflow.html. Acesso em: 9 Mai. 2024.

17. WCAG 2.2 Understanding Docs. SC 2.4.6 Headings and Labels (Level AA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html. Acesso em: 9 Mai. 2024.

18. WCAG 2.2 Understanding Docs. SC 2.5.5 Target Size (Enhanced) (Level AAA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html. Acesso em: 9 Mai. 2024.

19. GUIA DE BOAS PRÁTICAS PARA ACESSIBILIDADE DIGITAL. Disponível em: https://www.gov.br/governodigital/pt-br/acessibilidade-e-usuario/acessibilidade-digital/guiaboaspraaticasparaacessibilidadedigital.pdf. Acesso em: 9 Mai. 2024.

Bibliografia

ABNT NBR 17225:2025, Acessibilidade em conteúdo e aplicações web – Requisitos. Disponível em: https://mwpt.com.br/wp-content/uploads/2025/04/ABNT-NBR-17225-Acessibilidade-Digital.pdf. Acesso em: 03 Jun. 2025.

DINIZ, V.; FERRAZ, R.; NASCIMENTO, C. M.; CREDIDIO, R. Guia de Boas Práticas para Acessibilidade Digital. Programa de Cooperação entre Reino Unido e Brasil em Acesso Digital, 2023. Disponível em: https://www.gov.br/governodigital/pt-br/acessibilidade-e-usuario/acessibilidade-digital/guiaboaspraaticasparaacessibilidadedigital.pdf. Acesso em: 9 Mai. 2024.