Cursos / Informática para Internet / Autoria Web / Aula

arrow_back Aula 10 - Acessibilidade e manutenção

Acessibilidade

Infelizmente, enquanto os browsers não seguem as diretrizes gerais indicadas pela W3C, é papel do designer corrigir esses problemas.Mas, a boa notícia é que isso mudará com o tempo.

Outra diretriz diz: “A cor não é utilizada como o único meio visual de transmitir informações, de indicar uma ação, de pedir uma resposta ou de distinguir um elemento visual (Nível A)”.

Sendo assim, é necessário garantir que toda informação em cores também exista sem cores, pois alguns usuários possuem uma falta de sensibilidade a certas cores, como, por exemplo, verde e vermelho.

Você aprendeu, na aula passada, que, quando desejamos melhorar a informação de uma imagem (ícone), adicionamos texto a ela. Analogamente, podemos realizar esse mesmo procedimento aqui.

Podemos escolher comunicar uma informação simultaneamente com cores e texto. Essa providência tornará o site acessível para os usuários com dificuldade de visualização de cores.

Para você compreender melhor as dificuldades de um usuário com esses problemas, veja as figuras abaixo, que mostram, respectivamente, uma paleta de cores e como ela é vista por um usuário daltônico.

Paleta de Cores como vista por pessoas com deuteranopia, uma forma comum de daltonismo

Viu a diferença? As duas paletas parecem ser completamente diferentes. .

Você não sabe qual paleta seu usuário verá. Portanto, quando usar cores para representar informação extra (além da escrita), adicione texto para comunicar a mesma informação.

Veja o exemplo mostrado na Figura 5. A cor da estrela indica o quão boa é a avaliação do livro, mas a mesma informação representada pela intensidade da cor é representada também pelo texto que a acompanha.

Exemplo de uso de texto para fornecer informação representada por cores

Existem alguns serviços on-line e gratuitos que podem simular a aparência de uma imagem ou mesmo de seu site para pessoas com algumas variações de daltonismo. Um deles é o Coblis. Para utilizá-lo, basta entrar no endereço <http://www.color-blindness.com/coblis-color-blindness-simulator/> e seguir o roteiro seguinte:

Para simular com uma imagem:

  • Onde tem o texto “Drag and drop or paste your file in the area below or:” Clique na opção de escolher uma imagem do seu computador.
  • Após escolher a imagem ela deverá aparecer no site. Escolha uma das opções de simulação, digamos “Green-Blind/Deuteranopia” como visto na Figura 6.
Imagem com filtro de cores aplicado simulando a visão da mesma por pessoas com pertubação de percepção visual.

Repare que cada opção marcada simula a visão de alguém com a condição escolhida. A opção “Normal” faz com que a imagem seja exibida da forma original

Outra opção interessante para se testar um site inteiro é o Colorfilter. Nele você digita a URL de um site e é exibida sua versão simulada com as cores vistas por alguém com pertubação de percepção visual. Ver Figura 7.

Site Colorfilter exibindo um site inteiro com cores simulando a visão de pessoas com pertubação de percepção visual.

O Colorfilter nem sempre funciona com todos os sites, então é sempre mais garantido realizer os testes com imagens individuais, como visto anteriormente.

Versão 5.3 - Todos os Direitos reservados