Skip to main content

Desenvolvimento Web

0%
Progresso de Conclusão (0 / 64)

Imagens​

  • Existe alt para imagens, botões-imagem, gráficos e imagens de mapas com pontos de acesso. [1]
  • Existe alt="" para imagens decorativas que não tem significado. [1]
  • Incluir a descrição no alt para imagens que contém texto. [1]
  • Existe contraste adequado entre texto da imagem e plano de fundo. [18]
  • Pouca presença de textos com fontes muito pequenas dentro da imagem. [18]

Vídeos​

  • Existe legenda para áudio nos vídeos. [2]
  • Evitar conteúdo com flashes (gatilhos para convulsões) ou manter abaixo dos limites. [3]
  • Existe transcrição textual para conteúdos em áudio. [1]

Controles​

  • Os links possuem href correto. [4]
  • Existe underline nos links. [5]
  • Existe estados de foco em campos de entrada, botões, e elementos interativos. [6]
  • O foco do teclado é visível e lógico em toda a navegação. [6]
  • Existe a navegação skip-link (link para pular) para o conteúdo principal. [7]
  • Os links que levam à outra página são identificados e indicados. [8]
  • Todos os botões tem nome acessível (type="button", type="submit"). [4]

Formulário​

  • Os campos de entrada possuem label associadas ao elemento correspondente. [4]
  • Agrupadores como <fildset> e <legend> foram usados para seção no formulário. [4]
  • Campos de entrada possuem autocomplete devidamente configurado. [10]
  • Exibe erros (errors) de entrada acima do formulário, após envio.
  • Existe aria-describedby para os campos de entrada.
  • Descrição clara de mensagem de erro e sucesso. [5]
  • Utilizar validação em tempo real acessível para indicar campos obrigatórios ou incorretos. [9]

Mídia​

  • O autoplay para vídeos e audios está desabilitado por padrão. [11]
  • Para todos os botões e entradas, existe type válido. [4]
  • Existe pausa para todas as mídias. [11]
  • Existe transcrição para audios. [1]

Semântica​

  • HTML tem uso nativo dos componentes header, nav, main, .... [4] [14]
  • A hierarquia dos componentes segue um fluxo lógico.
  • As descrições podem ser facilmente compreendidas. [16]
  • Os componentes possuem textos claros e objetivos. [16]
  • Tabelas são usadas apenas para dados tabulares. [4]

Texto​

  • Evitar o uso de textos dentro de imagens. [1]
  • Os textos na página podem ser redimensionados sem perda de conteúdo, aumentando o zoom em até 200%. [15]
  • As fontes tem seu tamanho relativo (em, rem) e não fixo (px). [15]

Teclado​

  • Funcionalidades da página web estão disponíveis por teclado. [12]
  • Em componentes com mouseover é permitido o uso de teclado. [12]
  • Foram evitados armadilhas de foco ( Um foco que não sai de um modal). [12]
  • Uso de .hover, .focus para tornar o foco visível. [6]
  • Permite o uso de Atalhos de teclado como o TAB. [12]
  • Primeiro item interativo da página é um link para o conteúdo principal. [7]
  • Existe ordem lógica de navegação por teclado. [12]

Título​

  • A hierarquia de conteúdo da página é definida por sua lógica e não pelo tamanho do texto. [16]
  • Use elementos de título h1 h2 h3 para apresentar o conteúdo. [16]
  • Não pular níveis lógicos. [16]
  • Toda página contem um título h1 descrevendo a página. [16]

Tabela​

  • Elementos em formatos de tabela usam table. [4]
  • Uso de th com scope correto. [4]
  • Uso do caption para fornecer uma legenda descritiva para a tabela. [4] [16]
  • Não usar tabelas para layout. [4]

Modais​

  • São fáceis de achar. [18] [NBR]
  • Permite o uso da tecla escape ESC. [12] [18] [NBR]
  • A interação é uma tarefa simples. [18] [NBR]
  • Evita modais em tela cheia. [18] [NBR]
  • Não abrir um modal a partir de outro modal. [18] [NBR]
  • Gerenciar foco corretamente dentro do modal. [12] [NBR]

Dispositivo Móvel e tocável​

  • O site pode ser rotacionado para qualquer orientação. [13] [14] [NBR]
  • Impedir rolgem horizontal. [15] [NBR]
  • Botões e links possam ser ativados facilmente. [17]
  • Existe espaço suficiente entre elementos interativos. [17]
  • Exite acessibilidade para gestos de toque. [NBR]

Ferramentas e extras​

  • Permite 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. [18] [NBR]
  • Áreas clicáveis com no mínimo 44px (pixels) de altura e 44px de largura. [17]
  • O captcha é simples e tem alternativas para pessoas com deficiência. [18] [NBR]
  • Incluir um campo de busca. [18] [NBR]
  • Indicar idioma principal da página com lang="" na tag <html>. [18] [NBR]

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 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.

[12] 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.

[13] 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.

[14] 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.

[15] 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.

[16] 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.

[17] 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.

[18] 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.

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

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.