Geração de conteúdo

"Para produzir conteúdo digital acessível, a primeira etapa é compreender que tudo o que comunicamos impacta as pessoas; por isso, é fundamental começar pela forma como abordamos nosso público e criar a cultura e o hábito de acessibilidade digital em nossas equipes". Nesse sentido, nesta seção se apresentam boas práticas em formato de checklist para garantir acessibilidade na geração de conteúdo.

Termos

  • Sempre utilize o termo "pessoas com deficiência" (PCD) e depois complemente: visual, física, intelectual, múltipla, pessoa surda, pessoa cega, usuária de cadeira de rodas (cadeirante), tetraplégica, paraplégica, pessoa com nanismo, com baixa visão, pessoa autista, disléxica, neurodiversa ou neurodivergente. [20]

Textos

  • Usar textos descomplicados e objetivos. [21]
  • Usar de palavras conhecidas. [22]
  • Evitar figuras de linguagem e frases com "senso de urgência". [23]
  • Usar pontuação adequada. [24]
  • Evitar frases extensas (ideal é ter de 15 a 20 palavras). [25]
  • Usar preferencialmente a ordem direta nas orações. [26]
  • Utilizar uma linguagem simples, com clareza na estrutura e no design, para que leitores consigam facilmente encontrar e entender a informação. [27]

Descrição de imagens

  • Identificar o tipo de imagem e personagem (foto, ilustração, mapa, gráfico... e "o que / quem"). [28]
  • Localizar (onde). [29]
  • Descrever a ação (o que faz, como faz). [30]
  • Referenciar. [31]
  • Texto Alternativo para Imagens: As imagens que carregam informações relevantes para o conteúdo devem ser descritas de forma precisa, com textos alternativos programaticamente associados. Isso permite que tecnologias assistivas, como leitores de tela, transmitam a informação corretamente aos usuários com deficiência visual. [32]

Descrição de imagens complexas

  • Posicionar gráfico, quadrinhos, quadros e outras imagens complexas em um local separado. [33]
  • Descrição sucinta no texto alternativo. [34]
  • Imagens Complexas: Quando as imagens contêm informações substanciais, como gráficos ou diagramas, a descrição deve ser detalhada e posicionada em uma área visível ou vinculada de forma clara. Evite descrever imagens complexas de forma vaga. [35]

Ícones

  • Adicionar iconografia. [36]
  • Adicionar ícone e texto. [37]
  • Adicionar texto alternativo para ícones clicáveis. [38]
  • Descrever no texto alternativo, quando necessário, a ação da pessoa usuária e para onde será direcionada. [39]
  • Ícones Clicáveis: Todos os ícones clicáveis devem ter texto alternativo que descreva sua funcionalidade e para onde ele redireciona o usuário, garantindo que os usuários de tecnologias assistivas possam entender sua função corretamente. [40]

Mídias de vídeo

  • Adicionar descritivo curto para vídeos. [41]
  • Optar por legendas: Open Caption e Closed Caption para vídeos. [42]
  • Incluir audiodescrição, especialmente em vídeos com conteúdo visual importante. [43]
  • Vídeos: Todo conteúdo de vídeo, incluindo materiais multimídia, deve ser acompanhado de audiodescrição e legendas descritivas, garantindo que as informações sejam compreendidas por pessoas com deficiência auditiva ou visual. [44]

Autodescrição

  • Adicionar autodescrição no roteiro dos vídeos. [45]
  • Autodescrição: Para vídeos e outros conteúdos multimodais, a autodescrição deve ser integrada ao conteúdo, especialmente se envolver pessoas ou cenas com informações essenciais para o entendimento do conteúdo. [46]

Podcasts

  • Transcrever o conteúdo do episódio. [47]
  • Incluir além das partes faladas, como sons de fundo, efeitos sonoros, quem está falando, etc. [48]
  • Inserir um avatar na página falada para a interpretação do texto transcrito para Libras. [49]
  • Considerar também formato de vídeo. [50]
  • Transcrição de Podcasts: É obrigatório transcrever não apenas as falas, mas também sons de fundo e efeitos sonoros, para que o conteúdo seja acessível a pessoas com deficiência auditiva. [51]

Hashtags e Emojis

  • Em hashtags, utilize a primeira letra de cada palavra em maiúsculas para que leitores possam identificar palavras corretamente. [52]
  • Não abusar de emojis, pois nem sempre sua descrição é suficiente para um bom entendimento. [53]
  • Emojis e Hashtags: O uso de emojis deve ser moderado, e é essencial que a descrição fornecida para os mesmos seja clara o suficiente para que o conteúdo seja entendido de forma precisa. As hashtags devem seguir o padrão de uso de maiúsculas para garantir que as palavras sejam facilmente reconhecidas. [54]
  • Descrição de links e botões devem ser compreensíveis de maneira isolada. [55]
  • Links Acessíveis: Cada link deve ser identificado com um nome acessível que indique claramente seu destino ou a ação que será realizada, sem a necessidade de contexto adicional. [56]

Novas Seções Baseadas na ABNT NBR 17225:2025

Acessibilidade de Navegação

  • Teclado: Garantir que todos os conteúdos e funcionalidades da página sejam acessíveis apenas pelo teclado, sem a necessidade de dispositivos apontadores (como o mouse), utilizando mecanismos adequados de navegação por teclado. [57]
  • Foco Visível: Adicionar indicadores de foco visível para todos os elementos interativos. Isso facilita a navegação para pessoas que não utilizam o mouse ou dependem de teclados e tecnologias assistivas. [58]
  • Evitar Armadilhas de Foco: Garantir que o foco não seja preso ou direcionado para elementos que dificultem a navegação do usuário. Isso é crucial para a acessibilidade de usuários que navegam apenas com o teclado. [59]

Acessibilidade de Imagens e Mídias

  • Texto Alternativo: Para todas as imagens que contêm informação ou funcionalidade, deve-se adicionar texto alternativo descritivo, tornando essas imagens acessíveis a tecnologias assistivas como leitores de tela. [60]
  • Imagens de Texto: Evitar o uso de imagens de texto, ou, se necessário, garantir que o texto da imagem seja duplicado em formato de texto acessível, para que os usuários com deficiência visual possam compreender o conteúdo sem dificuldades. [61]
  • Texto de Links: O texto dos links deve ser descritivo e indicar claramente seu destino ou ação, para que usuários de tecnologias assistivas possam compreender a função do link sem precisar de contexto adicional. [62]
  • Navegação Consistente: Garantir que todos os elementos de navegação se mantenham consistentes ao longo das páginas, evitando confusão para o usuário. [63]

Acessibilidade de Formulários e Botões

  • Rótulos de Campo: Cada campo de formulário deve ter um rótulo claro e visível associado, com uma descrição que permita a compreensão completa da sua função. [64]
  • Botões Acessíveis: Todos os botões e controles interativos devem ser descritos com texto alternativo ou rótulos de maneira que qualquer pessoa, incluindo as que utilizam tecnologias assistivas, saiba qual ação eles realizarão. [65]

Acessibilidade de Cores e Contraste

  • Contraste de Cores: Garantir que o contraste entre texto e fundo seja suficiente para que os usuários com baixa visão ou dificuldades de percepção de cores possam ler o conteúdo sem dificuldade. A ABNT recomenda que o contraste mínimo seja de 4,5:1 para texto normal e 3:1 para texto grande. [66]
  • Evitar o Uso Exclusivo de Cores: As cores não devem ser usadas isoladamente para transmitir informações importantes, pois isso pode prejudicar pessoas com deficiências de percepção de cores. [67]

Novidades Específicas do WCAG 2.2 - Checklist

  1. Critério 2.4.7: Visibilidade do Foco (Foco Visível)

  2. Adicionar indicadores de foco visível em elementos interativos. [68]

  3. Critério 1.4.13: Conteúdo de Mídia Simples (Simplified Media Content)

  4. Oferecer versões simplificadas de vídeos ou outros conteúdos interativos para facilitar a compreensão de usuários com deficiências cognitivas ou visuais. [69]

  5. Critério 2.5.1: Alternativas de Input (Input Modalities)

  6. Permitir que os usuários interajam com a página por métodos alternativos como entrada por voz ou gestos. [70]

  7. Critério 3.3.7: Sugestões de Correção de Erros

  8. Fornecer sugestões claras para a correção de erros em formulários. [71]

  9. Critério 4.1.3: Status de Componentes de Interface

  10. Garantir que o status de qualquer componente interativo seja acessível e informado corretamente aos usuários. [72]

Novidades Específicas do Guia Brasil-Reino Unido - Checklist

  1. Teclado e Foco Visível
  2. Garantir que todas as funcionalidades da página sejam acessíveis via teclado. [73]

  3. Incluir indicadores visíveis de foco, especialmente para usuários que dependem de navegação por teclado. [74]

  4. Textos e Linguagem Simples

  5. Usar linguagem simples e clara em toda a comunicação, evitando termos técnicos ou complexos que possam dificultar a compreensão. [75]

  6. Contraste de Cores

  7. Assegurar que o contraste de cores seja suficiente para que o texto seja legível para pessoas com baixa visão. [76]

  8. Descrição de Imagens e Elementos Visuais

  9. Sempre adicionar texto alternativo a imagens importantes para garantir que todos os usuários compreendam as informações visuais. [77]

  10. Navegação Consistente e Acessível

  11. Manter uma estrutura de navegação consistente, com links e botões acessíveis e com texto descritivo, que possa ser facilmente compreendido por usuários com tecnologias assistivas. [78]

Checklists de Conteúdo - Guia de Boas Práticas para Acessibilidade Digital

Conteúdo

  • Usar a terminologia correta: Sempre usar a terminologia atualizada e respeitosa, como "pessoas com deficiência (PcD)". [79]
  • Texto claro e objetivo: Evitar ambiguidades e criar textos claros, simples e objetivos para facilitar a compreensão. [80]
  • Textos alternativos em imagens: Garantir que todas as imagens que contenham informações importantes tenham texto alternativo apropriado. [81]
  • Evitar usar texto dentro de imagens: Quando possível, evitar a prática de colocar texto em imagens para garantir que o conteúdo seja acessível aos leitores de tela. [82]
  • Incluir legendas e transcrição para áudio e vídeo: Garantir que vídeos e conteúdos audiovisuais sejam acessíveis por meio de legendas e transcrição. [83]

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

ABNT. NBR 17225:2025 – Acessibilidade em interfaces digitais baseadas em web. Rio de Janeiro, 2025.

Referências Bibliográficas

20. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 15. Terminologia adequada para pessoas com deficiência.

21. WCAG 2.2 Understanding Docs. SC 3.1.5 Reading Level (Level AAA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/reading-level.html. Acesso em: 23 jun. 2025.

22. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 18. Uso de palavras conhecidas e familiares.

23. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 19. Evitar figuras de linguagem complexas.

24. ABNT NBR 17225:2025, item 5.4.2 – Pontuação adequada para clareza textual.

25. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 17. Frases com 15-20 palavras para melhor compreensão.

26. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 17. Ordem direta nas orações.

27. WCAG 2.2 Understanding Docs. SC 3.1.3 Unusual Words (Level AAA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/unusual-words.html. Acesso em: 23 jun. 2025.

28. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 22. Identificação de elementos visuais.

29. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 22. Localização espacial na descrição.

30. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 22. Descrição de ações e comportamentos.

31. ABNT NBR 17225:2025, item 5.3.1 – Referenciamento adequado de elementos.

32. 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: 23 jun. 2025.

33. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 23. Posicionamento de imagens complexas.

34. WCAG 2.2 Understanding Docs. SC 1.1.1 Non-text Content (Level A). Texto alternativo sucinto para imagens complexas.

35. WCAG 2.2 Understanding Docs. SC 1.1.1 Non-text Content (Level A). Descrição detalhada de imagens complexas.

36. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 24. Uso de iconografia acessível.

37. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 24. Combinação de ícone e texto.

38. WCAG 2.2 Understanding Docs. SC 1.1.1 Non-text Content (Level A). Texto alternativo para ícones interativos.

39. ABNT NBR 17225:2025, item 5.8.4 – Descrição da funcionalidade de elementos interativos.

40. WCAG 2.2 Understanding Docs. SC 4.1.2 Name, Role, Value (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html. Acesso em: 23 jun. 2025.

41. WCAG 2.2 Understanding Docs. SC 1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A). Descrição curta para vídeos.

42. 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: 23 jun. 2025.

43. WCAG 2.2 Understanding Docs. SC 1.2.5 Audio Description (Prerecorded) (Level AA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/audio-description-prerecorded.html. Acesso em: 23 jun. 2025.

44. WCAG 2.2 Understanding Docs. SC 1.2.1 Audio-only and Video-only (Prerecorded) (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/audio-only-and-video-only-prerecorded.html. Acesso em: 23 jun. 2025.

45. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 26. Autodescrição em vídeos.

46. ABNT NBR 17225:2025, item 5.7.2 – Autodescrição em conteúdo multimodal.

47. WCAG 2.2 Understanding Docs. SC 1.2.8 Media Alternative (Prerecorded) (Level AAA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/media-alternative-prerecorded.html. Acesso em: 23 jun. 2025.

48. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 27. Transcrição completa de podcasts.

49. ABNT NBR 17225:2025, item 5.7.3 – Interpretação em Libras para conteúdo de áudio.

50. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 28. Formatos alternativos para podcasts.

51. WCAG 2.2 Understanding Docs. SC 1.2.8 Media Alternative (Prerecorded) (Level AAA). Transcrição completa.

52. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 31. Formatação de hashtags para leitores de tela.

53. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 32. Uso moderado de emojis.

54. ABNT NBR 17225:2025, item 5.4.5 – Descrição adequada de elementos gráficos em texto.

55. WCAG 2.2 Understanding Docs. SC 2.4.4 Link Purpose (In Context) (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html. Acesso em: 23 jun. 2025.

56. WCAG 2.2 Understanding Docs. SC 2.4.9 Link Purpose (Link Only) (Level AAA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-link-only.html. Acesso em: 23 jun. 2025.

57. 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: 23 jun. 2025.

58. 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: 23 jun. 2025.

59. WCAG 2.2 Understanding Docs. SC 2.1.2 No Keyboard Trap (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/no-keyboard-trap.html. Acesso em: 23 jun. 2025.

60. 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: 23 jun. 2025.

61. WCAG 2.2 Understanding Docs. SC 1.4.5 Images of Text (Level AA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html. Acesso em: 23 jun. 2025.

62. WCAG 2.2 Understanding Docs. SC 2.4.4 Link Purpose (In Context) (Level A). Texto descritivo de links.

63. WCAG 2.2 Understanding Docs. SC 3.2.3 Consistent Navigation (Level AA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/consistent-navigation.html. Acesso em: 23 jun. 2025.

64. 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: 23 jun. 2025.

65. WCAG 2.2 Understanding Docs. SC 4.1.2 Name, Role, Value (Level A). Botões acessíveis.

66. WCAG 2.2 Understanding Docs. SC 1.4.3 Contrast (Minimum) (Level AA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html. Acesso em: 23 jun. 2025.

67. 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: 23 jun. 2025.

68. WCAG 2.2 Understanding Docs. SC 2.4.7 Focus Visible (Level AA). Novidade WCAG 2.2.

69. WCAG 2.2 Understanding Docs. SC 1.4.13 Content on Hover or Focus (Level AA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html. Acesso em: 23 jun. 2025.

70. WCAG 2.2 Understanding Docs. SC 2.5.1 Pointer Gestures (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/pointer-gestures.html. Acesso em: 23 jun. 2025.

71. WCAG 2.2 Understanding Docs. SC 3.3.3 Error Suggestion (Level AA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/error-suggestion.html. Acesso em: 23 jun. 2025.

72. WCAG 2.2 Understanding Docs. SC 4.1.3 Status Messages (Level AA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html. Acesso em: 23 jun. 2025.

73. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 33. Funcionalidades acessíveis por teclado.

74. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 34. Indicadores de foco visível.

75. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 16. Linguagem simples e clara.

76. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 35. Contraste adequado de cores.

77. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 36. Texto alternativo para imagens.

78. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 37. Navegação consistente e acessível.

79. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 15. Terminologia adequada e respeitosa.

80. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 18. Texto claro e objetivo.

81. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 22. Texto alternativo para imagens.

82. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 50. Evitar texto em imagens.

83. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 26. Legendas e transcrição para mídia.

Histórico de Versões

Versão Descrição Autor(es) Data Revisor(es) Data de revisão
1.0 Adição de WCAG 2.2, conformidade ABNT NBR 17225:2025 e itens sobre o guia Brasil - Reino Unido Gabriel Lopes 17/06/2025 Uires Carlos 17/06/2025
1.1 Correção e Adicionando mais itens em conformidade WCAG 2.2 e ABNT NBR 17225:2025 Taynara Vitorino 23/06/2025 Gabriel Lopes 23/06/2025
1.2 Adicionando mais itens sobre a ABNT NBR 17225:2025 Uires Carlos 23/06/2025 Gabriel Lopes 23/06/2025