Teste em Componentes
Esta é uma lista de componentes que podem ser integrados em sites utilizando a técnologia Tailwind. Foram dispostos diversos deles, das mais variadas cores para a realização do teste de recoloração do filtro.
É necessário que qualquer aplicação web esteja de acordo com a diretrizes da World Wide Web Consortium(W3C)e Web Content Accessibility Guidelines(WCAG), mas sabemos que boa parte das aplicações não seguem essas diretrizes. Nos componentes a seguir, iremos ver como seguir essas diretrizes é de extrema importância, com alguns deles não seguindo algumas regras, para caso sites não possuam ferramentas que auxiliem pessoas com daltonismo.
Cards
Muitos sites de notícias, como o globo.com, utiliza das cores para indicar o tipo de notícia. Devido a isso, pessoas com condição de daltonismo que frequentam esses tipos de site perdem informações visuais que são passadas através das cores.
A seguir temos alguns exemplos de cards de notícias com cores para transmitir informações. A partir deles, podemos ter uma noção de como pessoas com daltonismo podem confundir as cores.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod fugiat a eveniet id iusto saepe, voluptatem minima. Sed enim blanditiis possimus impedit corrupti consequatur ut atque exercitationem perspiciatis ad. Deleniti animi facere, perferendis nesciunt harum laboriosam, a autem odit ea doloremque quae quidem quaerat id quia aliquam suscipit rerum ad.
Política
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod fugiat a eveniet id iusto saepe, voluptatem minima. Sed enim blanditiis possimus impedit corrupti consequatur ut atque exercitationem perspiciatis ad. Deleniti animi facere, perferendis nesciunt harum laboriosam, a autem odit ea doloremque quae quidem quaerat id quia aliquam suscipit rerum ad.
Esportes
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod fugiat a eveniet id iusto saepe, voluptatem minima. Sed enim blanditiis possimus impedit corrupti consequatur ut atque exercitationem perspiciatis ad. Deleniti animi facere, perferendis nesciunt harum laboriosam, a autem odit ea doloremque quae quidem quaerat id quia aliquam suscipit rerum ad.
Cultura
Alerts
Outra forma muito comum de passar informações através das cores, é utilizando alertas em relação a ações realizadas em um site, que pode ocasionar o retorno de um status por uma API por exemplo.
Formulários
Cores em formulários também são uma das formas de passar informações ao usuário, como por exemplo, indicar se um campo está com o dado correto ou não. Desse modo, o usuário saberá se a informação no campo está de acordo com a validação do formulário.
O correto seria indicar por cores e textos a informação que queremos passar para o usuário segundo a WCAG. Para mostrarmos como isso é importante, somente será adicionado cores, e ao enviar o formulário, veremos quais campos estão corretos.
Formulário Teste
Ao enviarmos o formulário com alguns campos em branco ou com erros de validação, vemos que somente cores são enviadas como informação para o usuário, acarretando em dificuldades para pessoas com daltonismo diferenciar o que está errado.