Ir para o conteúdo

Desenvolvimento

"Nessa fase, é importante garantir que a equipe de desenvolvimento saiba como implementar acessibilidade, verificá-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 deficiência usam os sítios web e aplicativos". Nesse caso, foram incluídas técnicas relacionadas ao desenvolvimento e também formas de verificar.

Metadados e Estrutura

  • Validar <meta name="description"> descritiva em cada página (NBR 17060: item 5.1)
  • Incluir <link rel="help" href="acessibilidade.html"> para página de acessibilidade (NBR 17060: item 5.2)
  • Verificar atributo lang com variação regional (pt-BR) (NBR 17060: item 5.3)

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]
  • Assegurar proporção mínima para ampliação sem perda de qualidade (NBR 17060: item 6.1)
  • Limitar o texto alternativo a, no máximo, 125 caracteres (NBR 17060: item 6.2)

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]
  • Fornecer controle de velocidade e avanço/retrocesso (NBR 17060: item 12.3)
  • Oferecer legendas em português brasileiro e local (NBR 17060: item 12.4)
  • Indicar links já visitados com contraste distinto (NBR 17060: item 7.1)
  • Validar acessibilidade de menus dropdown via ARIA e teclado (NBR 17060: item 7.2)

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]

Formulário

  • Adicionar label para os campos de entradas associadas ao elemento correspondente. [9]
  • Adicionar <fieldset> 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]
  • Permitir preenchimento por comando de voz (speech recognition) (NBR 17060: item 15.2)
  • Exibir exemplos de formato e máscara de entrada via aria-describedby (NBR 17060: item 15.3)

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 .

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]
  • Evitar cabeçalhos vazios e garantir texto significativo em <h*> (NBR 17060: item 4.5)
  • Usar aria-level em títulos dinâmicos (SPAs) (NBR 17060: item 4.6)

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]
  • Adicionar summary ou descrição longa para tabelas complexas (NBR 17060: item 15.4)

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]
  • Aprisionar o foco dentro do modal até seu fechamento (NBR 17060: item 19.3)

Dispositivo Móvel e tocável

  • O site pode ser rotacionado para qualquer orientação. [15]
  • Impedir rolagem horizontal. [16]
  • Garantir que botões e links possam ser ativados facilmente. [18]
  • Garantir espaço suficiente entre elementos interativos. [7]
  • Testar navegação com TalkBack e VoiceOver em mobile (NBR 17060: item 20.1)

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 .
  • Executar verificação com o Validador ABNT (e-MAG Checker) (NBR 17060: item 21)
  • Rodar AChecker no modo “WCAG 2.2 & ABNT” (NBR 17060: item 22)

Referência Bibliográfica

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 4.1.1 Orientation (Level). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/parsing.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 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.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html. Acesso em: 9 Mai. 2024.

1. ABNT NBR 17060:2022, item 5.1 – Definição de meta description descritiva em cada página. Disponível em: “Desenvolvida com coordenação do Ceweb.br, nova norma da ABNT estabelece requisitos para melhorar a acessibilidade de sites” :contentReference[oaicite:0]{index=0}

2. ABNT NBR 17060:2022, item 5.2 – Obrigatoriedade de link de ajuda/acessibilidade (“”). Normas da ABNT sobre acessibilidade em conteúdo e aplicações web. :contentReference[oaicite:1]{index=1}

3. ABNT NBR 17060:2022, item 5.3 – Atributo lang="pt-BR" com variação regional. “Norma da ABNT sobre acessibilidade para dispositivos móveis torna a navegação mais inclusiva” :contentReference[oaicite:2]{index=2}

4. WCAG 2.2 Understanding Docs. SC 1.1.1 Non-text Content (Level A) – Alternativas textuais para conteúdo não textual. Disponível em: W3C :contentReference[oaicite:3]{index=3}

5. WCAG 2.2 Understanding Docs. SC 1.2.2 Captions (Prerecorded) (Level A) – Legendas sincronizadas em vídeo. Disponível em: W3C :contentReference[oaicite:4]{index=4}

6. WCAG 2.2 Understanding Docs. SC 2.4.7 Focus Visible (Level AA) – Indicador de foco visível em todos os controles interativos. Disponível em: W3C :contentReference[oaicite:5]{index=5}

7. WCAG 2.2 Understanding Docs. SC 2.1.1 Keyboard (Level A) – Navegação completa via teclado. Disponível em: W3C :contentReference[oaicite:6]{index=6}

8. ABNT NBR 17060:2022, item 6.1 – Proporção mínima para ampliação de imagens sem perda de qualidade. Disponível em: Normas.com.br :contentReference[oaicite:7]{index=7}

Bibliografia

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.