Criar esquema de cores que contemple acessibilidade

[anapaulagomes]

No Brasil, 6,5 milhões de pessoas tem alguma deficiência visual e, segundo pesquisa em sites brasileiros feita pelo “Movimento Web para Todos”, dentre 14 milhões de sites apenas 0,74% são totalmente acessíveis (fontes abaixo).

Precisamos ter um design que tenha uma boa acessibilidade desde o início e que funcione com leitores de tela e demais ferramentas utilizadas por deficientes visuais para acesso a apps e sites.

Fontes: https://g1.globo.com/sp/mogi-das-cruzes-suzano/noticia/2020/06/11/deficientes-visuais-relatam-dificuldades-com-acessibilidade-na-internet-essencial-neste-periodo-de-isolamento.ghtml https://g1.globo.com/economia/tecnologia/noticia/2020/09/18/maioria-dos-aplicativos-populares-no-brasil-nao-possui-descricoes-para-deficientes-visuais.ghtml

[andrecostta]

Com a ferramenta "color.review" podemos trabalhar a acessibilidade com relação á cores de forma assertiva.

[anapaulagomes]

@matheusrocha89 como podemos avaliar melhor isso aqui?

[matheusrocha89]

@anapaulagomes Eu nunca fiz isso, mas vi que o lighthouse dá faz uma avaliações no nosso site em cada deploy e sugere uma melhoria nisso (https://app.netlify.com/sites/dadosabertosdefeira/deploys/64695373847df20008eb63b8).

Eu vou dar uma olhada em algo relacionado ao tema para saber melhor

[matheusrocha89]

@anapaulagomes eu vi a ferramenta "color review" citada pelo @andrecostta e fiz uma alterações no nosso código usando o resultado do LightHouse para melhorar e corrigir os contrastes para acessibilidade. Vou abrir um PR e fazer o link para essa issue.

Após as alterações conseguimos remover os erros nos contrastes do Lighthouse

[anapaulagomes]

Perfeito, @matheusrocha89! Brigadao! ❤️