{"id":2512,"date":"2019-03-20T10:42:53","date_gmt":"2019-03-20T13:42:53","guid":{"rendered":"http:\/\/blog.handtalk.me\/?p=2512"},"modified":"2024-02-06T16:41:03","modified_gmt":"2024-02-06T19:41:03","slug":"acessibilidade-daltonicos","status":"publish","type":"post","link":"https:\/\/www.handtalk.me\/br\/blog\/acessibilidade-daltonicos\/","title":{"rendered":"Como tornar o seu site acess\u00edvel para dalt\u00f4nicos"},"content":{"rendered":"

O que \u00e9 ser dalt\u00f4nico, afinal? De acordo com uma defini\u00e7\u00e3o mais abrangente, daltonismo consiste em um dist\u00farbio de vis\u00e3o que afeta a percep\u00e7\u00e3o das cores.<\/strong> Mas\u00a0como, exatamente, essas pessoas enxergam?<\/a><\/span> Dentre muitas varia\u00e7\u00f5es, existem tr\u00eas que s\u00e3o mais comuns: a protanomalia, a deuteranomalia, e a tritanomalia. Esses dist\u00farbios consistem na aus\u00eancia de percep\u00e7\u00e3o do vermelho, do verde e do azul, respectivamente.<\/p>\n

Assim, o daltonismo n\u00e3o \u00e9 uma defici\u00eancia homog\u00eanea, e pensar a acessibilidade para essa popula\u00e7\u00e3o requer detalhes espec\u00edficos. Dependendo da escolha de cores que voc\u00ea fizer para montar o seu layout, ou para destacar algumas informa\u00e7\u00f5es do seu texto, o conte\u00fado pode ficar inacess\u00edvel.<\/p>\n

O recomendado pela cartilha de acessibilidade na web<\/a><\/span>, quando trata-se dessa defici\u00eancia, \u00e9 nunca transmitir informa\u00e7\u00f5es somente por meio de cores<\/strong>. Nesse texto separamos algumas dicas que v\u00e3o te ajudar a entender como fazer isso!<\/p>\n

Coloque-se no lugar!<\/h3>\n

Algumas ferramentas podem simular a vis\u00e3o de uma pessoa com aus\u00eancia de percep\u00e7\u00e3o das cores. No ColorBlind<\/a>,<\/span> basta digitar a sua URL e voc\u00ea ter\u00e1 uma no\u00e7\u00e3o pr\u00e1tica de como um dalt\u00f4nico enxergaria o seu site. L\u00e1 existe a possibilidade, ainda, de selecionar os diferentes tipos de daltonismo – o que \u00e9 \u00f3timo para ter uma no\u00e7\u00e3o ainda mais completa.<\/p>\n

Uma outra tecnologia presente no mercado \u00e9 o aplicativo Chromatic Vision Simulator<\/a>.<\/span> Ele utiliza a c\u00e2mera do celular para capturar o ambiente e faz simula\u00e7\u00f5es de como aquela imagem seria vista por pessoas dalt\u00f4nicas.<\/p>\n

Aten\u00e7\u00e3o \u00e0s imagens!<\/h3>\n

Muitas vezes, o conte\u00fado de uma imagem pode ser muito importante para a compreens\u00e3o\u00a0total da mensagem que est\u00e1 sendo transmitida. Por isso, na hora de fazer gr\u00e1ficos<\/a> ou de vender produtos, algumas medidas precisam ser tomadas para que pessoas com daltonismo tenham acessibilidade.<\/p>\n

No caso dos gr\u00e1ficos de setores<\/a><\/span>, apenas diferenciar cada sess\u00e3o pelas cores \u00e9 insuficiente<\/strong>. Por isso, \u00e9 recomendado que cada segmento venha com a descri\u00e7\u00e3o. Com rela\u00e7\u00e3o \u00e0 outros tipo de gr\u00e1fico, como tabelas e diagramas, a dica \u00e9 escolher as cores depois de utilizar os simuladores j\u00e1 citados acima.<\/p>\n

Uma outra quest\u00e3o pela qual passam as pessoas com daltonismo est\u00e1 ligada \u00e0 venda de produtos. Apenas olhar para uma foto n\u00e3o \u00e9 o bastante na hora de tomar uma decis\u00e3o de compra<\/strong>. Pensando em mudar isso, algumas empresas est\u00e3o escrevendo quais as cores das mercadorias, para que assim fique poss\u00edvel fazer a distin\u00e7\u00e3o.<\/p>\n

Exemplos tantos de gr\u00e1ficos, como de produtos com descri\u00e7\u00e3o de cor,\u00a0voc\u00ea pode ver nesse link.<\/a><\/span><\/p>\n

\"Imagem<\/a><\/p>\n

Para construir um texto acess\u00edvel<\/h3>\n

Apesar de as imagens serem a maior barreira na hora de construir um site acess\u00edvel para dalt\u00f4nicos,\u00a0a formata\u00e7\u00e3o de um texto pode, muitas vezes, n\u00e3o funcionar para todas as pessoas<\/span><\/a>.\u00a0Em muitos casos, a fonte escolhida ou a maneira de destacar uma informa\u00e7\u00e3o podem tornar o conte\u00fado confuso, j\u00e1 que n\u00e3o raro um dalt\u00f4nico n\u00e3o percebe a diferen\u00e7a entre uma cor e outra. Para solucionar esse problema, duas dicas muito simples podem ser bastante \u00fateis:<\/p>\n