Acessibilidade em páginas de internet

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



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



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


Figura 63 - Simulação em Tritanopia da página inicial


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.

Documents

Acessibilidade em páginas de internet