{
  "$type": "site.standard.document",
  "canonicalUrl": "https://brunopulis.com/blog/2022/2022-06-23-como-criar-graficos-acessiveis",
  "path": "/blog/2022/2022-06-23-como-criar-graficos-acessiveis",
  "publishedAt": "2022-06-23T00:00:00.000Z",
  "site": "at://did:plc:jtwk3253wycggbzl3sr7b6gi/site.standard.publication/3mpu4cswflk2h",
  "tags": [
    "a11y"
  ],
  "textContent": "Gráficos, mapas e infográficos estão presentes em nossas vidas, mas é quando essas informações não estão acessíveis?\n\nPessoas com deficiência, não conseguem compreender eles devido a falta de acessibilidade.\nNesse artigo, vou te mostrar duas técnicas que podem melhorar isso.\n\nVamos lá?\n\nO que são imagens complexas?\n\nSão representações visuais que contêm informações que não podem ser transmitidas através de uma sentença ou frase curta, como por exemplo:\n\n- fluxogramas;\n- organogramas;\n- diagramas e ilustrações em que o texto da página depende da capacidade do usuário de compreender a imagem;\n- infográficos;\n- mapas mostrando locais ou outras informações como sistemas climáticos;\n- os famosos CAPTCHAs.\n\nNesses cenário o atributo ALT não funciona bem, Dessa forma precisamos encontrar outras soluções.\nEscrevi um guia completo sobre como escrever textos alternativos.\n\nCriando gráficos acessíveis\n\nComo exemplo, vou usar o gráfico da pesquisa WebAim Million. Seu objetivo é mostrar os erros de acessibilidade das páginas na web.\n\nPara criar gráficos acessíveis, podemos usar duas técnicas: tabelas semânticas e atributos ARIA.\n\nSolução 1: usando tabelas\n\nEssa solução é simples, basicamente vamos representar o gráfico em uma tabela HTML. Vale lembrar que marcar a tabela de forma semântica é importante.\n\nDevemos colocar a tabela logo abaixo do gráfico, leitores de tela leem o HTML por ordem de declaração no DOM.\n\nDessa forma, usuários de leitores de tela terão várias formas de acesso, possibilitando assim, a navegabilidade nas informações.\n\nVamos usar duas abordagens com tabelas, a primeira será manter ela visível para todos, e a segunda exibiremos somente para os leitores de tela.\n\nExibindo a tabela\n\nPara fins didáticos vou considerar somente o erro de baixo contraste e texto alternativo no exemplo. A estrutura HTML da nossa tabela será da seguinte forma:\n\nDetalhe importante estou usando o atributo <strong><em>scope</em></strong>, ele define o cabeçalho de uma coluna ou linha. Iremos usar os seguintes valores:\n\n- row: o cabeçalho refere-se a todas as células da linha a que pertence;\n- col: o cabeçalho refere-se a todas as células da coluna a que pertence.\n\nQuando navegamos com o leitor de telas ele identifica esses atributos e conseguimos ter uma navegação mais linear e fluída dentro da tabela.\n\nOcultando tabela visualmente\n\nA única diferença da tabela anterior é uso de uma classe CSS para ocultar a tabela visualmente, dessa forma somente o leitor de tela irá consumir a informação.\n\nSolução 2: usando atributos ARIA\n\nOutra técnica interessante é utilizar o atributo _aria-describedby_, ele é utilizado para estabelecer um relacionamento entre _widgets_ ou grupos e o texto que o descreve.\n\nTambém pode ser usado uma sequência de ids ou somente um. Ele não está limitado a controles de formulários. Pode ser usado em contextos globais dentro de um documento HTML.\n\nCom o aria-describedby aplicado, o leitor de telas irá ler o atributo alt e logo após será direcionado ao conteúdo da <div> que contém o ID com valor de _description_.\n\nDessa forma as duas informações se complementam e conseguimos passar uma informação com maior relevância para todos os usuários.\n\nConclusão\n\nPercebemos que as adequações de acessibilidade para tornar a experiência mais acessível são simples. Entretanto, vale salientar que essas são algumas de várias soluções que podemos utilizar.\n\nTanto as tabelas como os atributos ARIA tem suas vantagens, devemos olhar o nosso contexto e tentar adequar a nossa realidade.\n\nMe conte nos comentários as dificuldades que já teve nesse tema.\n\nReferências\n\n- https://accessibility.psu.edu/images/charts/\n- https://www.w3.org/TR/WCAG21/#text-alternatives\n- https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html\n- https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111#non-text-content\n- https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html\n- https://www.w3.org/WAI/WCAG21/Techniques/general/G95.html#examples\n- https://www.w3.org/WAI/WCAG21/Techniques/general/G73\n- https://webaim.org/projects/million/\n- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby\n- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th",
  "title": "Como criar gráficos acessíveis"
}