Acessibilidade no Design Rosa

Ao criar produtos, a acessibilidade pode ser uma reflexão tardia. Compreensivelmente, queremos enviar nossos produtos rapidamente e agregar valor aos nossos usuários. Podemos pensar que a acessibilidade é necessária para casos extremos e, portanto, não priorizá-la. É bom lembrar que a Organização Mundial da Saúde (OMS) estima que 16% da população global tenha algum tipo de deficiência (dezembro de 2022).
Ignorar uma parte tão significativa de sua base de usuários simplesmente não cria uma boa experiência do usuário.
Criar produtos acessíveis é responsabilidade de todos. Designers, desenvolvedores, autores de conteúdo e todos os envolvidos na criação de produtos devem fazer sua parte e se esforçar para proporcionar uma experiência melhor para todos.

Nem sempre é fácil manter um alto nível de acessibilidade, mas é definitivamente mais fácil com um sistema de design. Os componentes que criamos no Pink Design, a biblioteca de interface do usuário totalmente aberta do Appwrite, têm um nível de acessibilidade AA. Este é o nível de acessibilidade recomendado para a maioria dos produtos.

Para garantir que nossos produtos mantenham um alto nível de acessibilidade, fizemos o seguinte:

Use alto contraste de cores

O contraste de cores pode ser a primeira coisa que vem à mente quando se pensa em acessibilidade. A falta de contraste entre o texto e o fundo pode significar que algumas pessoas não conseguem ou têm dificuldade em ler o texto. Da mesma forma, cores brilhantes com alta luminância não são legíveis para outras pessoas. O W3C recomenda uma taxa de contraste entre texto e fundo de 4,5 para 1 para o nível de conformidade AA.

Não depender da cor

O termo “daltonismo” é freqüentemente usado para descrever pessoas que têm dificuldade em identificar e distinguir entre certas cores, mas o daltonismo, a incapacidade de ver qualquer cor, é extremamente raro. De acordo com o Serviço Nacional de Saúde do Reino Unido (NHS) , o daltonismo vermelho-verde afeta 1 em cada 12 homens e 1 em cada 200 mulheres. Pessoas com essa deficiência de visão de cores podem ter dificuldade em diferenciar entre vermelhos, laranjas, amarelos, marrons e verdes. Eles também podem achar difícil distinguir entre tons de roxo e podem confundir vermelho com preto.
Da mesma forma, pessoas com deficiência de visão de cores “azul-amarelo” podem ter dificuldade em diferenciar entre azuis, verdes e amarelos.

Usamos quatro cores do sistema no Pink Design - vermelho, laranja, verde e azul. Cada uma dessas cores representa um estado no console do Appwrite — vermelho indica um erro ou perigo, laranja indica um aviso, verde indica sucesso e azul indica informações. Conhecendo as dificuldades que nossos usuários podem enfrentar ao ver essas cores, não dependemos da cor para tornar as informações críticas compreensíveis.

Permitir navegação pelo teclado

Pessoas com restrições de controle motor fino ou mãos ou braços deficientes não poderão usar um mouse. No Pink Design, fornecemos estados distintos para elementos interativos. Ao projetar estados como foco, foco e ativo, fornecemos a capacidade de navegar em todos os elementos interativos com um teclado. Esta não é apenas uma experiência acessível, mas também uma experiência melhor para todos os usuários que preferem a navegação por teclado, incluindo a comunidade de desenvolvedores da Appwrite.

Também é possível melhorar a acessibilidade por meio do desenvolvimento. Em colaboração com nossa equipe de engenharia, decidimos incorporar o seguinte ao Pink Design:

Definir o tamanho da fonte no REM

Os navegadores têm um tamanho de fonte padrão que os usuários podem alterar por meio da configuração do navegador. Um pixel é uma unidade absoluta para tamanhos e espaços fixos que ignora as configurações do navegador. Isso significa que, se estivermos usando pixels e um usuário (com ou sem deficiência visual) alterar o tamanho da fonte nas configurações do navegador, a configuração não afetará nosso produto. Dito isso, os pixels não devem causar nenhum problema se o usuário aumentar o zoom, mas não fazemos suposições sobre as preferências dos usuários. Por isso decidimos definir o tamanho da fonte em REM, que é uma unidade relativa.

Permitir que os usuários reduzam o movimento

Não há dúvida de que as animações são uma boa adição a todos os produtos, mas também podem distrair as pessoas. Em alguns casos, as animações podem causar tonturas, vertigens ou ataques epiléticos. Os usuários sensíveis ao movimento podem optar por reduzir o movimento nas configurações do sistema operacional. Nesse caso, devemos pular a animação para eles. Na Pink Design, decidimos criar uma grande animação para mostrar a funcionalidade da biblioteca na landing page. A animação tem 10 segundos de duração e é a primeira coisa que você vê na página. Ela começa imediatamente quando a página é carregada, mas se a opção “reduzir movimento” estiver habilitada no sistema operacional, a animação pula para o final.

Na Appwrite, a acessibilidade é com certeza um esforço de equipe. Estamos todos trabalhando para manter e melhorar a experiência acessível em nossos produtos, e isso está sempre em nossas mentes. O uso de componentes acessíveis nos ajuda a melhorar nosso nível de acessibilidade, mas é importante lembrar que existem muitos tipos de deficiência. Trabalhamos para melhorar a experiência de usuários com deficiência visual, motora e cognitiva e continuaremos trabalhando para melhorar ainda mais.

Se você ainda não o fez, navegue no Pink Design GitHub Repository ou confira nosso Guia de primeiros passos para usar o Pink Design em seus projetos ou ao contribuir para o Appwrite.