acessibilidade em páginas de internet
DESCRIPTION
Estudo de técnicas de design acessível no uso da cor em projetos web. [email protected]TRANSCRIPT
Faculdades Integradas Teresa D´Ávila
Faculdade de Desenho Industrial.Habilitação em Programação Visual.
Eder da Silva Oliveira
Acessibilidade em páginas de internet: Estudo de técnicas de design acessível no uso da cor em projetos web.
Lorena, 2008
Eder da Silva Oliveira
Acessibilidade em páginas de internet: Estudo de técnicas de design acessível no uso da cor em projetos web.
Monografia apresentada à Faculdadede Desenho Industrial das FaculdadesIntegradas Teresa D´Ávila como Trabalho de Conclusão de Curso.
Orientador: Prof. Me. Marcus Vinícius Monteiro GonçalvesCo-orientador: Prof. Valdir Silva Brandão
Lorena, 2008
Autorizo a reprodução e divulgação total ou parcial deste trabalho, por qualquer meio convencional ou eletrônico, para fins de estudo e pesquisa, desde que citada a fonte.
D683a Oliveira, Eder da Silva
Acessibilidade em páginas de internet: Estudo de técnicas de design acessível no uso da cor em projetos web. – Lorena: FATEA, 2008. 104 p.
Trabalho de conclusão de curso 4º ano – Faculdades Integradas Teresa D’Ávila, Faculdade de Desenho Industrial. 2008.
Orientador: Prof. Me. Marcus Vinícius Monteiro Gonçalves
1. Acessibilidade. 2. Deficiência visual.3. Baixa visão.4. Cor.5. Internet.
CDD 658.93
Eder da Silva Oliveira
Acessibilidade em páginas de internet: Estudo de técnicas de design acessível no uso da cor em projetos web.
Monografia apresentada à Faculdade de Desenho Industrial das Faculdades Integradas Teresa D’Ávila como Trabalho de Conclusão de Curso.
Orientador: Prof. Me. Marcus Vinícius Monteiro Gonçalves
Banca Examinadora
___________________________________________________________________________Prof. Me. Marcus Vinícius Monteiro Gonçalves
Orientador / Fatea
___________________________________________________________________________Prof. Valdir Silva Brandão
Fatea
___________________________________________________________________________Profa. Deise Ap.Carelli Reis de Oliveira
Fatea
___________________________________________________________________________Prof. Me. Luiz Fernando Gorni
Fatea
Lorena, 25 de novembro de 2008.
Dedicatória
Dedico esse trabalho ao meu grande amigo e professor Valdir Silva Brandão por ter
contribuído para o meu ingresso na Faculdade, e me apoiado por todo este tempo.
Sem a ajuda dele no início e durante esses 4 anos, não seria possível hoje estar
concluindo uma Faculdade.
Obrigado Valdir!
Agradecimentos
Agradeço a Deus por ter me presenteado com um pai e uma mãe tão maravilhosos
e presentes em todos os momentos da minha vida, e minha namorada por ter me
compreendido nos momentos mais difíceis.
“Aqueles que abandonaram as esperanças e
não querem mais lutar só podem morrer”
(Saga)
5
Resumo
OLIVEIRA, Eder da Silva. Acessibilidade em páginas de internet: Estudo de técnicas
de design acessível no uso da cor em projetos web. 2008. 104 p. Trabalho de
Conclusão de Curso (Graduação Programação Visual) – Faculdade de Desenho
Industrial, Faculdades Integradas Teresa D’Ávila, Lorena, 2008.
A principal proposta deste trabalho é de mostrar técnicas de design acessível
para um designer que projeta páginas para web se utilizar de ferramentas e técnicas
no uso correto da cor em layouts de páginas que forem desenvolvidas, pois usuários
deficientes visuais que possuem baixa visão como o daltonismo ou deficiência na
interpretação do contraste entre cores, brilho e luminosidade possam usufruir
corretamente dos recursos disponibilizados na página.
Para gerar recomendações de forma correta no emprego correto da cor em
layout de páginas web, foi pesquisado como as cores são captadas pelo olho
humano e interpretadas, mostrando como esses deficientes que possuem baixa
visão na percepção da cor interpretam as informações contidas na página.
Os estudos das diretrizes da W3C contribuíram de forma fundamental para o
desenvolvimento deste projeto, pois foi possível através delas verificar pontos em
que designers devem seguir para tornar uma página acessível. Além dessas
diretrizes são mostrados programas e páginas de internet que se baseiam das
recomendações da W3C e que facilitam a concepção de uma página web acessível
e contribui para o uso correto da cor.
Palavras chave: Acessibilidade - Deficiência visual - Baixa visão - Cor - Internet
6
Abstract
OLIVEIRA, Eder da Silva. Accessibility on websites: Study of techniques for
accessible design in the use of color in web projects. 2008. 104 p. Completion of
work of course (Graduate Visual Programming) - School of Industrial Design,
Integrated Colleges Teresa D'Avila, Lorena, 2008.
The main purpose of this study is to demonstrate techniques of accessible
design for a designer who designs web pages for using tools and techniques in the
correct use of color in layouts of pages that in behind, because visually impaired
users who have low vision such as color blindness or deficiency in the interpretation
of contrast between colors, brightness and luminosity may have correctly resources
available on the page.
To generate correct recommendations for employment of color in layout of
web pages, was searched as the colors are received and interpreted by the human
eye, showing how those disabled who have low vision in the perception of color
interpret the information contained in the page.
Studies of the guidelines of the W3C make a key contribution to the
development of this study, because it was possible to see through them, points
where designers must follow to make a page accessible. Beyond these guidelines
are shown programs and web sites that are based on the recommendations of the
W3C and that facilitate the design of a web site accessible and contributes to the
correct use of color.
Keywords: Accessibility - Visually Impaired – Low Vision – Color - Internet
7
Lista de ilustrações
Figura 01 - Exemplo de radiações de ondas percebidas pelo
olho humano.............................................................................. 24
Figura 02 - Espectro de cores ...................................................................... 24
Figura 03 - A Luz branca refletida pelo prisma............................................. 25
Figura 04 - Anatomia do olho humano ......................................................... 25
Figura 05 - O círculo cromático .................................................................... 27
Figura 06 - Representação da síntese aditiva das cores (RGB) .................. 28
Figura 07 - Representação em RGB de cada pixel do monitor .................... 28
Figura 08 - Síntese Subtrativa das cores (CMYK)........................................ 29
Figura 09 - Cores primárias.......................................................................... 30
Figura 10 - Cores secundárias ..................................................................... 30
Figura 11 - Cores Terciárias......................................................................... 30
Figura 12 - Cores monocromáticas .............................................................. 31
Figura 13 - Cores análogas.......................................................................... 31
Figura 14 - Cores complementares .............................................................. 31
Figura 15 - Tom............................................................................................ 32
Figura 16 - Saturação................................................................................... 32
Figura 17 - Luminosidade............................................................................. 33
Figura 18 - Contraste de tom........................................................................ 34
Figura 19 - Contraste entre cores complementares ..................................... 34
Figura 20 - Contraste de luminosidade ........................................................ 35
Figura 21 - Contraste de saturação.............................................................. 35
Figura 22 - Contraste entre tons quentes e frios .......................................... 35
Figura 23 - Teste de Ishirara ........................................................................ 47
Figura 24 - Diferença na percepção da cor vermelha de uma pessoa
com Protanopia ......................................................................... 48
Figura 25 - Diferença na percepção da cor verde de uma pessoa
com Deuteranopia ..................................................................... 48
Figura 26 - Diferença na percepção da cor azul de uma pessoa
com Tritanopia........................................................................... 49
Figura 27 - Luminosidade, tom e saturação ................................................. 50
8
Figura 28 - Categoria básica das cores........................................................ 51
Figura 29 - Exemplo de luminosidade das cores.......................................... 51
Figura 30 - Exemplo do uso das cores......................................................... 52
Figura 31 - Alto contraste e baixo contraste................................................. 52
Figura 32 - Diferença de luminosidade......................................................... 53
Figura 33 - Tonalidades das cores ............................................................... 53
Figura 34 - Parte superior e inferior do círculo cromático............................. 54
Figura 35 - Comparação da luminosidade ................................................... 54
Figura 36 - Combinações efetivas e não efetivas 1...................................... 54
Figura 37 - Combinações efetivas e não efetivas 2...................................... 55
Figura 38 - Exemplo do uso incorreto da cor em formulários ....................... 67
Figura 39 - Visão daltônica de uma notícia em um site................................ 68
Figura 40 - Link sublinhado identificado por um daltônico............................ 68
Figura 41 - Cálculo de brilho entre duas cores............................................. 70
Figura 42 - Cálculo da diferença entre duas cores....................................... 71
Figura 43 - Cálculo da luminosidade entre duas cores ................................ 74
Figura 44 - Color Oracle sendo executado................................................... 77
Figura 45 - Site da Fatea visto por uma pessoa com visão normal.............. 77
Figura 46 - Simulação do Color Oracle de usuários com deuteranopia ....... 78
Figura 47 - Simulação do Color Oracle de usuários com protanopia ........... 79
Figura 48 - Simulação do Color Oracle de usuários com tritanopia ............. 80
Figura 49 - Tela do analisador de contraste ................................................. 81
Figura 50 - Escolha do uso das cores para serem analisadas..................... 82
Figura 51 - Escolha do algoritmo a ser usado no cálculo de contraste ........ 82
Figura 52 - Resultado obtido do cálculo da diferença de cor e brilho
entre duas cores analisadas....................................................... 83
Figura 53 - Resultado descritivo da diferença entre duas cores
e o brilho entre elas .................................................................... 83
Figura 54 - Resultado da luminosidade das cores para usuários
que possuem um dos três tipos de daltonismo .......................... 84
Figura 55 - Resultado detalhado da diferença da luminosidade
entre duas cores........................................................................ 84
Figura 56 - Contraste da cor preta em diversas simulações ........................ 85
Figura 57 - Contraste da cor branca em diversas simulações ..................... 85
9
Figura 58 - Página inicial do teste online do Truwex Online 2.0................... 86
Figura 59 – Relatório de acessibilidade do site da Fatea............................. 87
Figura 60 - Análise da página de vestibular 2008 da Fatea ......................... 90
Figura 61 - Simulação em Deuteranopia da página inicial
do vestibular 2008 da Fatea ...................................................... 92
Figura 62 - Simulação em Protanopia da página inicial
do vestibular 2008 da Fatea ...................................................... 93
Figura 63 - Simulação em Tritanopia da página inicial
do vestibular 2008 da Fatea ...................................................... 94
Figura 64 - Análise da página de cursos ...................................................... 95
Figura 65 - Simulação em Deuteranopia da página de cursos
do vestibular 2008 ..................................................................... 97
Figura 66 - Simulação em Protanopia da página de cursos
do vestibular 2008 ..................................................................... 98
Figura 67 - Simulação em Tritanopia da página de cursos
do vestibular 2008 ..................................................................... 99
10
Lista de tabelas
Tabela 01 - Tabela detalhada de problemas congênitos da visão
de cores e a freqüência em homens ......................................... 46
Tabela 02 – Descrição e satisfação dos níveis de prioridade fornecidos
pelo documento WGAG 1.0...................................................... 62
Tabela 03 - Recomendações disponibilizadas no documento
WCAG 1.0 da W3C ................................................................... 63
Tabela 04 - Níveis de conformidade fornecidos pelo
WCAG 1.0 da W3C .................................................................. 64
Tabela 05 - Princípios de acessibilidade do WCAG 2.0 (rascunho)
fornecidos pelo W3C ................................................................. 65
Tabela 06 - Significados dos ícones na análise de cores
feita por Giz Lemon .................................................................. 88
Tabela 07 - Trecho da tabela de Limon usando a cor de fundo #00000 ...... 89
Tabela 08 - Análise do contraste de cores, luminosidade e brilho
da página de vestibular da Fatea .............................................. 91
Tabela 09 - Análise do contraste de cores, luminosidade e brilho
da página de cursos .................................................................. 96
11
Sumário
Capítulo I – Introdução............................................................................... 15
1.1 - Objetivo ................................................................................................ 17
1.1.1 - Geral ................................................................................................. 17
1.1.2 - Específico.......................................................................................... 17
1.2 - Justificativa........................................................................................... 18
1.3 – Estrutura do projeto............................................................................. 20
Capítulo II - A importância das cores em páginas web e a percepção
do olho humano na interpretação das cores e suas classificações...... 22
1 – A importância das cores em páginas web.............................................. 22
2 – A percepção do olho humano da percepção da cor ............................... 23
2.1 – O que é a cor?..................................................................................... 23
2.2 – A percepção da cor ............................................................................. 25
3 – Classificação das cores.......................................................................... 26
3.1 – O círculo cromático ............................................................................. 26
3.2 – RGB – Síntese aditiva das cores......................................................... 27
3.3 – CMY/CMYK Síntese subtrativa das cores ........................................... 29
3.4 – Cores primárias ................................................................................... 30
3.5 – Cores secundárias .............................................................................. 30
3.6 - Cores terciárias .................................................................................... 30
3.7 – Cores monocromáticas........................................................................ 31
3.8 – Cores análogas ................................................................................... 31
3.9 – Cores complementares ....................................................................... 31
4 – Tom, saturação e luminosidade ............................................................. 32
4.1 – Tom ..................................................................................................... 32
4.2 – Saturação ............................................................................................ 32
4.3 – Luminosidade ...................................................................................... 33
5 – Contraste................................................................................................ 33
5.1 – Contraste de tom................................................................................. 34
5.2 – Contraste entre cores complementares............................................... 34
5.3 – Contraste de luminosidade.................................................................. 35
12
5.4 – Contraste de saturação ....................................................................... 35
5.5 – Contraste entre tons quentes e frios ................................................... 35
Capítulo III - Acessibilidade em páginas web e a inclusão dos
deficientes no acesso a informação ......................................................... 36
1 – O que é a acessibilidade? ...................................................................... 36
1.2 – Lei de acessibilidade – Decreto de lei 5296 ........................................ 37
1.3 – Acessibilidade na internet.................................................................... 38
1.4 – Deficientes e a internet........................................................................ 39
1.5 – Como funciona uma página acessível?............................................... 40
1.6 – Razões para a importância da acessibilidade na internet ................... 40
2 – Tecnologias assistivas e a acessibilidade .............................................. 41
2.1 – Ledores de tela.................................................................................... 42
2.2.1 – Jaws for Windows............................................................................. 43
2.2.2 – Virtual Vision .................................................................................... 43
2.2.3 – Dos/Vox............................................................................................ 43
2.2.4 – NVDA ............................................................................................... 43
2.2.5 – Leitor de tela Orca Linux .................................................................. 43
2.2.6 – Você Over para o Mac Os X............................................................. 44
2.2.7 – Navegador em modo texto ............................................................... 44
Capítulo IV - Deficientes com visão subnormal e a acessibilidade ....... 45
1 – Visão Subnormal .................................................................................... 45
1.1 – Daltonismo .......................................................................................... 46
1.2 - Diminuição da visão para definição adequada de contraste e luz........ 50
Capítulo V - A Interação Homem-Computador (IHC) e o deficiente
Visual........................................................................................................... 56
1 – O computador e a relação homem-máquina .......................................... 56
2 – Ergonomia e a usabilidade..................................................................... 57
Capítulo VI - Diretrizes e pontos de verificação para acessibilidade
em páginas de internet fornecida pela WAI/W3C ................................... 59
1 – A W3C.................................................................................................... 59
13
1.1 – A WAI/W3C ......................................................................................... 60
2 – WCAG 1.0 .............................................................................................. 60
2.1 – Situações de inacessibilidade em páginas web .................................. 61
2.2 – Níveis de prioridade ............................................................................ 62
2.3 – As quatorze diretrizes.......................................................................... 62
2.4 – Níveis de conformidade do documento WCAG 1.0 ............................. 63
3 – WCAG 2.0 .............................................................................................. 64
3.1 - Princípios de acessibilidade do WCAG 2.0 (rascunho)........................ 65
4 - Orientações em projetos web seguindo as diretrizes de acessibilidade
dos documentos WCAG 1.0 e WCAG 2.0 que abordam o uso da cor ......... 66
4.1 – Recomendações do documento WCAG 1.0........................................ 66
4.2 - Técnicas do ponto de verificação 2.1 do documento WCAG 1.0 ......... 67
4.2.1 – Exemplos.......................................................................................... 67
4.3 - Ponto de verificação 2.2 do documento WCAG 1.0 ............................. 68
4.3.1 - Técnicas do ponto de verificação 2.2 do documento WCAG 1.0 ...... 69
4.3.2 - Fórmula para o cálculo do brilho de uma cor .................................... 69
4.3.3 - Fórmula para cálculo da diferença entre duas cores ........................ 70
4.4 - Recomendações do documento WCAG 2.0 (rascunho) ...................... 71
4.4.1 - Justificativas da taxa de contraste de luminosidade ......................... 73
4.4.2 - Fórmula para cálculo de luminosidade de uma cor........................... 73
4.4.3 – Fórmula para calcular a diferença entre a luminosidade.................. 75
CAPÍTULO VII - Programas e páginas web que auxiliam designers
no uso correto da cor ................................................................................ 76
1 – Programas.............................................................................................. 76
1.1 – Color Vision ......................................................................................... 76
1.1.1 - Usando o Color Oracle...................................................................... 76
1.1.2 – Teste de daltonismo no site da Fatea............................................... 77
1.1.3 – Simulação de Deuteranopia no site da Fatea................................... 78
1.1.4 – Simulação de Protanopia no site da Fatea....................................... 79
1.1.5 – Simulação de Tritanopia no site da Fatea ........................................ 80
1.2 - Colour Constrast Analyser (CCA) ........................................................ 81
1.2.1 - Usando o CAA .................................................................................. 81
1.2.2 - Foreground color e Background color ............................................... 82
14
1.2.3 – Algorithm .......................................................................................... 82
1.2.4 – Results ............................................................................................. 82
2 – Páginas web........................................................................................... 85
2.1 - Trace Research & Development Center............................................... 85
2.2 – Truwex Online 2.0 - Validação de acessibilidade online ..................... 86
CAPÍTULO VIII - Análise do contraste de cor, brilho, luminosidade e simulação
de daltonismo no site de Vestibular 2008 da Fatea................................. 88
1 - Análise da página inicial de Vestibular da Fatea 2008............................ 90
1.1 - Página inicial - Tabela de resultado ..................................................... 91
1.1.2 - Simulação em Deuteranopia ............................................................. 92
1.1.3 - Simulação em Protanopia ................................................................. 93
1.1.4 - Simulação em Tritanopia................................................................... 94
1.2 - Análise da página de cursos ................................................................ 95
1.2.1 - Página de cursos - tabela de resultado............................................. 96
1.2.2 - Simulação em Deuteranopia ............................................................. 97
1.2.3 - Simulação em Protanopia ................................................................. 98
1.2.4 - Simulação em Tritanopia................................................................... 99
Capítulo IX – Conclusões .......................................................................... 100
1 – Conclusão .............................................................................................. 100
1.2 – Sugestões para futuros trabalhos........................................................ 101
Referência bibliográfica............................................................................. 102
15
Capítulo I
1 - Introdução
Este trabalho de graduação busca proporcionar técnicas de design no
desenvolvimento de páginas web, proporcionando aos designers ferramentas,
alternativas e cuidados específicos que ele usará durante o desenvolvimento da
parte gráfica da página, abordando especificamente a escolha correta da cor, e
possibilitando a criação de páginas e conteúdos acessíveis aos portadores de
deficiência visual que são daltônicos, e outros que possuem dificuldade na
percepção do contraste, brilho e luminosidade das cores.
Pessoas com visão defeituosa às cores vermelha e verde não conseguem
distinguir as cores que estão dentro do intervalo intermediário e longo do
comprimento de onda. Você quer que as cores sejam percebidas conforme
são apresentadas, especificamente quando elas são utilizadas para
transmitir um significado. Escolher a combinação errada das cores, como
texto vermelho sobre fundo verde, pode tornar impossível para algumas
pessoas ler porque o texto e a cor de fundo são percebidas como a mesma
coisa. (NIELSEN, Jakob, 2007, p. 245).
Os portadores deste tipo de deficiência visual apresentam dificuldade na
percepção de determinadas cores primárias, como o verde e o vermelho, o que
acaba repercutindo na percepção das cores restantes do espectro de cor. Para um
daltônico, navegar em páginas de internet onde as informações são disponibilizadas
apenas pela cor, ou que possuem textos coloridos e até mesmo mensagens de
alertas ou avisos passados somente pelo uso da cor, o deficiente poderá não
compreender corretamente a informação, gerando um grande problema na
usabilidade e acessibilidade da página, o excluindo do acesso a informação.
Portanto a cor em uma página de internet, não deve ser o único meio de identificar
elementos de grande importância, como por exemplo, os links espalhados pela
página, menus, textos, animações, vídeos, formulários de cadastro ou busca, ou
seja, tudo aquilo que precisa interagir de alguma maneira.
A inacessibilidade também nas páginas web podem ocorrer devido à má
16
escolha do contraste entre as cores, sua luminosidade e brilho. Se os textos
apresentados em páginas da web, imagens, ou qualquer outro item de uma página
web, não possuírem um contraste adequado, muitos usuários terão grande
problema em ler e interpretar as informações contidas nas páginas.
Segundo Nielsen (2007, p. 240) diz que “baixo contraste pode causar tensão
ocular e desconforto. Esse problema torna-se pior para as pessoas com vista ruim,
que tem mais dificuldades de ver letras ou figuras contra um fundo com um tom ou
intensidade semelhante”.
Devido a estes problemas em páginas web onde as informações são
disponibilizadas através da cor, este trabalho busca mostrar a grande importância de
um designer projetar uma página web que atenda as necessidades desses tipos de
portadores de deficiência, para que elas tenham um acesso regular, que não tenham
nenhum tipo de limitação, que as impossibilitam de fazer uso dos recursos
disponíveis atualmente em uma página web. Para que uma pessoa com esse tipo
deficiência visual possa navegar facilmente em uma página de internet, é
fundamental que o site seja acessível a ela. Serão analisadas possibilidades de
design acessível, criando um ambiente para atender as necessidades de
acessibilidade desses portadores de deficiência visual, e incluí-las no acesso a
informação.
Uma página acessível funciona exatamente como todo website, a diferença é
que para tornar-se acessível, é necessário que sejam aplicadas nas páginas
algumas técnicas e regras de acessibilidade, além da correta utilização da marcação
HTML/XHTML, e seguindo os padrões fornecidos pela WAI/W3C (Web Accessibility
Initiative/World Wide Web Consortion) – que desenvolve padrões para a criação e a
interpretação dos conteúdos acessíveis para a Web. Sites desenvolvidos segundo
esses padrões podem ser acessados e visualizados por qualquer pessoa ou
tecnologia, independente de hardware ou software ou algum tipo de limitação física,
cognitiva, visual, mental e motora. Para isso não é necessário à criação de outra
versão de um projeto de uma página na internet, assim como também não é
verdadeiro dizer que websites acessíveis têm um design limitado e pobre.
17
1.1 - Objetivo
1.1.1 - Geral
A inacessibilidade de várias páginas na internet causadas pela má escolha
das cores promove a inacessibilidade dos deficientes visuais que possuem
daltonismo. A acessibilidade às páginas de internet deve ser considerada um fator
de grande importância para o designer, para que os deficientes visuais com baixa
visão tenham acesso à informação.
1.1.2 - Específico
Seguindo as diretrizes de acessibilidade fornecidas pela WAI/W3C, o objetivo
principal deste trabalho é de mostrar algumas técnicas de design no
desenvolvimento de uma página web acessível, especificamente no uso correto das
cores, luz e contraste, para que o deficiente visual com daltonismo, que tem
dificuldade na interpretação da informação disponibilizada apenas pela cor, possa
usufruir de forma acessível o conteúdo da página web.
18
1.2 - Justificativa
O acesso à internet está cada vez mais abrangente em todas as áreas da
sociedade, tornando-a um importante recurso para educação, entretenimento,
comunicação e comércio. Segundo a OMS - Organização Mundial de Saúde,
(disponível em: <http://www.who.int/blindness/causes/magnitude/en/>, acesso em 24
de agosto de 2008), em 2002, mais de 161 milhões de pessoas eram deficientes
visuais, dos quais 124 milhões de pessoas tinham baixa visão e 37 milhões foram
cegos. Nessa estimativa da OMS não foi incluída o problema de refração na visão,
que é uma deficiência visual, o que torna ainda maior o número de deficientes
visuais no mundo. E ainda segundo NIELSEN, Jakob (2007 p. 245), “8% dos
homens e 0,5% das mulheres têm alguma forma de daltonismo que os impede de
diferenciar certas cores”. O benefício de uma página com acessibilidade deve incluir
estes cidadãos que necessitam usufruir das informações contidas nessas páginas de
internet.
Com este crescimento nas tecnologias envolvendo a internet tem gerado uma
grande fonte de informações e aprendizagem. Pessoas com deficiência visual
utilizam desse grande meio de comunicação que é a internet para atender suas
necessidades como: busca pela informação, ler notícias diárias, fazer suas próprias
compras em lojas virtuais sem precisar se deslocar a um determinado
estabelecimento, fazer suas compras de produtos alimentícios em supermercados
online sem precisar sair de sua casa, acessar sua conta em bancos virtuais
possibilitando fazer suas consultas, transferências, extratos bancários, pagarem
suas contas, declarar seu imposto de renda, melhorar seus conhecimentos sobre um
determinado assunto, a aprendizagem será melhor porque a informação contida na
página é de fácil acesso, se comunicar com várias pessoas, poderá ter um
entretenimento melhor, tornando o acesso à informação para elas de forma mais
abrangente, cômoda, prática e fácil.
Entretanto, nem sempre tais tecnologias são acessíveis e utilizáveis por
diferentes tipos de usuários, em especial aqueles que possuem algum tipo de
limitação visual, pois se as páginas de internet não forem projetadas corretamente
por um designer, os deficientes visuais terão uma grande dificuldade no acesso à
19
informação contida na página, e ela não será acessível a eles. É de grande
importância que designers de páginas web saibam como projetar uma página de
internet acessível. Dessa forma, as informações, a aprendizagem, o entretenimento,
a comodidade, a praticidade e a facilidade suportada por esse grande meio de
informações que a internet possui, será utilizada de uma forma eficaz e eficiente,
mantendo a qualidade necessária a qualquer página web.
Muitos designers de páginas web, principalmente os que estão começando a
trabalhar com projeto de internet, não sabem como fazer, ou possuem algum tipo de
dificuldade de como se projetar uma página acessível a todos, principalmente aos
deficientes visuais. Construir uma página com acessibilidade requer que o designer,
ou o desenvolvedor e demais envolvidos com o projeto, tenham consciência da
importância de sua responsabilidade.
O grande propósito desse trabalho de pesquisa é tratar da importância de se
desenvolver um ambiente na Internet acessível, baseado em regras de
acessibilidade e de conteúdo, mostrando algumas técnicas de design no
desenvolvimento de uma página web acessível, especificamente no uso correto das
cores, luminosidade e contraste, para que o deficiente visual com daltonismo que
tem dificuldade na interpretação da informação disponibilizada apenas pela cor
possa usufruir de forma acessível o conteúdo da página web, desenvolvendo um
ambiente de internet acessível, e que a página possa ser passível de uso em
especial pelos deficientes que tem problemas na percepção de cores, luminosidade
e contraste, proporcionando caminhos que possibilitem a acessibilidade às
informações que atualmente são difíceis de serem alcançadas por esses deficientes.
20
1.3 - Estrutura do projeto
O projeto encontra-se estruturado em 9 capítulos.
No segundo capítulo é mostrado o quanto importante a cor é empregada na
elaboração de páginas web e seus elementos. Explica teoricamente o que é a cor e
sua teoria, mostrando como ela é interpretada e percebida pelo olho humano, além
de ilustrar as classificações das cores do círculo cromático.
O terceiro capítulo explica de forma ampla o significado da acessibilidade e as
leis de acessibilidade do governo. Aborda o que é a acessibilidade e a importância
do emprego dela em projetos de páginas web incluindo os deficientes no acesso a
informação.
Especificamente o quarto capítulo aborda os deficientes visuais com visão
subnormal com diminuição da visão para cores, a incapacidade para definição
adequada de luz, contraste ou brilho das cores em páginas de internet mostrando
suas necessidades básicas para se ter acesso razoável ao conteúdo web
disponibilizado pelo emprego da cor.
O quinto capítulo é abordado à interação homem-computador e a usabilidade.
Na interação homem-computador é abordado como ela acaba influenciando as
diversas atividades do ser humano simplesmente no uso do computador. A parte de
usabilidade mostrará a facilidade de navegação, e o usuário exercendo de forma
produtiva e com segurança, diminuindo sua carga de trabalho na execução de
simples tarefas nas páginas web influenciado pela fácil percepção do contraste das
cores o seu brilho e luminosidade dos textos dispostos na página.
No sexto capítulo é mostrada a importância para um designer ou programador
seguirem no desenvolvimento de páginas web as recomendações e diretrizes
fornecidas pela W3C (World Wide Web Consortium). Também mostra a
Recomendação 2 e seus pontos de verificação do documento WCAG 1.0 sobre o
uso da cor em páginas web e suas sugestões de fórmulas de cálculo de diferença de
cor e brilho. Mostra também as diretrizes do documento WCAG 2.0 abordando
principalmente o uso da fórmula de cálculo de contraste de luminosidade.
21
O sétimo capítulo apresenta programas e páginas web que auxiliam a criação
de um ambiente acessível em páginas web que designers forem desenvolver. Esses
programas e páginas web seguem precisamente as diretrizes de acessibilidade
recomendadas pela W3C.
No oitavo capítulo é apresentada a análise de contraste de cor, brilho,
luminosidade e simulação das três variações de daltonismo na página inicial e de
cursos da página de Vestibular 2008 da Fatea.
No nono e último capítulo apresentam-se a conclusão do trabalho e a
proposta para trabalhos futuros abordando a acessibilidade.
22
Capítulo II
A importância das cores em páginas web e a percepção do olho
humano na interpretação das cores e suas classificações
1 - A importância das cores em páginas web
A cor está presente em tudo que uma pessoa observa como textos,
imagens, objetos, e desempenha um papel importante no processo de comunicação
principalmente em páginas de internet.
Segundo o site do Institute for Color Research (disponível em:
<http://www.ccicolor.com/research.html>, acesso em 28 de setembro de 2008),
estudos revelam que "os seres humanos julgam subconscientemente uma pessoa,
um ambiente ou um item nos primeiros 90 segundos, e nesse lapso de tempo entre
62% e 90% do julgamento é baseado unicamente na cor".
Por esse motivo, além das cores serem importantes ao transmitirem
informações, ela tem uma grande influência nas decisões do usuário, além de
exercerem papel fundamental na concepção do layout devido a inúmeras
possibilidades de combinações de cores e seus tons, permitindo ao designer criar
situações agradáveis esteticamente, mensagens de avisos e alertas, determinar
áreas de notícias, entretenimento, detalhes de produtos divulgados na página,
vídeos, possibilitando dar visibilidade aos elementos contidos no layout de uma
página de internet.
O emprego da cor em Computação Gráfica destina-se a múltiplos fins
ditados pelos objetivos de cada utilização. A cor desempenha uma função
estética, isto é, as cores empregues devem transmitir ao observador
sensações estéticas que agradem ao observador, não o afastem e ainda lhe
facilitem a tarefa de observação. A cor deve criar no observador um estado
de espírito tal que predisponha o observador (ou utilizador) a realizar as
tarefas a que se propôs. (LOPES BRISSON, João. Cor e Luz, 2003, p. 39).
Um web site é um espaço interativo onde o usuário poderá navegar fazendo
suas escolhas para onde ele quer ir, o que ele deseja ver, ouvir, ler e interagir. Além
23
da estética proporcionada pelo uso da cor, o designer de páginas web deve aplicar
no desenvolvimento do layout da página o uso correto delas, pois as cores destacam
e estimulam o usuário a perceber e a identificar o conteúdo da página possibilitando
que a informação atinja o maior número de usuários possíveis.
Ainda segundo LOPES BRISSON (2003), “a cor destina-se igualmente a
atrair a atenção do observador para a informação e a realçar conteúdos importantes
e natureza dessa informação”.
Páginas web têm como principal objetivo a disponibilização de informações.
Assim, a utilização das cores deve facilitar essa comunicação. Usando as cores
erradas, contrastes insuficientes, tornaram as páginas difíceis de ler pelos usuários.
Através das cores disponibilizadas pelo designer em uma página web, os usuários
poderão perceber as informações de forma mais rápida na página, associando e
conduzindo-os a exercer uma determinada tarefa como clicar em um link, fazer seu
cadastro em um site, logar em sua conta de email e diversas outras tarefas que
podem ser percebidas e executadas pelo usuário somente pela percepção da cor.
2 - A percepção do olho humano na interpretação da cor
2.1 - O que é a cor?
É a sensação provocada pela ação da luz sobre o órgão da visão. Seu
aparecimento está condicionado à existência de 2 elementos: a luz (objeto
físico, agindo como estímulo); o olho (aparelho receptor, funcionado como
decifrador do fluxo luminoso, decompondo-o ou alternando-o através da
função seletora da retina). A cor característica de cada corpo, prende-se à
faculdade que este tem de absorver uma parte da luz incidente e refletir a
outra. (RAMBAUSKE, Ana Maria. Decoração e Design de Interiores – Teoria
da cor II, p. 17).
Então, a cor é a percepção do olho humano, do resultado da combinação de
luz, objeto e observador. É causada pela forma em que o olho humano detecta a
quantidade de luz refletida de objetos. A luz emite uma enorme mistura de radiações
de ondas como é representado na figura 01, em que cada onda representa uma cor
específica e o resultado da mistura de todas estas ondas produz no olho humano a
24
percepção do branco. Quando um raio de luz branca ou solar atravessa um prisma 1
ela se divide em suas distintas cores que são perceptíveis pelo olho humano
formando o Espectro de cores 2 representado pela figura 02.
Figura 01 – Exemplo de radiações de ondas percebidas pelo olho humano. © Lewis,
A. & Zhaoping, L - Journal of vision.
Figura 02 – Espectro de cores. - © Donald Johansson 2001-2002 – Colours on the
Web.
A figura 03 exemplifica como um espectro de luz é formado pela luz branca
refletida em um prisma. Está figura foi retirada no site RGB World – Understanding
Color (disponível em <http://www.rgbworld.com/color.html/>, acesso em 29 de
setembro de 2008).
1 Tem a capacidade de decompor os componentes de cor da luz branca quando um feixe dessa luz atravessa-o. Ele divide a luz branca em cores diferentes, o arco-íris é um exemplo de prisma.2
É a faixa colorida obtida por Isaac Newton em 1666 quando separou as cores da luz do Sol com um prisma
25
Figura 03 – A Luz branca refletida pelo prisma.
2.2 - A percepção da cor
Os olhos e o cérebro trabalham juntos para perceber algo e enxergá-lo. O
olho humano é constituído por diferentes partes como a córnea, íris, lente, e retina.
Todas essas partes trabalham juntas para receber luz e imagens. É na retina que
formam as imagens das coisas que o olho humano percebe. Segundo Farina, Perez
e Bastos (2006, p.33), “a retina tem cerca de 130 milhões de células receptoras
sensíveis à luz. É formada por diversas camadas de células, sendo as mais
importantes os cones, os bastonetes e ás células de ligação”.
Essas milhões de células sensíveis à luz são elementos fundamentais da
percepção visual, conhecidas como fotossensoras. No caso os cones são
pertinentes à visão das cores, e os bastonetes são os que proporcionam a visão em
preto e branco e visão noturna. A figura 04 representa a formação da estrutura do
olho humano.
Figura 04 – Anatomia do olho humano – © Professor Tom Salt - UCL Institute of
Ophthalmology.
26
Os cones são responsáveis pela visão das cores. Eles contêm um dos três
produtos químicos diferentes que também são clareados pela luz. Eles respondem à
luz vermelha, amarelo-verde, ou azul-violeta. Quando um único cone é estimulado, o
cérebro percebe as cores correspondentes. Isto é, se o Cones verdes são
estimulados, uma pessoa percebe a cor verde, se os Cones vermelhos são
estimulados, é vista a cor vermelha. Todas as outras cores são vistas como uma
combinação destas. Os cones são estimulados apenas pela luz, e eles também
podem determinar detalhes. Os olhos então se utilizam de um nervo especial para
enviar as informações que ele capta para o cérebro, e, assim, o cérebro processa as
informações e reconhece o que uma pessoa está vendo.
A cor é extremamente importante da maioria das visualizações em páginas
web. Quando o designer for escolher as cores para o seu projeto, é necessário ele
se envolver e compreender as classificações, propriedades e as características das
cores e como ela será percebida pelas pessoas.
3 - Classificações das cores
3.1 - O círculo cromático
O círculo cromático é a representação das cores projetadas pelo espectro
visível exemplificado na figura 02, que são ás cores percebidas pelo olho humano.
Ele é composto com base nas cores vermelho, amarelo e azul, e é muito usado por
artistas, designers, pintores e demais profissionais que trabalham com a cor.
O círculo cromático é muito útil para mostrar como as cores se relacionam
entre si e permite ao designer criar novas cores feitas simplesmente pela mistura de
duas ou mais cores presentes no círculo cromático. No círculo cromático são
relacionadas várias formas de cores, que quando combinadas podem gerar
inúmeras variações de tonalidades e chegar a vários possíveis resultados de
combinação.
27
Figura 05 – O círculo cromático. © Before & After magazine – Our Color Wheel
A cor preta e a branca não existem no espectro de cores. Como afirma
Farina, Perez e Bastos (2006, p.63), “o branco e o preto não existem no espectro
solar. A cor branca é a síntese aditiva de todas as cores, e a cor preta o resultado da
síntese subtrativa, isto é, a superposição de pigmentos coloridos”.
3.2 - RGB - Síntese Aditiva das cores
RGB é a sigla que significa o Vermelho (R), Verde (G) e Azul (B). A maior
parte das cores que o olho percebe é a combinação destas três cores-luz.
Cor-luz - radiação luminosa visível que tem como síntese aditiva a luz
branca. Sua melhor expressão é a luz solar, por reunir de forma adequada
todas as cores existentes na natureza. As faixas coloridas que compõem o
espectro solar, quando tomadas isoladamente, uma a uma, denominam-se
luzes monocromáticas. (RAMBAUSKE, Ana Maria. P. 16).
Câmeras, vídeos, televisores, scanners e monitores são baseados na
Síntese Aditiva das cores, onde a luz vermelha, a luz verde e a azul são projetadas
em conjunto formando o branco. Todas essas combinações de luz podem ser
visualizadas na figura 06.
28
Figura 06 – Representação da síntese aditiva das cores (RGB).
Adicionando quantidades iguais dessas três cores-luz é formada a cor
branca. A cor branca é uma mistura equilibrada do vermelho com o verde e o azul. A
quantidade igual de luz vermelha e de luz verde quando combinadas é obtida a luz
amarela. Se a luz vermelha for combinada com a luz azul, a luz obtida será a cor
Magenta. E quando combinadas a luz verde e azul, é formado o Ciano.
Os três diferentes fósforos coloridos são colocados em grupos muito
próximos de cada outro grupo de três uma tríade. Cada tríade de fósforos
coloridos primários constitui um pixel isolado no monitor do computador. O
observador não vê cada fósforo, mas a mistura do grupo de três: o pixel.
De fato, é muito difícil de ver cada pixel isolado. É como se o observador
percebe-se apenas a cor dos pixels agrupados. Por variar a intensidade da
qual estes fósforos brilham, o monitor do computador pode variar a cor
percebida em cada pixel. Como mencionada acima, essa manipulação da
intensidade do fósforo cria um tonalidade de cores q podem ser criadas na
tela do computador. (Tradução: North Carolina State University (disponível
em: <http://www.ncsu.edu/scivis/lessons/colormodels/color_models2.html>,
acesso em 29 de setembro de 2008).
Figura 07 – Representação em RGB de cada pixel do monitor.
29
Designers de páginas para internet utilizam-se das cores RGB para projetar
suas páginas. Os computadores só entendem o sistema de bits 3 e bytes 4. A idéia
de se transformar cores em bits (ou números) através do RGB é feita de forma
simples. Usa-se um byte para o vermelho, um byte para o verde e um byte para o
azul. Um byte permite 256 combinações possíveis de 0 a 255. Onde 0 é a ausência
desta cor enquanto 255 é utilizar esta cor na sua plenitude. Então, em RGB, amarelo
é 255 255 0, Ciano é 0 255 255; Magenta é 255 0 255, preto é ausência de cor ou 0
0 0 enquanto branco é o conjunto de todas as cores ou 255 255 255.
3.3 - CMY / CMYK - Síntese Subtrativa das cores
CMY é a abreviação de Ciano (C), Magenta (M) e Amarelo (Y), também
conhecidas como cor-pigmento.
RAMBAUSKE, Ana Maria (Teoria da cor II, p. 16), afirma que “a cor
pigmento é substância material, que conforme sua natureza absorve refrata e reflete
os raios luminosos componentes da luz que se difunde sobre ela. É a qualidade da
luz refletida que determina a sua denominação”. O sistema de cores CMY é o
sistema de cores utilizado para a impressão em papel, plásticos, tecidos, impressões
fotográficas, tintas, offset. Todos esses tipos de impressão são baseados na Síntese
Subtrativa das Cores. O processo offset usa ciano, magenta e amarelo e uma quarta
tinta que é o preto. A tinta preta é representada pela letra (K) para evitar a confusão
com B para azul formando assim o CMYK. O preto seria a cor chave, pois ela é
impressa por último para acertar a tonalidade das cores.
Figura 08 – Síntese Subtrativa das cores (CMYK).
3 Os computadores "entendem" impulsos elétricos, positivos ou negativos, que são representados por 1 e 0, respectivamente. A cada impulso elétrico, é dado o nome de Bit (Binary digit).4 É um conjunto de 8 bits reunidos como uma única unidade forma um Byte.
30
3.4 - Cores primárias
É ás cores: amarelo, azul e vermelho. Elas
não podem ser decompostas entre outras. Na
teoria tradicional, todas as outras cores são
derivadas da mistura dessas três.
Figura 09 – Cores primárias. © Before & After magazine – Our Color Wheel
3.5 - Cores secundárias
É ás cores: verde, laranja e violeta. Ás cores
secundárias é o resultado da mistura entre as
cores primárias
Figura 10 – Cores secundárias. © Before & After magazine – Our Color Wheel
3. 6 - Cores terciárias
E por fim, ás cores terciárias é o resultado da
combinação de uma cor primária com outra
cor secundária.
Figura 11 – Cores terciárias. © Before & After magazine – Our Color Wheel
31
3.7 - Cores monocromáticas
É apenas uma cor e suas várias tonalidades e
saturação. Fornece o contraste do tom escuro
ao mais claro, permitindo uma ampla utilização
na concepção de projetos gráficos.
Figura 12 – Cores monocromáticas. © Before & After magazine – Our Color Wheel
3.8 - Cores análogas
São ás cores adjacentes de uma determinada
cor do círculo cromático. São as cores que
tem uma cor base em comum como pôr
exemplo o laranja-avermelhado, o amarelo-
ouro que tem em comum com a cor laranja.
Figura 13 – Cores análogas. © Before & After magazine – Our Color Wheel
3.9 - Cores complementares
São ás cores opostas no círculo cromático, no
caso da figura 14 ás cores opostas é o laranja
e o azul. São cores contrastantes, e
destacam-se uma com a outra.
Figura 14 – Cores Complementares. © Before & After magazine – Our Color Wheel
32
4 - Tom, Saturação e Luminosidade
A luz tem três características específicas, e a sensação da cor se dá ao
Tom, Saturação e Luminosidade que são aspectos das cores RGB.
4.1 – Tom
É o nome de qualquer cor pertencente ao
círculo cromático. O tom permite identificar as
categorias básicas, como a cor azul, verde,
amarelo, vermelho, magenta e todas as outras
cores.
Figura 15 – Tom.
4.2 – Saturação
A saturação é a intensidade ou pureza de uma
cor. É à medida que diferencia do cinza á cor
pura. Quando se usa uma cor em uma
intensidade muito grande ela está saturada,
quando a mesma cor está sendo usada em
menor intensidade ela está menos saturada.
As cores mais saturadas também são
chamadas de cores puras.
Figura 16 – Saturação.
33
4.3 – Luminosidade
A luminosidade é a intensidade da luz refletida
pela superfície dos objetos. É a capacidade
que cada cor tem em refletir a luz branca que
elas possuem. Depende da quantidade de
preto ou cinza que a cor contém, faz com que
uma cor se aproxime mais, ou menos, do
branco ou do preto.
Figura 17 – Luminosidade.
5 - Contraste
A cor, como já foi exposta, é essencial na transmissão de informação, e é de
grande importância no processo de comunicação. Várias tonalidades de cores
quando combinadas também exercem a harmonia e a estética na concepção gráfica.
Entretanto, essa mesma harmonia pode ser determinante de uma falta de
vivacidade e não ocasionar aquilo que mais interessa no artista: causar
impacto e, por meio de uma forte tensão emocional, atrair a atenção do
espectador e transmitir-lhe a mensagem desejada. Às vezes, o choque
entre duas cores contrastantes pode ser uma coordenação de valores que
atua de forma mais harmônica no conjunto do que o uso de cores
realmente harmoniosas. Entretanto, no que se refere à cor em si,
chamamos de harmônica e combinação entre cores quando estas possuem
uma parte básica da cor comum a todas. Por exemplo, a seguinte
combinação pode considerar-se harmônica: amarelo, verde, azul e um
laranja-suave, todas com diferentes tons ou com mesmo tom. Pode ser
uma combinação contrastante: azul, roxo amarelo, verde, também todos na
mesma tonalidade ou com tons diferentes entre as próprias cores (uma
amarela forte ou suave, por exemplo). Consideramos, portanto a
34
combinação entre cores totalmente diversas entre si. (Modesto Farina,
Clotilde Perez e Dorinho Bastos (2006, p. 71 e 72).
O contraste é um aspecto fundamental na teoria das cores e é muito
utilizado por artistas, criação publicitária e em vários outros meios de concepção
gráfica, pois a partir dele é definido a legibilidade e a visibilidade, além de ter a
propriedade de mudar a percepção do que se vê, das formas, das dimensões e de
profundidades, e tamanho. Quando duas diferentes cores estão sobrepostas o
contraste intensifica a diferença entre ás duas cores. A diferença nas propriedades
visuais faz com que um objeto seja distinguível de outros e do plano de fundo.
Existem vários tipos de contrastes, e abaixo estão as especificações de alguns
deles.
5.1 - Contraste de tom
É feito através da do uso de tons cromáticos e é
o mais fácil de ser entendido. Nesse caso o
elemento que tem maior peso é o mais escuro,
e o de menor peso é o mais claro e, portanto,
será o que tem maior destaque.
Figura 18 – Contraste de tom.
5.2 - Contraste entre cores complementares
As cores complementares do círculo cromático
oferecem grandes efeitos e graus de contraste.
O contraste harmônico entre elas podem ser
obtidos através da luminosidade.
Figura 19 – Contraste entre
cores complementares.
35
5.3 - Contraste de luminosidade
É a diferença visual que se dá através da
sobreposição de cores mais claras e cores mais
escuras.
Figura 20 – Contraste de
luminosidade.
5.4 - Contraste de saturação
Contraste de saturação é aplicado em locais
onde normalmente não é necessário dar muita
ênfase.
Figura 21 – Contraste de
saturação.
5.5 - Contraste entre tons quentes e frios
O contraste de cores quentes pode ser feitos
através de cores vermelhas, amarelas e
laranjas. Já o contraste frio da sobreposição de
cores azuis, e azul-esverdeado.
Figura 22 – Contraste entre tons
quentes e frios.
36
Capítulo III
Acessibilidade em páginas web e a inclusão dos deficientes no
acesso a informação
1 - O que é a acessibilidade?
Acessibilidade (Lat. accessibilitate), s.f. qualidade de ser acessível;
facilidade na aproximação, no trato ou na obtenção. Acessível adj. a que se
pode chegar facilmente; que fica ao alcance. (Dicionário Aurélio, 1999).
Em geral, o termo acessibilidade permite que um grupo maior de pessoas possa
alcançar, atingir, conseguir de forma fácil, acessível, intuitiva e flexível sem que nenhum tipo
de impedimento as limite a trabalhar, aprender e a executar qualquer tipo de tarefa ou
situação a que se encontrem. A acessibilidade se dá no desenvolvimento de produtos,
espaços físicos e virtuais que possam ser usadas por um número maior de pessoas, sem
que diversos tipos de limitações e capacidades físicas ás impeçam de cumprir seus
objetivos.
GODINHO, Francisco (1999), defende em seu livro que a acessibilidade envolve três termos
que são:
- O termo "Utilizadores" significa que nenhum obstáculo é imposto ao
indivíduo face às suas capacidades sensoriais e funcionais.
- O termo "Situação" significa que o sistema é acessível e utilizável em
diversas situações, independentemente do software, comunicações ou
equipamentos.
- O termo "Ambiente" significa que o acesso não é condicionado pelo
ambiente físico envolvente, exterior ou interior.
Portanto a acessibilidade se aplica em diversos meios que abrange desde
utilizadores, situações e ambientes em que o usuário encontra dificuldades em ter acesso e
de utilizar. A importância da acessibilidade deve ser considerada como requisito e
implementada em qualquer projeto de produto ou ambiente, pois garante não somente
pessoas com qualquer tipo de deficiência, mas também idosos, crianças, jovens e adultos
de realizar suas tarefas diárias facilmente sem nenhum tipo de impedimento atendendo suas
necessidades básicas sem excluí-los.
37
1.2 - Lei de acessibilidade - Decreto de lei 5296
Segundo o decreto de lei 5296 de 2 de dezembro de 2004 do Governo
Federal (disponível em: <http://www.planalto.gov.br/ccivil/_ato2004-
2006/2004/decreto/d5296.htm/>, acesso em: 30 de setembro de 2008), ele
“regulamenta as Leis nos 10.048, de 8 de novembro de 2000, que dá prioridade de
atendimento às pessoas que especifica, e 10.098, de 19 de dezembro de 2000, que
estabelece normas gerais e critérios básicos para a promoção da acessibilidade das
pessoas portadoras de deficiência ou com mobilidade reduzida, e dá outras
providências.”
Este decreto possui nove capítulos, divididos em várias seções que
estabelecem normas gerais para acessibilidade, regulamentando o atendimento às
necessidades específicas de pessoas portadoras de deficiência em meios de
transportes coletivos, obras arquitetônicas, informação e comunicação e na
habitação. No decreto é citado à regulamentação de projetos web implementando a
acessibilidade e diz que:
“Do acesso à informação e à comunicação
Art. 47. No prazo de até doze meses a contar da data de publicação
deste Decreto, será obrigatória a acessibilidade nos portais e sítios
eletrônicos da administração pública na rede mundial de computadores
(internet), para o uso das pessoas portadoras de deficiência visual,
garantindo-lhes o pleno acesso às informações disponíveis.
§ 1o Nos portais e sítios de grande porte, desde que seja
demonstrada a inviabilidade técnica de se concluir os procedimentos para
alcançar integralmente a acessibilidade, o prazo definido no caput será
estendido por igual período.
§ 2o Os sítios eletrônicos acessíveis às pessoas portadoras de
deficiência conterão símbolo que represente a acessibilidade na rede
mundial de computadores (internet), a ser adotado nas respectivas páginas
de entrada.
§ 3o Os telecentros comunitários instalados ou custeados pelos
Governos Federal, Estadual, Municipal ou do Distrito Federal devem
38
possuir instalações plenamente acessíveis e, pelo menos, um computador
com sistema de som instalado, para uso preferencial por pessoas
portadoras de deficiência visual.
Art. 48. Após doze meses da edição deste Decreto, a acessibilidade
nos portais e sítios eletrônicos de interesse público na rede mundial de
computadores (internet), deverá ser observada para obtenção do
financiamento de que trata o inciso III do art. 2o.” (Brasil. Coordenadoria
Nacional para Integração da Pessoa Portadora de Deficiência.
Acessibilidade. - Brasília: Secretaria Especial dos Direitos Humanos. 2006,
Cap. VI, Art. 47 e 48 p. 41).
Este decreto visa somente à acessibilidade em páginas públicas do governo,
portanto designers, programadores e gerentes de conteúdo e todas ás pessoas
envolvidas na concepção de páginas web para algum órgão público, deverão estar
atentas as leis de acessibilidade estabelecidas pelo Governo Federal quando forem
implementar a acessibilidade em seus projetos.
1.3 - A acessibilidade na internet
A definição do termo acessibilidade na internet segundo o Serviço Federal de
Processamento de Dados – SERPRO (disponível em:
<http://www.serpro.gov.br/acessibilidade/oque.php/>, acesso em 30 de setembro de
2008), a acessibilidade na internet ou acessibilidade na web significa permitir o
acesso à web por todos, independente de tipo de usuário, situação ou ferramenta. É
criar ou tornar as ferramentas e páginas web acessíveis a um maior número de
usuários, inclusive pessoas com deficiências. A acessibilidade na web beneficia
também pessoas idosas, usuários de navegadores alternativos, usuários de
tecnologia assistiva e de acesso móvel.
Conclui-se que acessibilidade na internet é permitir que uma quantidade
maior de pessoas tenha acesso à informação, através da utilização de recursos que
permitam com que as páginas de Internet possam ser lidas e interpretadas por
qualquer tipo de usuário. O princípio fundamental da acessibilidade Web é projetar
sites que são flexíveis para corresponder às diferentes necessidades dos
utilizadores. Ela representa para o usuário não só o direito de acessar a rede de
informações, mas também o direito de eliminação de barreiras arquitetônicas, de
39
disponibilidade de comunicação, de acesso físico, de equipamentos e programas
adequados, de conteúdo e apresentação da informação em formatos alternativos.
1.4 - Deficientes e a internet
Acessibilidade às tecnologias de informação e comunicação deve ser
considerada como fator de qualidade de vida. Para a maioria das pessoas a
tecnologia torna a vida mais fácil.
As contribuições que a informática vem proporcionando às pessoas
deficientes são valiosas. O homem trabalha para que outros que possuam
algum tipo de necessidade especial possam ter acesso à educação,
mercado de trabalho, informações, entretenimento e dignidade perante
uma sociedade exclusiva. (BONATTO, Selmo José. 2003, p. 10).
Os portadores de necessidades especiais manifestam limitações ao nível
motor, da visão, da audição, da fala, da concentração, memorização, leitura ou
percepção (paralisias, amputações, dificuldade de controle dos movimentos,
cegueira, surdez, etc.) que os inibem ou impossibilitam de utilizar plenamente as
potencialidades de uma página de internet. No caso dos deficientes, a acessibilidade
na web promove à inclusão deles no acesso a informação com qualquer tipo
deficiência, e que o permita a perceber compreender, navegar, interagir, de
exercerem uma atividade, encontrarem formas alternativas de lazer e de
divertimento, aumentarem as suas relações de amizade com a web. Embora o
acesso às pessoas com deficiência seja o principal enfoque da acessibilidade da
Web, ela também beneficia as pessoas sem deficiência.
BONNATO, (2003, p. 38) diz que “nem tudo que se disponibiliza, está
acessível às pessoas portadoras de deficiência, em relação a este trabalho aos
deficientes visuais, portanto, deve-se trabalhar para que o conteúdo e a
acessibilidade da grande rede venha de encontro às reais necessidades de todos os
usuários”.
Um exemplo disso é que uma página acessível será corretamente vista em
qualquer sistema operacional como o Windows, Linux, Mac OS e também em
diversos tipos de aparelhos eletrônicos que inclui celulares, Palmtops, geladeiras
40
com acesso a internet, e em qualquer tipo de navegador que o usuário estará
utilizando.
1.5 - Como funciona uma página acessível?
Uma página acessível funciona exatamente como todo website, a
diferença é que para tornar-se acessível é necessário que designers, programadores
e gerentes de conteúdo, sigam as diretrizes de acessibilidade fornececidas pela
WCAG/W3C (Web Content Accessibility Guidelines/World Wide Web Consortion –
que desenvolve padrões para a criação e a interpretação dos conteúdos acessíveis
para a Web). É extremamente importante que todos os envolvidos no projeto de
desenvolvimento de uma página web, tenham a consciência da importância da
acessibilidade.
Páginas de internet desenvolvidas seguindo os padrões
fornecidos pela WCAG/W3C, podem ser acessadas e visualizadas por qualquer
pessoa ou tecnologia, independente de hardware ou software. O uso das técnicas de
acessibilidade na concepção das páginas e aplicações para a Internet não empoe
nenhum tipo de limitação no projeto de desenvolvimento da página, pelo contrário,
estas técnicas tornam-nas mais, flexíveis, rápidas e fáceis de usar para um número
ainda maior de pessoas.
1.6 - Razões para a importância da acessibilidade na Internet
a) O uso da Internet vem crescendo cada vez mais em todas as áreas da
sociedade;
b) Existem barreiras na Internet para muitas pessoas com deficiência;
c) Milhões de pessoas possuem deficiências que dificultam seu acesso à
Internet;
d) Incapacidade de ver, ouvir ou deslocar-se, ou grande dificuldade - quando não
a impossibilidade - de interpretar certos tipos de informação.
e) Melhoria no desempenho da página, e economias com custos com a banda
de uma página;
f) Dificuldade visual para ler ou compreender textos.
g) Incapacidade para usar o teclado ou o mouse, ou não dispor deles.
41
h) Crescimento da audiência e possibilidade de atingir 100% de seu público
alvo;
i) A Internet é a tecnologia que mais cresce em toda a história, e para pessoas
com deficiência, pode significar a abertura de novos horizontes;
j) Dificuldade para falar ou compreender, fluentemente, a língua em que o
documento foi escrito.
k) Insuficiência de quadros, apresentando apenas texto ou dimensões
reduzidas, ou uma ligação muito lenta à Internet.
l) Ocupação dos olhos, ouvidos ou mãos, por exemplo, ao volante a caminho do
emprego, ou no trabalho em ambiente barulhento.
m) Desatualização pelo uso de navegador com versão muito antiga, ou
navegador completamente diferente dos habituais, ou por voz ou sistema
operacional menos difundido;
n) Acesso à informação independente do dispositivo utilizado;
o) Fácil alteração em qualquer parte da página;
p) Diferencial competitivo, melhoria da imagem da empresa e fortalecimento da
sua marca.
Essas diferentes situações e características precisam ser levadas em conta
pelas pessoas envolvidas durante o projeto de concepção de uma página. Para ser
realmente potencializador da acessibilidade, cada projeto de página deve
proporcionar respostas simultâneas a vários grupos de incapacidade ou deficiência
e, por extensão, ao universo de usuários da web.
2 - Tecnologia Assistivas e a acessibilidade
Segundo o site de Rita Bersch (fisioterapeuta / diretora do CEDI - Centro
Especializado em Desenvolvimento Infantil / ATACP 2006 - Assistive Technology
Applications Certificate Program pela CSUN California State University - Northridge -
EUA / membro da ISAAC - International Society for Augmentative and Alternative
Communication), (disponível em: <http://www.assistiva.com.br>, acesso em 02 de
outubro de 2008), o objetivo da tecnologia assistiva é de proporcionar à pessoa com
deficiência maior independência, qualidade de vida e inclusão social, através da
42
ampliação de sua comunicação, mobilidade, controle de seu ambiente, habilidades
de seu aprendizado, trabalho e integração com a família, amigos e sociedade.
Tecnologia Assistiva é a ferramenta ou recurso utilizado com a finalidade de
proporcionar uma maior independência e autonomia à pessoa com deficiência. São
softwares utilizados por deficientes visuais, para terem acesso aos aplicativos do
computador, inclusive para navegar na internet. Os sintetizadores de voz,
disponibilizam em formato de áudio, tendo como base a implementação de
parâmetros inseridos no código html de uma página web, desenvolvida pelo designer
ou programador, favorecendo a autonomia pessoal, total ou assistida do deficiente.
O desenvolvimento de Tecnologia Assistiva é, portanto, fundamental para o
incremento da acessibilidade
A tecnologia assistiva no caso dos deficientes visuais com cegueira ou visão
sub-normal, auxilia em alguns pontos específicos que inclui lupas e lentes, Braille
para equipamentos, sintetizadores de voz, grandes telas de impressão, sistema de
TV com aumento para leitura de documentos, publicações.
Os deficientes visuais, principalmente os cegos, navegam em uma página
web através do teclado, se utilizam principalmente da tecla “tab” para navegarem a
partir dos links na página, não sendo necessário percorrer toda a informação. Todas
essas informações são interpretadas pelos ledores de tela, que é uma tecnologia
assistiva.
2.1 - Ledores de tela
Leitores ou ledores de tela são softwares utilizados por pessoas cegas para
terem acesso aos inúmeros aplicativos de um computador, e também para
acessarem o conteúdo de uma página de internet. No caso de uma página web,
esses softwares interpretam as informações contidas nas páginas, como título de um
texto, listas de conteúdo, campos de formulários, tabelas, descrição de imagens, e
através do sintetizador de voz, disponibiliza em formato de áudio para o usuário as
informações contidas nas páginas. Existem diversos tipos de ledores de tela
disponíveis para os deficientes visuais utilizarem para navegar em uma página web.
Dentre eles, se destacam:
43
2.2.1 - Jaws for Windows
JAWS (Job Access With Speech) oferece tecnologia de voz sintetizada em
ambiente operacional Windows para acessar software, aplicativos e recursos na
internet. É um dos programas mais conhecidos e usados por deficientes visuais para
acessar o conteúdo de uma página web. O programa precisa ser comprado, e pode
ser obtido em: http://www.freedomscientific.com
2.2.2 - Virtual Vision
O Virtual Vision permite que deficientes visuais utilizem o ambiente Windows,
os aplicativos Office, naveguem pela Internet com o Internet Explorer ou qualquer
outro aplicativo desenvolvido para essa plataforma. Pode ser comprado em:
http://www.micropower.com.br
2.2.3 - Dos/Vox
É um sistema para microcomputadores da linha PC que se comunica com o
usuário através de síntese de voz, viabilizando, deste modo, o uso de computadores
por deficientes visuais, que adquirem assim, um alto grau de independência no
estudo e no trabalho. Desenvolvido pelo Núcleo de Computação Eletrônica da
Universidade Federal do Rio de Janeiro (UFRJ), ele pode ser obtido em:
http://intervox.nce.ufrj.br/dosvox/
2.2.4 - NVDA
O NVDA (Non-Visual Desktop Access) É um leitor de tela gratuito e do código
aberto para o sistema operacional Windows. Este software permite que pessoas
cegas ou de baixa visão tenham acesso às informações em formato de áudio. Pode
ser baixado gratuitamente em: http://www.nvda-project.org/
2.2.5 - Leitor de tela Orca Linux
Desenvolvido para usuários Linux, o Orça é um leitor de tela também de
código livre que funciona apenas em distribuições Linux que se utilizam da interface
gráfica Gnome. Utiliza várias combinações de síntese de voz, braile e ampliação de
tela Pode ser obtido em:
http://www.ubuntu.com/
44
2.2.6 - VoiceOver, para o Mac OS X
Segundo informações do site da Apple (disponível em:
<http://docs.info.apple.com/article.html?path=Mac/10.4/pt/mh1010.html/>, acesso em
02 de outubro de 2008), o VoiceOver é uma interface alternativa para Mac OS X
destinada a pessoas com deficiência visual e outros que necessitam ouvir o que está
na tela. O VoiceOver descreve em voz alta o que aparece na tela e fala o texto de
documentos e janelas. O VoiceOver está disponível somente em inglês e para o
sistema Mac OS X.
2.2.7 - Navegador em modo texto
Facilita em muito para um usuário que possui um tipo de conexão mais lenta
como a conexão discada, por exemplo, para acessar o conteúdo de uma página na
internet, pois ele não renderiza imagens, vídeos e animações apenas o texto. Onde
tiver imagens, ele substitui pelo texto equivalente textual, inserido na descrição da
imagem.
45
CAPÍTULO IV
Deficientes com visão subnormal e a acessibilidade
Como foi visto no estudo abordado do capítulo 2 sobre a teoria das cores, os
olhos se utilizam de um nervo especial para enviar as informações que ele capta
para o cérebro, e, assim, o cérebro processa as informações e reconhece o que uma
pessoa está vendo. Em olhos que funcionam corretamente, este processo acontece
quase que instantaneamente. Mas quando esse processo de captação de luz e de
imagens não funciona corretamente por um olho ou ambos os olhos, uma pessoa
pode apresentar alguma deficiência visual como a cegueira total ou possuir visão
subnormal.
1 – Visão subnormal
Segundo o site do Conselho Brasileiro de Oftalmologia (disponível em:
<http://www.cbo.com.br/site/index.php?mostra=doencas_visao_subnormal/>, acesso
em 05 de outubro de 2008), “o mais comum é a redução da visão central, a visão
subnormal pode também ser conseqüência de diminuição da visão periférica, ou da
diminuição da visão para cores, a incapacidade para definição adequada de luz,
contraste ou foco”.
Pessoas que nascem com visão subnormal têm diferentes necessidades
daquelas que apresentam o problema com o decorrer da vida. Embora a maior
incidência da causa da visão subnormal seja em idosos, pessoas de todas as idades
podem ser acometidas. A visão subnormal pode ocorrer por causa congênita,
doenças hereditárias, traumas, diabetes, glaucoma, catarata e doenças relacionadas
à idade. A diminuição da visão da cor significa que uma pessoa não percebe
algumas cores, ou as vêem de forma diferente de outras pessoas. A cor é cada vez
mais utilizada para transmitir informações em diversos meios de comunicação. A
utilização de certos pigmentos em diversas formas pode causar dificuldade para um
deficiente visual ao navegar em uma página web, ou até mesmo causar total
ilegibilidade de algumas páginas. Designers gráficos que projetam para web, não
46
podem ignorar as necessidades desses usuários com deficiências na percepção de
cores, pois eles podem ser tornar grandes consumidores, ou leitores da página.
1.1 - Daltonismo
Segundo Gerhard K. Lang, MD (2007, p. 317), “é a diminuição da
sensibilidade para enxergar determinadas cores ou, mais raramente, como uma
completa deficiência de determinadas cores (daltonismo).” É um distúrbio da visão
que impede com que a pessoa consiga perceber a diferença entre algumas cores,
quando certos pigmentos não podem ser distinguidos com precisão pela ausência
de algumas substâncias sensíveis a luz em algumas células da retina. Pode ser de
origem genética, e também pode ser causado por lesões nos olhos ou até mesmo no
cérebro. A forma de daltonismo mais comum é a dificuldade de distinguir entre o
verde e o vermelho. Gerhard K. Lang, MD (2007) apresenta uma tabela onde se
pode identificar a porcentagem das pessoas com problemas congênitos na visão das
cores, e através dela, percebe-se que a freqüência maior desse problema na visão é
em homens.
Forma Freqüência
Tricromatopsia anormal (fraqueza na cor) Forma mais comum
Deuteranomalia 5%
Protanomalia 1%
Tritanomalia Rara
Discromatopsia (Cegueira parcial da cor)(um dos três sistemas de cones necessários para a percepção da cor está ausente)
Segunda forma mais comum
Protanopia 1%
Deuteranopia 1%
Tritanopia (cegueira azul-amarelo) Rara
Tabela 1 - Tabela detalhada de problemas congênitos da visão de cores e a freqüência em homens.
47
É comum uma pessoa com daltonismo descobrir que é daltônica fazendo o
teste de Ishirara 2 que é reconhecido internacionalmente como um método altamente
confiável na análise da deficiência de cores de um daltônico. Na figura 22, é
mostrado a representação do teste de Ishirara, onde um paciente com visão normal
das cores consegue perceber os números 7, 74 e 2.
Figura 23 – Teste de Isharara
De acordo com Gerhard K. Lang, MD (2007), o daltonismo afeta cerca de
8% da população mundial de homens, e 0,4% das mulheres. Essa porcentagem
parece ser pequena, mas para uma página web que tem acesso mundial, muitos
usuários não irão conseguir interpretar as informações que contenham determinadas
cores, que foram escolhidas e aplicadas incorretamente.
Segundo Farina, Perez e Bastos (2006, p. 54 e 55), “Tricromatopsia normal é
a percepção normal de todas as cores. Tricromatopsia anômala é a percepção
anômala das cores: Protanomalia é a percepção anômala do vermelho;
Deuteranomalia, a percepção anômala do verde; Tritanomalia, a percepção anômala
do azul”.
A figura 24 mostra a simulação de uma pessoa com Protanopia. Neste caso,
as células cone sensíveis à luz vermelha estão ausentes. Uma pessoa que possui
este tipo de deficiência é capaz de ver a cor azul, mas a percepção da cor verde
torna-se cinza.
2 O Dr. Shinobu Ishihara (1879-1963), professor emérito da Universidade de Tókio, desenvolveu, em 1917, uma série de testes para testar deficiências na percepção de cores.
48
Normal Protanopia
Figura 24 – Diferença na percepção da cor vermelha de uma pessoa com Protanopia.
A figura 25 é a simulação de uma pessoa com deuteranopia. Neste caso, se da à
dificuldade de enxergar cores verdes. Na deuteranopia a percepção das cores é
muito semelhante ao que vê uma pessoa com protanopia. Neste caso, as células
cone sensíveis à luz verde estão ausentes.
Normal Deuteranopia
Figura 25 – Diferença na percepção da cor verde de uma pessoa com Deuteranopia.
49
E por último, a figura 26 mostra a simulação de uma pessoa com tritanopia
que é a dificuldade de enxergar cores azuis. É causada pela ausência das células
cone que são sensíveis à luz azul. Segundo Gerhard K. Lang, MD (2007) é a
anomalia mais rara do daltonismo.
Normal Tritanopia
Figura 26 – Diferença na percepção da cor azul de uma pessoa com Tritanopia.
Das diferentes variações do daltonismo, a deuteranopia é a que mais
prevalece. Depois vem a protanopia seguida da tritanopia que é a mais rara.
Chegou-se ao número de 1 a cada 12 usuários de Internet apresentando alguma
forma de daltonismo. Para um daltônico, navegar na Internet pode ser uma
experiência frustrante. Alguns problemas podem ser até graves, como não encontrar
navegação no site, e até mesmo textos podem estar ilegíveis.
Devido ao grande número de deficientes visuais que não percebem ás para
cores, e a gravidade das dificuldades que eles encontram na Web, por esses
motivos, designers devem projetar páginas que sejam acessíveis aos portadores
com deficiência visual com problemas na percepção de cores.
50
1.2 - Diminuição da visão para definição adequada de contraste e luz
À medida que uma pessoa envelhece as deficiências na percepção das
cores, e as visões parciais contribuem na redução da percepção visual de certas
combinações de cores. Portanto duas cores que contrastam fortemente para uma
pessoa com visão normal podem não ser perceptíveis para uma pessoa com uma
deficiência visual. O contraste acontece quando se pode diferenciar cores atendendo
à luminosidade, à cor de fundo sobre a qual se projetam. A luminosidade captada
pelos bastonetes é o atributo da percepção visual onde uma área parece emitir mais
ou menos luz. Se os textos apresentados em páginas da web, imagens, ou qualquer
outro tipo de objeto contido na página não possuírem um contraste, luminosidade
adequada, pessoas com visão subnormal terão grande problema em ler e interpretar
as informações contidas nas páginas. Isso ocorre pelo fato delas terem grande
dificuldade em receber quantidade adequada de luz no olho, dificultando processo
de leitura.
Segundo Arditi (1999), PhD, vice-presidente do Vision Science at Lighthouse
International, (disponível em: <http://www.lighthouse.org/accessibility/legible/>,
acesso em 06 de outubro de 2008), a apresentação de conteúdos atenderá a um
grande número de usuários se a cor de fundo for escura e a letra (fonte) de cor
clara, ou seja, deve-se propiciar um bom contraste entre estes dois requisitos.
Arditi (1999) diz que o tom, a luminosidade e a saturação, são três atributos
perceptivos da cor que podem ser visualizados como um sólido.
Figura 27 – Luminosidade, tom e saturação - ©2005 Lighthouse International
51
O tom varia à volta do sólido, à luminosidade varia entre o topo e a base do sólido, e
a saturação é à distância ao centro.
Figura 28 – Categoria básica das cores - ©2005 Lighthouse International
O tom permite identificar as categorias básicas, como a cor azul, verde,
amarelo, vermelho e roxo. As pessoas com visão normal seguem a seqüência de
tonalidades de cores naturalmente com base em sua semelhança uma com a outra.
Para a maioria das pessoas com deficiência da percepção das tonalidades das
cores, a capacidade de discriminar os tons é reduzida.
Figura 29 – Exemplo de luminosidade das cores - ©2005 Lighthouse International
A luminosidade corresponde à quantidade de luz que parece ser refletida de
uma superfície colorida, em relação às superfícies vizinhas. A luminosidade, tal
como o tom, é um atributo perceptivo que não pode ser calculado apenas com base
em medições físicas. É o mais importante atributo para tornar o contraste mais
eficaz. Com a deficiência na percepção da cor, a capacidade de distinguir as cores
com base na luminosidade é reduzida.
52
Figura 30 – Exemplo do uso das cores - ©2005 Lighthouse International
Para uma pessoa com visão parcial e deficiência na percepção da cor, o
painel da esquerda pode parecer o que o painel da direita parece para uma pessoa
com uma visão normal. A deficiência na percepção da cor reduz a capacidade de
distinguir cores com base nos três atributos – tom, luminosidade e saturação.
Designers podem ajudar a compensar esses déficits, diferenciando ás cores nos três
atributos.
Arditi (1999) apresenta três diretrizes que contribui muito para textos se
tornarem acessíveis aos portadores com visão subnormal em percepção das cores.
1. Exagere a diferença de luminosidade entre a cor de primeiro plano e a cor de
plano de fundo, e evite usar cores de luminosidade semelhante ao lado uma
da outra, mesmo que sejam diferentes na saturação ou no tom.
Figura 31 – Alto contraste e baixo contraste - ©2005 Lighthouse International
53
Figura 32 – Diferença de luminosidade - ©2005 Lighthouse International
Não partir do princípio que a luminosidade que você vê vai ser igual à que
outras pessoas com deficiência na percepção das cores verão. Deve, pelo contrário,
presumir que, em comparação consigo, elas verão sempre menos contraste entre as
cores. Se no projeto tornar mais claras as cores claras e escurecer as cores escuras,
vai aumentar a acessibilidade visual.
Figura 33 – Tonalidades das cores - ©2005 Lighthouse International
2. Escolha tonalidades escuras da metade inferior do círculo cromático para
contrastar com tonalidades mais claras da metade superior do círculo. Evite
fazer o contraste com cores da metade inferiores tornadas claras com cores
da metade superiores tornadas escuras. A orientação deste círculo cromático
foi escolhida para ilustrar este princípio.
54
Figura 34 – Parte superior e inferior do círculo cromático - ©2005 Lighthouse International
Figura 35 – Comparação da luminosidade - ©2005 Lighthouse International
Para muitas pessoas com visão parcial e/ou deficiências congênitas na percepção
das cores, a luminosidade das cores na metade inferior do círculo cromático tende a
ser reduzida.
3. Evite contrastar tons adjacentes do círculo cromático, especialmente se as
cores não contrastarem fortemente em luminosidade.
Figura 36 – Combinações efetivas e não efetivas 1 - ©2005 Lighthouse International
55
As dificuldades na percepção da cor, associadas à visão parcial e a deficiências
congênitas, tornam difícil discriminar entre cores com tonalidades semelhantes.
Figura 37 – Combinações efetivas e não efetivas 2 - ©2005 Lighthouse International
Uma forma de aumentar a acessibilidade de um projeto web para indivíduos
com deficiência na interpretação das cores, é aumentar o contraste da cor de
primeiro plano da cor do plano de fundo. Em geral, cores que precisam ser distintas
devem ser diferentes em luminosidade. Pessoas que tem dificuldade na percepção
das cores, muita das vezes são menos sensíveis ás cores em ambas as
extremidades do espectro de cor. Para eles, vermelhos e azuis aparecem mais
escuros do que uma pessoa com visão normal da cor. Por isso, no projeto de
desenvolvimento da página, o designer deve evitar cores combinando luz de ambas
às extremidades do espectro de cores (vermelhos e azuis), com cores escuras a
partir do centro do espectro (amarelos e verdes). Em vez disso, combinar cores luz a
partir do meio do espectro de cores escuras com ambas as extremidades do
espectro.
56
Capítulo V
A Interação Homem-Computador (IHC) e o deficiente visual
1 - O computador e a relação homem-máquina
De acordo com ROCHA, H. V.; BARANAUSKAS, M. C. C (2000, p.14), “o IHC
é a disciplina preocupada com o design, avaliação e implementação de sistemas
computacionais interativos para uso humano e com o estudo dos principais
fenômenos ao redor deles.” SILVA FILHO, A. M, 2003, define a IHC como:
Interação Homem-Computador (IHC) é uma área multidisciplinar que
envolve as áreas de Ciência da Computação, Psicologia, Fatores
Humanos, Lingüística, dentre outras. IHC está voltada para a aplicação do
conhecimento destas disciplinas para produzir interfaces amigáveis”.
O computador teve grande influência na mudança de hábitos das pessoas,
principalmente como elas desenvolvem suas atividades em seu trabalho e em sua
casa, tornando-se uma grande ferramenta e é indispensável especificamente dentro
de empresas. Para que a interação homem-computador ocorra, é indispensável o
uso das interfaces e da interatividade.
Sistemas computacionais e páginas de internet são interfaces que possuem
vários elementos e que interagem com o usuário, fazendo parte da vida das pessoas
e se relacionam com elas, pois estes sistemas contribuem para as pessoas
exercerem diferentes tipos de funções com maior facilidade, execução de tarefas,
trabalhos, entretenimento, busca pela informação e uma série de itens que são
apenas executados pelo uso do computador.
SILVA FILHO (2003), também ressalta que:
Os seres humanos percebem as coisas através de seus sentidos, isto é,
visual, auditivo e tato. Estes sentidos habilitam o usuário de um sistema
interativo perceber a informação, armazená-la (em sua memória) e
processar a informação usando o raciocínio dedutivo ou indutivo. Maioria
da IHC ocorre através do sentido da visão, como por exemplo: relatórios,
gráficos, etc. Neste caso, o olho e o cérebro trabalham juntos a fim de
57
receber e interpretar a informação visual baseada no tamanho, forma,
cor(es), orientação e movimento. Muitos elementos discretos de informação
são apresentados simultaneamente para o homem absorver. Assim, uma
especificação apropriada de comunicação visual é o elemento chave de
uma interface amigável.
Mediante a isso, designers de páginas web devem projetar uma interface
amigável, simples de usar e de fácil aprendizado, sem haver nenhum tipo de
restrição, que atenda as necessidades e capacidades humanas. Quando isso ocorre
o usuário poderá se sentir confortável, satisfeitos e seguros podendo realizar suas
tarefas de forma mais ágil, fácil e rápida facilitando a relação e a interatividade com
o computador, sistemas computacionais e páginas de internet. A interface
projetada de uma página web deve-se adequar e fornecer alternativas pré-
elaboradas pelo designer para o usuário poder fazer suas escolhas e fazer sua
navegação na página tornando-a interativa. Os usuários conseguiram interagir e
usufruírem com o conteúdo disponível em uma página web baseado nas cores.
Conforme foi abordado no capítulo 2, a percepção visual e o cérebro
trabalham juntos na visibilidade e na interpretação das informações disponibilizadas
na página apenas pela cor, criando ações instantâneas, sem dispersão da atenção
do usuário, tornando o conteúdo perceptível e compreensível de forma que o
raciocínio do usuário e fácil assimilação o leve a executar suas ações com um
desempenho melhor, de forma simples e amigável.
2 - Ergonomia e a Usabilidade
A interação Homem-computador, portanto, faz parte da vida de muitos
usuários que se utilizam do computador para executarem suas tarefas. Páginas web
com cores e contrastes mal projetadas geram diversos problemas para o usuário em
sua navegação, criando interações que ficam difíceis de serem bem sucedidas.
Pode-se dizer que a ergonomia está na origem à usabilidade, pois ela visa
proporcionar eficácia e eficiência, além do bem-estar e saúde do usuário,
por meio de adaptação do trabalho ao homem. Isto significa que seu
objetivo é garantir que sistemas e dispositivos estejam adaptados à
maneira como o usuário pensa, comporta-se e trabalha e, assim,
proporcionem usabilidade. (CYBIS, Walter. 2007 p. 15 e 16).
58
A internet é interativa e ás cores contribui para o processo de percepção e
escolha do usuário o guiando no que ele deseja ver, ouvir e a interagir. A projeção
mal elaborada do uso das cores em uma página web feitas por um designer, além
de atrapalhar o processo de interatividade, portanto, pode gerar uma série de
problemas de navegação causando fadiga ocular, dificultando ao usuário de
encontrar elementos e a executar tarefas nas páginas, não só os aborrecendo, mas
também os frustrando ocasionando stress, perca de concentração, também acaba
interferindo em seu humor, pois ficaram irritados por não conseguirem executar
simples tarefas na página, agindo assim diretamente na perda de sua auto-estima
pois o usuário que não conseguir usar uma página web se sentirá inferiorizado
perante outros usuários mais experientes ou que tem a facilidade de aprendizado.
Por esses vários problemas ocasionados pela má escolha de um esquema de
cores em uma página, o usuário insatisfeito irá desistir da navegação e indo para
outro site que os agrade e que seja fácil de usar.
A usabilidade no design de páginas web, portanto, auxilia a relação que o
usuário terá com a facilidade de navegação, exercendo de forma produtiva e com
segurança, diminuindo sua carga de trabalho, promovendo a satisfação de qualquer
tipo de usuário (deficiente ou não) quando estão navegando em uma página de
internet. Designers devem levar em consideração no início e durante o
desenvolvimento de um projeto de uma página web a escolha correta das cores,
evitando vários problemas quando as páginas forem acessadas por deficientes
visuais que tem problemas na percepção da cor.
A vantagem de uma página com conteúdo perceptível aos deficientes visuais
que possuem daltonismo e outros que possuem dificuldade na percepção do
contraste, brilho e luminosidade das cores, onde as informações são mostradas de
forma amigável, visível, legível e compreensível, torna a navegação mais fácil, e
evita que esses tipos de usuários exerçam operações ou tome decisões erradas.
59
CAPÍTULO VI
Diretrizes e pontos de verificação para acessibilidade em páginas
de internet fornecida pela WAI/W3C
1 - A W3C
Segundo site da W3C - World Wide Web Consortium (disponível em
<http://www.w3c.org/>, acesso em 08 de outubro de 2008), “é um consórcio
internacional onde membros da organização, funcionários e o público, trabalham em
conjunto para desenvolver padrões da web”. Ela desenvolve padrões e orientações
para web, permitindo que as páginas desenvolvidas segundo esses padrões possam
ser acessadas e visualizadas por qualquer pessoa ou tecnologia, independente de
hardware ou software, e compatível com os novos padrões e tecnologias que
possam surgir com a evolução da internet. Fundada por Tim Berners-Lee em 1994, a
W3C exerce principalmente em sua missão, a criação de normas e padrões da web,
e desde o ano em que foi fundada, a W3C publicou mais de cento e dez dessas
normas, chamadas Recomendações W3C. Tim Berners-Lee afirma que “o W3C cria
o poder de comunicar, trocar informações e programar aplicações dinâmicas para
qualquer um, em qualquer lugar, a qualquer tempo e usando qualquer dispositivo”.
Segundo Maujor (disponível em < http://www.maujor.com/w3c/introwac.html/>,
acesso em 08 de outubro de 2008), “A Web oferece possibilidade de acesso à
informação e a interação de pessoas portadoras de necessidades especiais de
forma inédita. [...] Ao desenvolver ou redesenhar um site, a avaliação da
acessibilidade logo no início e ao longo do trabalho detectará itens de acessibilidade
que se tornarão mais fáceis de corrigir do que se deixarmos o trabalho de avaliação
para o final do projeto”.
Os estudos e normalizações da W3C apontam que a avaliação e a inserção
da acessibilidade devem ser aplicadas em todo o projeto de desenvolvimento de um
ambiente web.
60
1.1 - A WAI/W3C
A Web Accessibility Initiative (WAI) trabalha com organizações ao redor do
mundo para desenvolver estratégias, diretrizes e recursos para ajudar a tornar a
Web acessível às pessoas com deficiência. As diretrizes de acessibilidade
desenvolvida pela WAI/W3C, é um documento considerado uma referência para
princípios de acessibilidade e idéias de design. Ela desenvolve orientações que são
amplamente consideradas como norma internacional para a acessibilidade da Web,
desenvolve material de apoio para ajudar a compreender e implementar
acessibilidade em páginas web através de uma colaboração internacional. A WAI
desenvolve o seu trabalho através da W3C, envolvendo diferentes partes
interessadas na acessibilidade da web. Estes partes incluem empresas, governos,
organizações de investigação sobre acessibilidade, entre outros.
2 - WCAG 1.0
Segundo o documento de versão 1.0 disponibilizado em maio de 1999 pela
W3C, o Web Content Accessibility Guidelines 1.0 (WCAG) (disponível em:
<http://www.w3.org/TR/WAI-WEBCONTENT/>, acesso em: 08 de outubro de 2008)
são recomendações que:
[...] explicam como tornar o conteúdo Web acessível a pessoas com
deficiências, destinando-se a todos os criadores de conteúdo Web (autores
de páginas e projetistas de sites) e aos programadores de ferramentas para
criação de conteúdo. O principal objetivo dessas recomendações é
promover a acessibilidade.
É um documento que explica através de várias recomendações de como
tornar o conteúdo Web acessível às pessoas portadoras de necessidades especiais,
direcionando designers, programadores e gerentes de conteúdo a promover a
acessibilidade em seus projetos web. Genericamente, conteúdo da web refere-se à
informação contida em uma página ou a uma aplicação web, incluindo, textos,
imagens, formulários, sons e todos os elementos que constituem uma página web.
Essas diretrizes se constituem uma versão estável e segura de referência e,
no entanto, a sua observância fará também com que o conteúdo da página se torne
61
mais acessível para todos os utilizadores, independentemente do respectivo agente
do usuário (por ex., navegador de ambiente de trabalho, navegador por voz,
dispositivo móvel, laptops) e quaisquer que sejam as limitações associadas à
respectiva utilização (ambientes barulhentos, divisões mal iluminadas ou com
excesso de iluminação, e utilização em modo mãos-livres.
2.1 - Situações de inacessibilidade em páginas web
O WCAG 1.0, mostra alguns exemplos de situações de usuários e suas
dificuldades, softwares, ambientes, entre outros, em diferentes contextos, que
contribuem para a inacessibilidade em páginas web. São elas:
1. Sejam incapazes de ver, ouvir, se deslocar, ou interpretar determinados tipos
de informações;
2. Tenham dificuldade em ler ou compreender textos;
3. Não tenham um teclado ou mouse, ou não sejam capazes de utilizá-los;
4. Possuam tela que apresenta apenas texto, ou com dimensões reduzidas, ou
ainda uma conexão lenta com a Internet;
5. Não falem ou compreendam fluentemente o idioma em que o documento foi
escrito;
6. Estejam com seus olhos, mãos ou ouvidos ocupados (por exemplo, ao
volante, a caminho do trabalho, ou em um ambiente barulhento);
7. Possuam uma versão ultrapassada de navegador web, diferente dos
habituais, um navegador por voz, ou um sistema operacional pouco
convencional.
Designers, programadores e gerente de conteúdo têm de levar em conta
estas diferentes situações, ao conceberem uma página para a Web. Embora haja
uma multiplicidade de situações, cada projeto de página, para ser verdadeiramente
acessível, tem de dar resposta a vários grupos com diversos tipos de incapacidade
ou deficiência, e, por extensão, ao universo dos utilizadores da Web. Estas
recomendações não visam de modo algum restringir a utilização de imagem, vídeo,
textos por parte dos produtores de conteúdo pelo contrário, explicam como tornar o
conteúdo mais acessível e atingir um público maior para o site, tornando a página
mais acessível.
62
2.2 - Níveis de prioridade
A seção da WCAG 1.0 denomina como são organizadas as diretrizes,
fornecendo uma listagem mostrando como é o formato da diretriz e dos checkpoints.
Cada ponto de verificação tem uma prioridade, que são explicadas na tabela 02.
Prioridade Descrição Satisfação
Prioridade 1
Pontos que os criadores de conteúdo Web devem
satisfazer inteiramente. Se não o fizerem, um ou mais grupos de usuários ficarão
impossibilitados de acessar as informações contidas no documento.
A satisfação desse tipo de pontos é um requisito
básico para que determinados grupos
possam acessar documentos disponíveis
na Web
Prioridade 2
Pontos que os criadores de conteúdos na Web
deveriam satisfazer. Se não o fizerem, um ou mais grupos de usuários terão dificuldades em acessar as informações contidas
no documento.
A satisfação desse tipo de pontos promoverá a
remoção de barreiras significativas ao acesso a documentos disponíveis
na Web
Prioridade 3
Pontos que os criadores de conteúdos na Web
podem satisfazer. Se não o fizerem, um ou mais
grupos poderão se deparar com algumas
dificuldades em acessar informações contidas nos
documentos.
A satisfação deste tipo de pontos irá melhorar o acesso a documentos armazenados na Web.
Tabela 02 – Descrição e satisfação dos níveis de prioridade fornecidos pelo documento WGAG 1.0.
2.3 - As quatorze diretrizes
O documento WCAG 1.0, possui 14 diretrizes e é considerado normativo pela
W3C abordando todo o tipo de conteúdo e elementos que fazem parte de uma
63
página web, permitindo ao designer a implementação de acessibilidade em projetos
de página de internet. Cada diretriz é composta por um ou mais ponto de verificação
que explicam como aquela diretriz se aplica em uma determinada área.
Recomendações Descrição
01 Fornecer alternativas ao conteúdo sonoro e visual
02 Não recorrer apenas à cor
03 Utilizar corretamente marcações e folhas de estilo
04 Indicar claramente qual o idioma utilizado
05Criar tabelas passíveis de transformação harmoniosa
06Assegurar que as páginas dotadas de novas tecnologias sejam transformadas harmoniosamente
07Assegurar o controle do usuário sobre as alterações temporais do conteúdo
08Assegurar a acessibilidade direta de interfaces do usuário integradas
09Projetar páginas considerando a independência de dispositivos
10 Utilizar soluções de transição
11 Utilizar tecnologias e recomendações do W3C
12 Fornecer informações de contexto e orientações
13 Fornecer mecanismos de navegação claros
14Assegurar a clareza e a simplicidade dos documentos.
Tabela 03 - Recomendações disponibilizadas no documento WCAG 1.0 da W3C.
2.4 – Níveis de conformidade do documento WCAG 1.0
Os níveis de conformidade sugeridos pelo WCAG 1.0 busca avaliar, medindo
todos os pontos de verificação das prioridades 1, 2 e 3 se foram atendidas
64
satisfatoriamente. Se for cumprido todos os ponto de verificação da prioridade 1, a
página web estará em conformidade de nível “A”. Se for cumprido somente as
prioridades 1 e 2, a página estará em conformidade de nível “AA”. E por fim, se
todas as prioridades fornecidas no documento WCAG 1.0 forem cumpridas, a página
estará em conformidade de nível “AAA”.
Nível de conformidade Satisfação
AForam satisfeitos todos os pontos de
verificação de prioridade 1.
AAForam satisfeitos todos os pontos de
verificação de prioridades 1 e 2.
AAAForam satisfeitos todos os pontos de
verificação de prioridades 1, 2 e 3.
Tabela 04– Níveis de conformidade fornecidos pelo WCAG 1.0 da W3C.
3 - WCAG 2.0
De acordo com a W3C, o documento WCAG 2.0 ainda está sendo
desenvolvido e se tornará normativo assim que for concluída sua elaboração,
substituindo a versão WCAG 1.0 que é normativa e recomendada. O objetivo do
documento WCAG 2.0 é ser compatível com a versão WCAG 1.0, de modo que a
conformidade à WCAG 2.0 requeira apenas pequenas mudanças na Web que já
estejam em conformidade com a WCAG 1.0 e poderá ser aplicado de forma mais
ampla, respeitando as diferentes tecnologias web. Ainda segundo o W3C, o
documento WCAG 2.0 poderá ser aplicado de forma mais ampla, respeitando as
diferentes tecnologias web.
65
3.1- Princípios de acessibilidade do WCAG 2.0 (rascunho)
Princípio / Descrição Diretrizes
1.1 – Prover textos alternativos para elementos não textuais que possam ser alterados pelos usuários em situações como: aumento do tamanho da fonte, braile, fala, símbolos ou em uma linguagem mais simples.
1.2 – Prover de modo sincronizado o acesso a outros tipos de multimídia.
1.3 – Fornecer ao usuário um conteúdo representado em diferentes formatos sem a perda de informação ou estrutura
Princípio 1 - PerceptívelO conteúdo deve ser percebível.
1.4 – As pessoas com deficiências devem ouvir e visualizar o conteúdo, inclusive separando a apresentação do conteúdo da estrutura de fundo da página.
2.1 – Todas as funções de uma página devem também ser acessadas via teclado.2.2 – Prover tempo suficiente para os usuários cm deficiência ler e utilizar o conteúdo.2.3 – Não disponibilizar flashes repetidas vezes que causam desconforto aos usuários e até ataques de epilepsia.
Princípio 2 - OperaçãoOs elementos de interface do conteúdo devem ser operáveis.
2.4 – Facilitar a navegação dos usuários com deficiência buscando o conteúdo e demonstrando onde ele está
3.1 – O conteúdo deve ser legível e compreensível.
3.2 – As páginas web devem aparecer e operar de forma previsível.
Princípio 3 - CompreensívelO conteúdo e controles devem ser compreensíveis.
3.3 – Orientar os usuários a prevenir e corrigir os erros.
Princípio 4 - RobustezO conteúdo deve ser robusto suficiente para trabalhar com tecnologias atuais e futuras.
4.1 – Maximizar de forma contínua a compatibilidade com agentes de usuário e com as tecnologias assistivas.
Tabela 05 - Princípios de acessibilidade do WCAG 2.0 (rascunho) fornecidos pelo W3C.
66
4 – Orientações em projetos web seguindo as diretrizes de acessibilidade dos
documentos WCAG 1.0 e WCAG 2.0 que abordam o uso da cor
4.1 – Recomendações do documento WCAG 1.0
A Recomendação 2 do documento WCAG 1.0 fornecido pela W3C, aborda
especificamente a escolha das cores em páginas web. Nessa recomendação, as
diretrizes de acessibilidade mostram para o designer uma maneira de não se
projetar uma página web, onde as informações são disponibilizadas para o usuário
somente pelo uso da cor, causando inacessibilidade ás pessoas que tem problema
na percepção das cores. A recomendação 2 do documento WCAG 1.0 diz que:
“Recomendação 2 - Não recorrer apenas à cor
Assegurar a percepção do texto e dos elementos gráficos quando
vistos sem cores.
Se a cor for o único meio utilizado para transmitir informações, as pessoas
que não são capazes de diferenciar certas cores, bem como os usuários de
dispositivos não coloridos ou com monitores não visuais, não receberão
essas informações. Se as cores de fundo e de primeiro plano tiverem tons
muito próximos, podem não ser suficientemente contrastantes quando
vistas em telas monocromáticas ou por pessoas com diferentes cromos
deficiências.
Pontos de verificação:
2.1 Assegurar que todas as informações veiculadas com cor estejam
também disponíveis sem cor, por exemplo, a partir do contexto ou de
marcações. [Prioridade 1].” (Guia do W3C - Recomendações para a
acessibilidade do conteúdo da Web 1.0, 1999).
A cor é muito utilizada em diversos meios de comunicação para se transmitir
uma informação. No caso da web, a cor representa uma grande importância em
obter a atenção do usuário em determinadas partes do site, levando-os a clicarem
em links, botões, imagens, banners ou em qualquer outra área do site. Conforme foi
abordado no capítulo 5 deste trabalho, destacando a parte que é abordada o
daltonismo, nem todos os usuários podem facilmente perceber as diferenças de cor,
e eles teriam grande dificuldade em compreender as informações que são
67
transmitidas somente por ela. Portanto, se o designer escolher as cores erradas para
o site passar algum tipo de informação, muitos usuários que possuem visão
deficiente das cores deixaram de obter uma informação e tornando o site difícil de
usar.
4.2 - Técnicas do ponto de verificação 2.1 do documento WCAG 1.0
4.2.1 – Exemplos
A figura 38 exemplifica o modo errado e correto de se projetar um formulário
de uma página web, onde os campos que são obrigatórios para o usuário preencher
é informado apenas pelo uso incorreto da cor.
Errado Correto
Figura 38 – Exemplo do uso incorreto da cor em formulários.
Neste caso, os campos obrigatórios de um formulário, devem ser acrescidos
além da cor vermelha um asterisco (*) na frente do rótulo de um formulário,
tornando-o acessível a uma pessoa com problemas na interpretação de cores, além
de contribuir também para que um leitor de tela de um usuário cego interprete o
asterisco como sendo um campo obrigatório.
Os links em uma página web não podem ser identificados apenas pelo uso da
cor. Na figura 39, os links contidos na matéria passam despercebidos para uma
pessoa que tem daltonismo.
68
Visão Normal Daltonismo
Figura 39 – Visão daltônica de uma notícia em um site.
É recomendável que links em páginas de internet possuam alguma
diferenciação do texto, para que uma pessoa perceba e clique. Essa diferenciação
pode ser feita pelo uso da estilização do link usando o sublinhado para identificá-lo.
Exemplo:
Visão Normal Daltonismo
Figura 40 – Link sublinhado identificado por um daltônico.
4.3 - Ponto de verificação 2.2 do documento WCAG 1.0
“2.2 - Assegurar que a combinação de cores entre o fundo e o
primeiro plano seja suficientemente contrastante para poder ser vista
por pessoas com cromo deficiências, bem como pelas que utilizam
monitores de vídeo monocromático. [Prioridade 2 para imagens;
prioridade 3 para texto].” (Guia do W3C - Recomendações para a
acessibilidade do conteúdo da Web – WCAG 1.0, 1999).
69
Nem todas as pessoas são capazes de facilmente diferenciar as combinações
de cores e os seus tons. Muitos usuários têm dificuldade de leitura quando a cor do
texto e a cor de fundo são parecidas. Essa dificuldade afeta principalmente as
pessoas mais velhas e aquelas que têm algum tipo de deficiência na percepção das
cores. Portanto duas cores que contrastam fortemente para uma pessoa com visão
normal podem não ser perceptíveis para uma pessoa com uma deficiência visual.
Arditi (1999) diz que o tom de uma cor, a luminosidade dela e a saturação,
são três atributos perceptivos da cor que podem ser visualizados como um sólido, e
fala para quando se for projetar uma página web, o designer deve exagerar na
diferença de luminosidade, tom da cor e a saturação, entre a cor de primeiro plano e
a cor de plano de fundo, conforme foi mostrado no capítulo 2.
4.3.1 - Técnicas do ponto de verificação 2.2 do documento WCAG 1.0
Considera-se que duas cores oferecem boas condições de visibilidade se o
valor que mede a diferença entre suas cores e a diferença entre seus
brilhos forem maiores do que os de uma determinada faixa. (Accessibility
Evaluation and Repair Tools (AERT), 2000)
Considerando as variações de deficientes visuais que tem dificuldade em
perceber as cores, é difícil chegar a um esquema de cores que satisfaça todos os
tipos de deficientes. Além das diretrizes fornecidas por Arditti (1999), a W3C sugere
duas fórmulas para se chegar a um esquema de cor que evite a inacessibilidade. A
primeira fórmula serve para calcular a diferença entre o brilho da cor de primeiro
plano com a cor do plano de fundo, e uma segunda fórmula para o cálculo da
diferença entre as duas cores.
4.3.2 - Fórmula para o cálculo do brilho de uma cor
O brilho de uma cor é definido pela seguinte fórmula:
((valor do vermelho * 299) + (valor do verde * 587) + (valor do azul * 114)) / 1000
A figura 41 possui um texto que está em primeiro plano e que tem o valor RBG em:
244 237 117. Já a cor do plano de fundo, o valor do RGB é de: 159 71 121.
70
Figura 41 – Cálculo de brilho entre duas cores.
A W3C diz que a diferença do brilho da cor de primeiro plano, com a cor do
plano de fundo deve ser >125 (maior que 125). Exemplo da fórmula:
Cálculo do brilho da cor do texto que é o primeiro plano:
((244 * 299) + (237 * 587) + (117 * 114)) / 1000
(72956) + (139119) + (13338) / 1000
225413 / 1000 = 225, 41
Calculo do brilho da cor do plano de fundo:
((159 * 299) + (71 * 587) + (121 * 114)) / 1000
(47541) + (41677) + (13794) / 1000
103012 / 1000 = 103, 01
Obtido o valor do brilho de ambas as cores, basta subtrair o valor do maior brilho
pelo menor brilho.
225,41 – 103,01 = 122,4
Portanto, segundo a fórmula sugerida pela W3C, à diferença de brilho entre
ás duas cores são insuficientes, pois o valor obtido foi de 122,4 sendo que o valor
necessário deve ser >125 (maior que 125).
4.3.3 - Fórmula para cálculo da diferença entre duas cores
Arditi (1999) mostrou em suas diretrizes que para aumentar a acessibilidade
de um projeto web para indivíduos com deficiência na interpretação das cores, é
aumentar o contraste da cor de primeiro plano da cor do plano de fundo. A W3C
disponibiliza uma segunda fórmula para calcular a diferença entre ás cores, e
estabelece que a diferença entre a cor de primeiro plano, e a cor de plano de fundo
deve ser >500 (maior que 500).
71
A figura 42 possui um texto que está em primeiro plano e que tem o valor
RBG em: 255 255 255. Já a cor do plano de fundo, o valor do RGB é de: 5 144
73.
Figura 42 – Cálculo da diferença entre duas cores
A W3C diz que a diferença entre a cor de primeiro plano, com a cor do plano
de fundo deve ser >500 (maior que 500). Exemplo da fórmula:
(máximo (valor vermelho 1, valor vermelho 2) - mínimo (valor vermelho 1, valor
vermelho 2)) + (máximo (valor verde 1, valor verde 2) - mínimo (valor verde 1, valor
verde 2)) + (máximo (valor azul 1, valor azul 2) - mínimo (valor azul 1, valor azul 2))
Para se calcular a diferença entre a do texto que é a de primeiro plano, para a
cor de plano de fundo da figura 18, e saber se existe uma diferença de cor ideal a
fórmula ficaria da seguinte forma:
(máximo (255, 5) - mínimo (255, 5)) + (máximo (255, 144) - mínimo (255, 144)) +
(máximo (255, 73) - mínimo (255, 73)) = 543
Segundo a fórmula sugerida pela W3C, à diferença das cores do primeiro
plano e a do plano de fundo da figura 18 são ideais, pois a diferença entre as duas
cores calculadas pela fórmula foi obtido o valor de 543, sendo que o valor
necessário fornecido pela recomendação do W3C deve ser >500 (maior que 500).
4.4 - Recomendações do documento WCAG 2.0 (rascunho)
“Diretriz 1.4: Deixe o conteúdo fácil para o usuário ver e ouvir
incluindo a separação do primeiro plano e do plano de fundo.
1.4.3 - Contraste (Mínimo): A apresentação de textos e imagens de texto
possui uma taxa de contraste de ao menos 5:1, exceto nos seguintes
casos: Nível AA.
Letras grandes: Larga escala de texto e imagens de larga escala
de texto têm a taxa de contraste de ao menos 3:1
72
Incidente: Texto ou imagens de texto que são partes inativas de
um componente de interface de usuário, algo que é meramente
decorativo, um texto ou imagem incidente, ou que não são visíveis
para ninguém, não possuem taxa mínima de contraste.
Logotipos: Texto que são as parte de um logo ou o nome da
marca não possui taxa de contraste mínima.
1.4.6 - Contraste (avançado): A apresentação visual de texto e imagens
do texto tem um contraste médio de pelo menos 7:1, com exceção dos
seguintes casos: (nível AAA).
Letras grandes: Em larga escala de texto e imagens de grande
escala texto tem uma média de contraste de pelo menos, 5:1;
Incidente: Texto ou imagens de texto que são partes inativas de
um componente de interface de usuário, algo que é meramente
decorativo, um texto ou imagem incidente, ou que não são visíveis
para ninguém, não possuem taxa mínima de contraste.
Logotipos: Texto que são as parte de um logo ou o nome da
marca não possui taxa de contraste mínima.” (Guia do W3C -
WCAG 2.0 – Diretrizes de acessibilidade do conteúdo Web –
Candidato a Recomendação, 2008).
Segundo o documento W3C – Understanding WCAG 2.0 - Document Contrast
(Minimum) - Understanding SC 1.4.3 (Contraste Mínimo - Compreensão da Diretriz
1.4.3) do documento WCAG 2.0, fornecido pelo W3C, (disponível em:
<http://www.w3.org/TR/2008/WD-UNDERSTANDING-WCAG20-20080430/visual-
audio-contrast-contrast.html/>, acesso em: 12 de outubro de 2008), o principal
objetivo dessa diretriz é de proporcionar contraste suficiente entre o texto e o seu
fundo, onde possa ser lido por usuários que possuam baixa visão. A deficiência na
percepção de cores pode afetar o grau de luminosidade, influenciando na percepção
de pouco contraste, e por esse motivo, o contraste é calculado de forma que não
permita aos usuários que tem problemas na percepção de cores, se adapte entre o
contraste de primeiro plano e do plano de fundo. Esse mesmo documento de
compreensão da diretriz 1.4.3 diz que textos que possuem caracteres mais amplos
ou em negrito, são mais fáceis de ler quando há pouco contraste, permitindo que
autores de página web possam escolher uma vasta combinação de cores,
especialmente em títulos com 18pt de tamanho ou 14pt em negrito.
73
4.4.1 - Justificativas da taxa de contraste de luminosidade
Os tons são percebidos de forma diferente por usuários com deficiências
na visão colorida (tanto congênitas ou adquiridas), resultando em diferentes
cores e contrastes de luminância, do que para os usuários com visão
normal. [...] Proporcionar uma luminância mínima de contraste entre o texto
e o seu fundo pode tornar o texto mais legível, mesmo quando uma pessoa
não consegue ver toda a gama de cores. Também funciona para os raros
indivíduos que não vêem cores. (W3C – Understanding WCAG 2.0 -
Document Contrast (Minimum) - Understanding SC 1.4.3, 2008)
Esse mesmo documento, diz que uma média de contraste 3 é o nível mínimo
recomendado para o texto padrão e a visão normal. Já a média obtida no cálculo de
contraste de luminosidade deve ser de 5:1, para suprir as perdas no contraste que
são resultados de baixa acuidade visual, anomalias congênitas das cores ou
adquiridas, ou pela perda de sensibilidade do contraste no envelhecimento de uma
pessoa. De acordo com o documento, a média de contraste 5:1 escolhido para nível
“AA” compensa a perda de sensibilidade ao contraste, geralmente sentidos por
usuários com baixa visão, com perca equivalente a cerca de 20/40 da visão. (20/40
calcula-se cerca de 4.5, que é arredondado para 5:1 proporcionando um ligeiro
aumento da contrapartida adicional.) 20/40 é comumente relatada como normal a
acuidade visual dos idosos com cerca de 80 anos.
E por fim, a média de contraste de luminosidade escolhido para nível “AAA”
recomendada deve ser de 7:1, pois, compensa a perda de sensibilidade ao contraste
geralmente sentido por usuários com perdas de visão equivalentes a cerca de 20/80.
Pessoas com mais de tal grau de perda visual geralmente se utilizam de tecnologias
assistivas para ter acesso ao conteúdo.
4.4.2 - Fórmula para cálculo de luminosidade de uma cor
A W3C recomenda o uso da seguinte fórmula para o cálculo de contraste de
luminosidade entre um elemento de primeiro plano e plano de fundo:
0.2126 * ((R / FS) ^ 2.2) + 0.7152 * ((G / FS) ^ 2.2) + 0.0722 * ((B / FS) ^ 2.2)
A figura 43 possui um texto em primeiro plano de amarela com RGB de: 240
233 102, sobre um fundo vermelho em RBG de: 235 61 20.
74
Figura 43 – Cálculo da luminosidade entre duas cores.
Calculo da luminosidade da cor de primeiro plano:
0.2126 * ((240 /255) ^ 2.2) + 0.7152 * ((233 / 255) ^ 2.2) + 0.0722 * ((102 / 255) ^ 2.2)
0.2126 * (0,94117647058823529411764705882353 ^ 2.2) + 0.7152 *
(0,91372549019607843137254901960784 ^ 2.2) + 0.0722 * (0,4 ^ 2.2)
0.2126 * 0,87513758236520492791333692861425 + 0.7152 *
0,81996370532352798936029747131904 + 0.0722 *
0,13320851318429970246653555493722
0,18605425001084256767437543102334 +
0,58643804204738721799048475148735 +
0,0096176546519064385180838670664514
= 0,782109946710136224182944049576
Portanto, o valor encontrado da luminosidade do amarelo é de:
0,782109946710136224182944049576.
Calculo da luminosidade da cor de plano de fundo:
0.2126 * ((235 /255) ^ 2.2) + 0.7152 * ((61 / 255) ^ 2.2) + 0.0722 * ((20 / 255) ^ 2.2)
0.2126 * (0,92156862745098039215686274509804 ^ 2.2) + 0.7152 *
(0,23921568627450980392156862745098 ^ 2.2) + 0.0722 *
(0,078431372549019607843137254901961 ^ 2.2)
0.2126 * 0,83552779146084101559963428373686 + 0.7152 *
0,042987010162657119845930410489225 + 0.0722 *
0,003697239578900132264152254872368
75
0,17763320846457479991648224872227 +
0,030744309668332372113809429581733 +
0,0002669406975965895494717928017584
= 0,208644458830503761579763471104
Portanto, o valor encontrado da luminosidade do amarelo é de:
0,208644458830503761579763471104.
Depois de encontrado o valor da luminosidade da cor do texto que está em
primeiro e o valor da luminosidade da cor vermelha que está como plano de fundo
será aplicado à fórmula que calcula a diferença entre essas luminosidades.
4.4.3 – Fórmula para calcular a diferença entre a luminosidade
Depois de calculado a luminosidade das duas cores, é necessário aplicar a
última fórmula para se calcular a diferença de luminosidade entre elas. A W3C
recomenda a seguinte fórmula:
(L1 + 0.05) / (L2 + 0,05)
Onde, L1 será o valor da luminosidade do texto amarelo obtido, e L2 a luminosidade
obtida da cor vermelha que está como plano de fundo.
A fórmula usando os dois valores obtidos se aplicaria da seguinte forma:
(0,782109946710136224182944049576 + 0.05) /
(0,208644458830503761579763471104 + 0,05)
0,832109946710136224182944049576 /
0,258644458830503761579763471104
= 3,2171961095653661887049850138694
Portanto, o valor encontrado da diferença de luminosidade entre as duas
cores é inferior ao sugerido pela W3C, pois o valor obtido foi de: 3,2:1. É
recomendado que o valor mínimo de contraste de luminosidade seja de 5:1.
76
CAPÍTULO VII
Programas e páginas web que auxiliam designers no uso correto
da cor
1 – Programas
1.1 – Color Vision
Desenvolvido por Bernhard Jenny 1 e Nathaniel Vaughn Kelso 2, o Color
Oracle é um simulador de variações cromáticas em tempo real, e tem a função de
mostrar para o designer, como um usuário possuindo umas das três variações de
daltonismo percebe as cores contidas na página que ele esteja projetando.
Durante o desenvolvimento do layout, o designer poderá usá-lo, verificando se as
cores que estão sendo usadas possuem legibilidade suficiente, ou se elementos
da página conseguem ser percebidos por um Daltônico, pois o programa quando
ativo, cria um filtro na tela, possibilitando a análise de possíveis problemas de
acessibilidade no uso das cores na página.
O Color Oracle funciona nas plataformas: Windows 2000, XP, Vista, Linux e
Mac Os X, está disponível gratuitamente em: <http://colororacle.cartography.ch/>
1.1.1 - Usando o Color Oracle
No Windows, quando ativo, o Color Oracle fica disponível na barra de
tarefas, e o designer poderá acessá-lo, fazendo o teste com as três variações de
daltonismo no layout em desenvolvimento.
1 Jenny trabalha no Institute of Cartography ETH em Zurique, na Suíça, onde se concentra narepresentação, detecção e solução de conflitos em mapas.2 Nathaniel Vaughn Kelso é um cartógrafo do The Washington Post, Washington DC, onde produz impressão gráfica diárias para publicação na web e gráficos interativos.
77
Figura 44 – Color Oracle sendo executado.
1.1.2 – Teste de daltonismo no site da Fatea
Figura 45 – Site da Fatea visto por uma pessoa com visão normal.
78
1.1.3 – Simulação de Deuteranopia no site da Fatea
Figura 46 – Simulação do Color Oracle de usuários com deuteranopia.
79
1.1.4 – Simulação de Protanopia no site da Fatea
Figura 47 – Simulação do Color Oracle de usuários com protanopia.
80
1.1.5 – Simulação de Tritanopia no site da Fatea
Figura 48 – Simulação do Color Oracle de usuários com tritanopia.
81
1.2 - Colour Constrast Analyser (CCA)
Desenvolvido por JUn do Wrong HTML em colaboração com Steve
Faulkner do Vision Austrália, o Colour Constrast Analyser é um software freeware
que se utiliza das fórmulas sugeridas pela WC3, permitindo ao designer de
páginas web, verificar todas ás cores do layout. Sua principal função é de verificar
se o brilho, a luminosidade e o contraste das cores entre o primeiro plano e o
plano de fundo oferecem ao usuário boa legibilidade. O Colour Contrast Analyser
está disponível gratuitamente para download em:
<http://www.visionaustralia.org.au/info.aspx?page=628/>
Figura 49 – Tela do analisador de contraste.
1.2.1 - Usando o CAA
A tela do CCA é dividida da seguinte forma:
1. Foreground color e Background color
2. Algorithm
3. Results
82
1.2.2 - Foreground color e Background color
Nesta parte o designer deverá escolher ás cores de plano de primeiro plano
(foreground color) e plano de fundo (background color) para serem analisadas
pelo CCA.
Figura 50 – Escolha do uso das cores para serem analisadas.
1.2.3 – Algorithm
Depois de escolhida às cores que serão analisadas, o designer deverá
escolher o tipo de algoritmo que o CCA irá fazer. Os algoritmos de cálculos são
baseados nas fórmulas sugeridas pela W 3C.
Figura 51 – Escolha do algoritmo a ser usado no cálculo de contraste.
1.2.4 – Results
São mostrados os resultados obtidos da análise dos algoritmos escolhidos.
Nessa parte, o designer poderá obter o resultado da diferença entre as duas
cores, a diferença entre o brilho e luminosidade, além de poder observar o
resultado sendo mostrado de acordo com as diretrizes da W3C. Em algumas
análises o CCA mostrará o resultado seguindo as diretrizes fornecidas pela W3C.
83
Figura 52 – Resultado obtido do cálculo da diferença de cor e brilho entre duas
cores analisadas.
Figura 53 – Resultado descritivo da diferença entre duas cores e o brilho entre
elas.
84
Figura 54 – Resultado da luminosidade das cores para usuários que possuem um
dos três tipos de daltonismo.
Figura 55 – Resultado detalhado da diferença da luminosidade entre duas cores.
85
2 – Páginas web
2.1 - Trace Research & Development Center
Segundo o site da Trace Research & Development Center Consortium
(disponível em: <http://trace.wisc.edu/about/>, acesso em: 18 de outubro de
2008), é uma parte da Faculdade de Engenharia da Universidade de Wisconsin-
Madison. Fundada em 1971, Trace tem sido pioneira no campo da tecnologia e da
deficiência. A Trade Research & Development fornece através de sua página na
internet, várias tabelas de combinações de cores seguras para web, que podem
ser consultadas pelo designer neste endereço: <http://trace.wisc.edu/contrast-
ratio-examples/>, quando for projetar uma página. Alguns trechos de exemplos de
cores dessas tabelas podem ser conferidos nas figuras abaixo:
Figura 56 – Contraste da cor preta em diversas simulações.
Figura 57 – Contraste da cor branca em diversas simulações.
86
2.2 – Truwex Online 2.0 - Validação de acessibilidade online
De acordo com o site da Erigami Truwex: Website Quality Assurance
Product (disponível em: <http://www.erigami.com/truwex/>, acesso em: 14 de
outubro de 2008), a Truwex “é uma ferramenta de gestão de qualidade na Web
[...] digitalizando as páginas de um site, validando-o sobre privacidades,
acessibilidade, busca e normas de qualidade, disponibilizando os resultados em
relatórios visuais online”.
Designers e desenvolvedores web depois de terminarem o
desenvolvimento de uma página web, e que seguiram as orientações de
acessibilidade fornecidos pela W3C em seu documentos, podem se utilizar dessa
ferramenta para validação de acessibilidade na página que foi projetada. O teste
online feito pelo Truwex Online 2.0, verifica se a página respeita todas as normas
de acessibilidade dos documentos WCAG 1.0 e no documento WCAG 2.0
(rascunho) ele verifica cores e combinações de fundo utilizando a fórmula de
cálculo de luminosidade. O teste pode ser feito acessando o endereço:
<http://checkwebsite.erigami.com/accessibility.html/>.
Figura 58 – Página inicial do teste online do Truwex Online 2.0.
87
Na página inicial do Truwex, deve ser inserido o endereço da página onde
será feito o teste de acessibilidade online, permitindo ao designer ou desenvolver
web selecionar no menu quais diretrizes que o teste deve analisar na página. Na
figura 59 é exibida a página de relatório do site da Fatea.
Figura 59 – Relatório de acessibilidade do site da Fatea.
Para esta analise foi utilizada apenas os teste de acessibilidade que
reportam sobre o baixo contraste em textos da página e o baixo contraste de
luminosidade. O relatório indica através da seta, que o texto do menu e seu plano
de fundo possuí um valor de 315 na diferença de cor, diferença de brilho em 114
considerados baixos pelas fórmulas de diferença de cor e brilho sugeridas pela
W3C.
88
CAPÍTULO VIII
Análise do contraste de cor, brilho, luminosidade e simulação de
daltonismo no site de Vestibular 2008 da Fatea
Giz Lemon 1, publicou em sua página pessoal na internet o Juice Studios
(disponível em: <http://juicystudio.com/services/coloursaferatio.php/>, acesso em: 13
de outubro de 2008) uma tabela de cores que mostra o resultado do contraste da
luminosidade, brilho e a diferença de várias cores que foram analisadas pelo
programa Colour Analyser Constrast. Nessa tabela, para representar graficamente
se uma cor atingiu legibilidade e visibilidade adequada. Lemon propôs os seguintes
ícones representativos:
Ícone Significado
Indica se o valor obtido falhou no teste.
Indicada se o valor obtido passou no teste.
Indica que o contraste de luminosidade passa no nível AA em
textos grandes com no mínimo 18 pontos ou 14 pontos em
negrito.
Indica que o contraste de luminosidade passa no nível AAA
em textos grandes com no mínimo 18 pontos ou 14 pontos
em negrito.
Indica que o contraste de luminosidade passa no nível AA em
textos normais.
Indica que o contraste de luminosidade passa no nível AAA
em textos normais.
Tabela 06 – Significados dos ícones na análise de cores feita por Giz Lemon.
1 Membro do Web Standards Project’s Accessibility Task Force, consultor de acessibilidade do Paciello Group e é criador e mantenedor do site Juice Studio que tem como missão principal promover melhores práticas de acessibilidade para desenvolvedores web.
89
Exemplo de um trecho da tabela de cores analisadas por Giz Lemon.
Foreground Colour
SampleLuminosity
Contrast Ratio
Difference in Brightness
Difference in Colour
#3f6 Sample 15,64 170 357
#3f9 Sample 15,90 176 408
#3fc Sample 16,32 188 510
#3ff Sample 16,89 194 561
#600 Sample 1,56 30 102
Tabela 07 – Trecho da tabela de Limon usando a cor de fundo #00000.
Seguindo as análises de Giz Lemon e sua tabela de dados sobre informações
das cores, optou-se em analisar as páginas da página incial do site de Vestibular
2008 da Fatea e também a página de Cursos do site de Vestibular a Fatea.
90
1 - Análise da página inicial de Vestibular da Fatea 2008
Figura 60 – Análise da página de vestibular 2008 da Fatea.
91
1.1 - Página inicial - Tabela de resultado
Parte analisada
Cor de primeiroplano
Cor do plano de fundo
Contraste de luminosidadeDiferença de
brilhoDiferença entre
as cores
01 #790000 #E3C582 6,9 162 433
02 #002A72 #EFE7D4 10,8 194 526
03 #003691 #E1D1B0 7,2 162 411
04 #FFA800 #E1D1B0 1,3 243 33
05 #014157 #E1D1B0 7,2 159 449
06 #FFFFFF #EFD33F 1,3 53 252
07 #F7D85F #3F5B67 5,1 128 317
08 #FFFFFF #5F636C 6,0 157 463
09 #FFFFFF #978D8B 3,2 112 39
10 #6DD7F0 #A38C94 1,9 39 334
11 #FFFFFF #B7B4AB 2,1 76 231
12 #FFA800 #B7B4AB 1,1 5 255
13 #8095B0 #002B60 4,5 109 314
14 #FFFFFF #002B60 13,9 219 626
15 #ABE1FA #002B60 9,8 175 507
Tabela 08 – Análise do contraste de cores, luminosidade e brilho da página de vestibular da Fatea.
92
1.1.2 - Simulação em Deuteranopia
Figura 61 – Simulação em Deuteranopia da página inicial do vestibular 2008 da Fatea
93
1.1.3 - Simulação em Protanopia
Figura 62 – Simulação em Protanopia da página inicial do vestibular 2008 da Fatea.
94
1.1.4 - Simulação em Tritanopia
Figura 63 – Simulação em Tritanopia da página inicial do vestibular 2008 da Fatea.
95
1.2 - Análise da página de cursos
Figura 64 - Análise da página de cursos.
96
1.2.1 - Página de cursos - tabela de resultado
Parte analisada
Cor de primeiroplano
Cor do plano de fundo
Contraste de luminosidadeDiferença de
brilhoDiferença entre
as cores
01 #FFFFFF #CFB38C 2,0 73 239
02 #FFFFFF #00254D 15,3 225 651
03 #13110D #C7AE85 8,8 159 457
04 #FFA800 #00254D 7,9 144 463
05 #FFFFFF #FEB106 1,8 75 328
06 #CC6A00 #DFCFAD 2,4 84 293
07 #FFFFFF #DFCFAD 1,2 24 80
08 #9E0B0F #DFCFAD 5,4 152 419
09 #000000 #DFCFAD 13,7 207 603
10 #FFFFFF #003691 10,8 207 566
11 #FFFFFF #DFCFAD 1,5 48 162
12 #1C4994 #DFCFAD 5,6 139 354
Tabela 09 – Análise do contraste de cores, luminosidade e brilho da página de cursos.
97
1.2.2 - Simulação em Deuteranopia
Figura 65 – Simulação em Deuteranopia da página de cursos do vestibular 2008.
98
1.2.3 - Simulação em Protanopia
Figura 66 – Simulação em Protanopia da página de cursos do vestibular 2008.
99
1.2.4 - Simulação em Tritanopia
Figura 67 – Simulação em Tritanopia da página de cursos do vestibular 2008.
100
CAPÍTULO IX
Conclusões
1 - Conclusão
Perante as pesquisas elaboradas neste projeto, constatou-se a
importância de um ambiente promotor acessível que faça a inclusão dos
deficientes visuais no acesso a informação em páginas web. Especificamente,
tratou usuários que possuem baixa visão, possuindo as três variações de
daltonismo e dificuldade de legibilidade em textos e imagens que possuam em
suas cores baixa contraste de luminosidade, contraste de cor e brilho.
Os estudos feitos neste projeto demonstraram de várias maneiras
técnicas e ferramentas que designers devem usar e saber para quando forem
projetar uma página web, possam incluir essas pessoas com baixa visão
tornando acessível às informações contidas nas páginas web, permitindo a
estes usuários uma maior independência ao executar suas tarefas básicas
como acessar seu email, efetuar suas compras online sem precisar se deslocar
a um determinado estabelecimento comercial, de se comunicarem e de se
relacionarem com amigos e familiares, além de poderem efetuar pagamentos
online de suas contas de forma mais cômoda e fácil.
O uso das diretrizes de acessibilidade que fala sobre o uso correto da
cor e suas três fórmulas de cálculo de brilho, luminosidade e diferença entre
cores abordadas nessa pesquisa, fornecidas pela W3C, contribuem de forma
essencial quando se for projetar uma página web, pois essas recomendações
contidas nos documentos WCAG 1.0 e WCAG 2.0 (rascunho) orientam o
designer em vários pontos que ele deve levar em consideração para a
promoção de acessibilidade em seus projetos de internet.
Conclui-se que a cor não deve ser simplesmente escolhida por atender
uma expectativa gráfica visualmente bonita, ou simplesmente combinatória,
tornando um layout graficamente agradável e bonito, deve-se empregar a cor
de forma correta, que além de suprir as necessidades gráficas de um layout,
101
possa também ser legível e visível, não se tornando a única opção para a
disponibilização e percepção de conteúdo e informações na página. Designers
devem se preocupar no desenvolvimento da interface gráfica da página o uso
correto da cor que será empregada no layout, pois existem usuários que não
sabem distinguir a diferença entre uma cor e outra (daltonismo) e aqueles que
possuem dificuldade de interpretar a diferença de contraste entre brilho,
luminosidade e contraste entre as cores.
Designers que incluírem em seus projetos web a acessibilidade tornam-
as amigáveis abrangendo ainda mais a página que foi desenvolvida a um
número maior de usuários, pois além de proporcionar o aumento da audiência,
faz que o usuário não desista da navegação por encontrar dificuldades na
interpretação de conteúdo disponível apenas pela cor má empregada, pois
deficientes também são consumidores e usam a internet para fazer suas
compras igualmente feitas por um usuário normal. Uma página web que foi
projetada com acessibilidade, promove um ambiente fácil e amigável, sem que
nenhum tipo de limitação seja imposto a estes usuários que possuem algum
tipo de deficiência na visão.
1.2 – Sugestões para futuros trabalhos
Conclui-se também durante essa pesquisa que a acessibilidade em
páginas de internet é um estudo amplo, que abrange não somente deficientes
físicos, visuais, motores e cognitivos, mas também aborda usuários com tipos
de conexão mais lentos como a conexão discada, softwares e hardwares
antigos, ambiente que interferem na acessibilidade, diferença entre
navegadores, usuários de dispositivo móvel como um celular ou PDA, enfim
uma série de itens que são necessários a averiguação e estudos, para se criar
de forma correta um ambiente acessível que atenda todas essas necessidades.
102
Referência bibliográfica
Internet
Lewis, A. & Zhaoping, L. (2006). Are cone sensitivities determined by natural color statistics? Journal of Vision, 6(3):8, 285-302, Disponível em: <http://journalofvision.org/6/3/8//>, acesso em 23 de agosto de 2008.
Professor Tom Salt. Visual processing in the outer retina, Disponível em: <http://cvision.ucsd.edu/C44/Lecture%20Notes/Salt/Tom%20Salt%20Retina.pdf>,acesso em 23 de agosto de 2008.
OMS – Organização Mundial de Saúde. Disponível em: <http://www.who.int/blindness/causes/magnitude/en/>, acesso em 24 de agosto de 2008.
Institute for Color Research – (Instituto de pesquisa da cor). Disponível em: <http://www.ccicolor.com/research.html/>, acesso em 28 de setembro de 2008.
RGB World – Understanding Color (disponível em <http://www.rgbworld.com/color.html/>, acesso em 29 de setembro de 2008).
North Carolina State University. Disponível em: <http://www.ncsu.edu/scivis/lessons/colormodels/color_models2.html/>, acesso em 29 de setembro de 2008.
Governo Federal - Decreto de lei 5296 de 2 de dezembro de 2004. Disponível em: <http://www.planalto.gov.br/ccivil/_ato2004-2006/2004/decreto/d5296.htm/> acesso em: 30 de setembro de 2008.
SERPRO - Serviço Federal de Processamento de Dados. Disponível em: <http://www.serpro.gov.br/acessibilidade/oque.php/> acesso em 30 de setembro de 2008.
Rita Bersch (fisioterapeuta / diretora do CEDI - Centro Especializado em Desenvolvimento Infantil / ATACP 2006 - Assistive Technology Applications Certificate Program pela CSUN California State University - Northridge - EUA / membro da ISAAC - International Society for Augmentative and Alternative Communication). Disponível em: <http://www.assistiva.com.br>, acesso em 02 de outubro de 2008.
103
Site da Apple - VoiceOver, a interface falada para o Mac OS X - Disponível em: <http://docs.info.apple.com/article.html?path=Mac/10.4/pt/mh1010.html/>, acesso em 02 de outubro de 2008.
SILVA FILHO, A. M, 2003. Percepção Humana na Interação Humano-Computador.Disponível em: <http://www.espacoacademico.com.br/025/25amsf.htm>, acesso em 04 de outubro de 2008.CBO – Conselho Brasileiro de Oftalmologia – Disponível em: <http://www.cbo.com.br/site/index.php?mostra=doencas_visao_subnormal/>, acesso em 05 de outubro de 2008.
ARDITI, A. - Projetando para pessoas com deficiência parcial da visão e cores. Disponível em: <http://www.lighthouse.org/accessibility/effective-color-contrast/>, acesso em 06 de outubro de 2008.
W3C – World Wide Web Consortium – Consórcio formado para determinação de regras de acessibilidade na web. Disponível em: <http://www.w3c.org/>, acesso em 08 de outubro de 2008.
Maujor – Tutoriais CSS, HTML, XHTML, Normas do W3C, Tableless, Web Standards, Acessibilidade. Disponível em: <http://www.maujor.com/index.php/> acesso em 8 de outubro de 2008.
WCAG 1.0 - Web Content Accessibility Guidelines (Diretrizes de acessibilidade para o conteúdo web). Disponível em: <http://www.w3.org/TR/WAI-WEBCONTENT/> acesso em 08 de outubro de 2008.
AERT – Techniques For Accessibility Evaluation And Repair Tools. Disponível em: <http://www.w3.org/TR/AERT.html#color /> acesso em 10 de outubro de 2008.
W3C – Understanding WCAG 2.0 - Document Contrast (Minimum) -Understanding SC 1.4.3 (Contraste Mínimo - Compreensão da Diretriz 1.4.3). Disponível em: <http://www.w3.org/TR/AERT.html#color /> acesso em: 12 de outubro de 2008.
Livros
Brasil. Coordenadoria Nacional para Integração da Pessoa Portadora de Deficiência. Acessibilidade. - Brasília: Secretaria Especial dos Direitos Humanos. -180 p. 21 cm.
104
Gerhard K. Lang, MD. Ophthalmology – A Pocket Text Book Atlas. Germany: Thieme, 2007. 2nd ed. 607 f.
LORANGER, Hoa. In NIELSEN, Jakob. Usabilidade na Web - Projetando websites com qualidade. Brasil: Campus, 2007 432 f.FARINA, Modesto. In PEREZ, Coltilde. In BASTOS, Dorinho – Psicodinâmica das cores em comunicação. São Paulo: Edgard Blucher, 2006 173 f.
ROCHA, H. V. ; BARANAUSKAS, M. C. C. Design e Avaliação de Interfaces Humano-Computador. 1. ed. São Paulo: Escola de Computação - 12, Sp, 2000, 2000. 242 f
CYBIS, Walter. Ergonomia e Usabilidade: Conhecimentos, Métodos e Aplicações. São Paulo: Novatec, 2007 352 f.
GODINHO, Francisco. Internet para necessidades especiais. Utad: Utad / Guia, 1999 352 f.
Teses e dissertações
BONATTO, Selmo José. O desenvolvimento de um modelo de ambiente promotor de pessoas com deficiência visual na web. 2003. 120 f. Dissertação de mestrado em engenharia de produção. Programa de pós-graduação em engenharia da produção, UFSC, Florianópolis, 2003.
Artigos
LOPES BRISSON, João. Cor e Luz - Apontamentos da disciplina de Computação Gráfica, Instituto Superior Técnico, Lisboa, 2003.
RAMBAUSKE, Ana Maria. Decoração e Design de Interiores – Teoria da cor I, II, III e IV. Brasil.
Before & After Magazine. Our Color Wheel – The Color Wheel is our tool for undestanding which colors go with what. ISSN 1049-0035.