Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
DESENVOLVENDO PARA DEFICIENTES
VISUAIS
ÍNDICE
1.
INTRODUÇÃO .................................................................................. 1
2.
QUEBRANDO PARADIGMAS .............................................................. 2
3.
ESTATÍSTICA SOBRE O DEFICIENTE VISUAL NA REIGÃO METROPOLITANA
DE CAMPINAS (RMC) ....................................................................... 2
4.
DA INFORMÇÃO AO CONHECIMENTO ................................................. 4
4.1
INFORMAÇÃO ................................................................................. 4
4.2
CONHECIMENTO .............................................................................. 4
5.
INTERNET ....................................................................................... 5
5.1
BROWSER7
6.
WEBDESIGN ................................................................................... 7
7.
USABILIDADE NA INTERNET ............................................................. 9
7.1
SEGMENTAÇÃO DE MERCADO ......................................................... 10
8.
ARQUITETURA DA INFORMAÇÃO...................................................... 11
8.1
DEFINIÇÃO DE FLUXO DE NAVEG. DO WEBSITE ................................ 12
8.2
DEFINIÇÃO DE NOMENCLATURA DE SEÇÃO ..................................... 12
9.
ACESSIBILIDADE........................................................................... 13
9.1
ACESSIBILIDADE NO BRASIL .......................................................... 14
10.
PROGRAMAÇÃO ESPECIAL PARA CONSTRUÇÃO DE WEBSITES ACESSÍVEIS
................................................................................................... 17
Pedro F. Carvalho
Analista de Sistemas
10.1
[email protected]
S. J. Rio Preto - 2009
APRESENTAÇÃO DA INFORMAÇÃO .................................................. 17
10.1.1 IMAGEM COMPLEXA:GRÁFICO ETC.. . ................................................. 17
10.1.2 IMAGEM MAPEADA ........................................................................... 18
10.1.3 SCRIPTS.......................................................................................... 19
10.1.4 BULLETS E LISTA.............................................................................. 20
10.1.5 SONS,ÁUDIOS E VÍDEOS .................................................................. 22
10.1.6 CORES E FUNDOS ............................................................................ 23
10.1.7 IDIOMAS ........................................................................................ 24
10.1.8 IDIOMA PRINCIPAL .......................................................................... 25
10.1.9 TABELA .......................................................................................... 25
10.1.10 FORMALÁRIOS ............................................................................... 30
10.1.11 LINKS ........................................................................................... 34
10.2
APRESENTAÇÃO, ESTRUTURA E CONTEÚDO ......................................... 37
10.3
VERIFICAÇÃO DA ACESSIBILIDADE ..................................................... 39
11.
CONCLUSÃO...................................................................................... 41
12.
BIBLIOGRAFIA ................................................................................... 43
Pedro F. Carvalho
Analista de Sistemas
1.
[email protected]
S. J. Rio Preto - 2009
INTRODUÇÃO
O mundo vive atualmente a ERA DA INFORMAÇÃO ou SOCIEDADE DA
INFORMAÇÃO, utilização de tecnologias de informação e comunicação está em
expansão no mundo a internet é a “anfitriã” desta era.
Os computadores pessoais e demais tecnologias que possibilitam a interface
entre o homem e a informação estão mais acessíveis economicamente às pessoas.
Atualmente é possível comprar um computador facilmente, possibilitando
acesso à internet.
Acessibilidade é um termo muito mais amplo do que apenas “acesso a algo”.
Uma minoria da sociedade não tem os mesmos direitos de acessibilidade às
tecnologias de informação e comunicação. São eles os cegos ou amblíopes.
A maioria dos websites e computadores têm barreiras de acessibilidade
impossibilitando a maioria das pessoas com deficiência física o acesso a informação.
O
objetivo
deste
trabalho
é
desenvolver
acessibilidade
na
internet
especificamente para os cegos por meio da conscientização dos desenvolvedores web
(webmasters, webdesigners, projetistas, consultores, empresários), empresas públicas
/privadas e todas as pessoas com disposição para aprender e concretizar esta idéia.
É dever de todos estes grupos citados acima que assegurem a disponibilização
acessível da informação na INTERNET para todos com necessidades especiais.
Sendo assim é necessário o entendimento das soluções técnicas para que este
objetivo seja alcançado.
Pedro F. Carvalho
Analista de Sistemas
2.
[email protected]
S. J. Rio Preto - 2009
QUEBRANDO PARADIGMAS
A deficiência visual, seja ela cegueira total ou baixa visão, pode afetar a
pessoa em qualquer idade. Bebês podem nascer sem visão e outras
pessoas podem tornar-se deficientes visuais, em qualquer fase da vida,
desde os primeiros dias de vida até a idade avançada. A deficiência
visual ocorre independentemente de sexo, religião, crenças, grupo
étnico, raça, ancestrais, educação, cultura, saúde, posição social,
condições de residência ou qualquer outra condição específica. Pode
ocorrer repentinamente de um acidente ou doença súbita, ou tão
gradativamente que a pessoa atingida demora a tomar consciência do
que está acontecendo.
A deficiência visual interfere em habilidades e capacidades e afeta, não
somente a vida da pessoa que perdeu a visão, mas também dos
membros da família, amigos, colegas, professores, empregadores e
outros. Entretanto, com tratamento precoce, atendimento educacional
adequado, programas e serviços especializados, a perda da visão não
significará o fim da vida independente e não ameaçará a vida plena e
produtiva.
(Texto retirado
http://www.fundacaodorina.org.br/fundacao/deficiencia.asp )
3.
ESTATÍSTICA
SOBRE
OS
DEFICIENTES
METROPOLITANA DE CAMPINAS (RMC)
VISUAIS
NA
REGIÃO
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
Os números da Região Metropolitana de Campinas (RMC) em relação às
pessoas com deficiência acompanham as dimensões nacionais, de
acordo com dados deste ano do Instituto Brasileiro de Geografia e
Estatística (IBGE). Cerca de 357 mil pessoas são portadoras de
deficiência mental, física, auditiva ou visual. O número representa
13,5% da população residente nas 19 cidades englobadas.A deficiência
com maior registro é a visual. Um total de 5,9% dos registros, ou
157.154 pessoas com dificuldade permanente para enxergar, mesmo
com o uso de óculos. Os portadores de deficiência auditiva são 2,4% da
população (63.264 pessoas), enquanto os doentes mentais somam
35.512 pessoas (1,3%).
Ainda de acordo com o levantamento do IBGE, existem na RMC 12.552
(0,47%) pessoas portadoras de tetraplegia, paraplegia ou hemiplegia
permanente. Há também 5.373 habitantes (0,20%) com falta de algum
membro ou parte dele e 83.796 pessoas (3,1%) com dificuldade
permanente de caminhar ou subir escadas.
Indaiatuba é a cidade da região com a maior proporção de pessoas com
pelo menos uma das deficiências registradas pela pesquisa. O estudo
estatístico aponta que 18,7% da população desta cidade são deficientes.
A menor proporção em relação a este aspecto fica na cidade de
Engenheiro Coelho, que registra a marca de 8,9% dos moradores
deficientes.
Em todos os lugares da RMC, a população tem se organizado para criar
entidades e políticas públicas que garantam os direitos dos cidadãos que
não precisam de assistencialismo, mas de condições para sobreviver
com dignidade.(Texto retirado – http://www.cosmo.com.br)
Pedro F. Carvalho
Analista de Sistemas
4.
[email protected]
S. J. Rio Preto - 2009
DA INFORMAÇÃO AO CONHECIMENTO
A ERA DA INFORMAÇÃO traz paradigmas da economia, como produtividade e
qualidade, cria novos caminhos para o desenvolvimento e exige uma nova postura
diante das mudanças sociais. Para o Deficiente Visual como para todos, obter e aplicar
conhecimento passa a ser item básico para enfrentar essas mudanças. A informação
não-acessível é o maior paradigma aos deficientes visuais. Vejamos abaixo a
importância da informação e conhecimento.
4.1
INFORMAÇÃO
Informação são dados ou matéria informacional relacionada ou estruturada de
maneira potencialmente significativa sendo subsídio útil à tomada de decisão. Da
informação podemos extrair o conhecimento, pois reduz a incerteza em determinada
situação.
4.2
CONHECIMENTO
Existem os conhecimentos:
•
Explícito
–
É
o
conjunto
de
informações
disponíveis
em
livros,
documentos, websites, dentre outros.
•
Tácito – É o saber prático sobre um assunto, agregando crenças,
sentimentos, emoções e experiência na formação da personalidade de uma
pessoa
•
Estratégico – É a junção do conhecimento Explícito e Tácito juntamente
com conhecimento de especialistas na estratégia específica.
A construção da personalidade, princípios éticos e outros fatores que compõem
um ser humano vem da informação e conhecimento adquiridos. Como veremos nos
tópicos a seguir, a internet é o meio de comunicação em massa que contém
informação acessível a quase todas as pessoas. A frentes pela Inclusão Digital e a
Acessibilidade aos Deficientes Visuais (que tratamos neste trabalho) são ações
essenciais para que todos possam obter o conhecimento.
5.
INTERNET
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
Fruto da Guerra Fria, que colocou EUA e União Soviética em lados opostos, a
internet se transformou numa das mídias de mais rápido crescimento da história.
Uma grande rede mundial de computadores interligados.
Começou em 1969 como a ARPANET (Advanced Research Projects Agency
Network) foi a primeira rede operacional de computadores, criada pela ARPA, sigla
para Advanced Research Projects Agency, ou Agência de Pesquisa de Projetos
Avançados, uma subdivisão do Departamento de Defesa dos Estados Unidos.
Esses projetos visavam o desenvolvimento de uma rede de computadores para
comunicação entre os principais centros militares de comando e controle que pudesse
sobreviver a um possível ataque nuclear.
Timothy John Berners-Lee (TimBL) é o inventor da World Wide Web e diretor do
World Wide Web Consortium (W3C)*, que supervisiona o seu desenvolvimento. Criou o
HTML (Hyper Text Markup Language) que é uma linguagem de marcação utilizada para
a criação de Websites (conjunto de páginas HTML).
Em 1996 a palavra Internet já era de uso comum, principalmente nos países
desenvolvidos a criação de websites de todos os ramos (comércios-eletrônicos, batepapos, empresariais) foi grande, elevando um número que cresce velozmente ainda
hoje.
À época do seu "estouro" comercial, jornalistas, publicitários, designers,
escritores, redatores, fotógrafos, além é claro de programadores, e webmasters,
afluíram ao mercado, criando e desenvolvendo empresas com os mais variados
objetivos.
No meio educativo a internet se tornou um aliado poderoso às pesquisas
disponibilizando tutoriais e guias-rápidos gratuitamente. Chegaram a pensar que
substituiria os livros, jornais e todo o meio impresso. Mas não foi o que aconteceu, ao
contrário, a internet seria a nova aliada juntamente com os outros meios de
comunicação.
Em 2002 o “estouro” comercial havia se normalizado e empresas especializadas
em desenvolvimento de websites e sistemas web foram surgindo. A padronização de
criação e a própria sociedade já estava se adaptando a este “novo mundo”.
No dia 31/05/2005 a internet comercial no Brasil comemorou a criação do
Comitê Gestor da Internet no Brasil (entidade responsável pela internet no Brasil),
dados estatísticos do Registro.BR (registro online de domínios para a internet no
Brasil)
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
O Brasil é o 10º país em número de usuários de internet e o 72º em densidade
por 100 habitantes, segundo dados da União Internacional de Telecomunicações (UIT)
referentes a 2004 de 183 países.
Em 2004 o Brasil tinha 22 milhões de usuários de internet, 3,5 milhões de
servidores de internet (hosts) e 19,35 milhões de computadores.
Pela primeira vez no mundo um cidadão comum pode (facilmente e a um custo
muito baixo) não só ter acesso a informações localizadas nos mais distantes pontos do
globo como também criar, gerenciar e distribuir informações em larga escala, no
âmbito mundial, algo que somente uma grande organização poderia fazer usando os
meios de comunicação convencionais. Com a Internet uma pessoa qualquer (um
jornalista, por exemplo) pode, de sua própria casa, oferecer um serviço de informação
baseado na Internet, a partir de um computador com acesso a rede.
Todo cidadão tem direito a informação, pois é o princípio de sua formação
moral e intelectual. O acesso ao conteúdo informacional na internet propõe que a
sociedade não estará marginalizada na ERA DA INFORMAÇÃO, mas no contexto de um
paradigma objetivista (moralidade do auto-interesse) onde formamos nossas próprias
idéias.
* O World Wide Web Consortium (http://www.w3.org), foi criado em 1994 para
levar a Web para o seu potencial máximo, através do desenvolvimento de protocolos
comuns
e
fóruns
abertos
que
promovem
sua
evolução
e
asseguram
a
sua
interoperabilidade. O W3C desenvolve tecnologias, denominadas Web Standards (ou
Padrões Web) para a criação e a interpretação dos conteúdos para Web.
5.1.
BROWSERS
O web browser é uma aplicação que permite ao usuário interagir com websites
e sistemas web hospedados em um servidor web. Os browsers populares disponíveis
para computadores pessoais incluem o Microsoft Internet Explorer, o Mozilla Firefox,
Ópera, o Netscape Navigator.
Podemos definir rapidamente o browser como a interface entre a informação
codificada (HTML) contida na internet e o internauta, sendo que o HTML é “traduzido”
pelo browser que por sua vez apresenta uma informação compreensível ao internauta.
6.
WEBDESIGN
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
Bilhões de websites existentes no mundo inteiro e milhares (de que ?) são
desenvolvidos todos os dias. O website é a “janela” para o mundo, uma ferramenta
essencial na internet para disseminar a informação, de fácil compreensão pelo
internauta, pois utiliza imagens, sons, vídeos, animações dentre outros componentes.
Quando um website utiliza todos estes componentes juntos é necessário que haja
organização para que o internauta possa compreender o que está sendo apresentado,
esta organização é chamada de ARQUITETURA DE INFORMAÇÃO que veremos no
próximo tópico.
Quando “visitamos” um website, em que seu desenvolvimento se deu por
técnicas de usabilidade (capítulo X.X), podemos “navegar” por todo seu conteúdo sem
dificuldades e sem prejuízo na captação da informação passada.
O
Webdesigner
é
um
profissional
que
constrói
websites,
utilizando
conhecimento de diversas áreas técnicas, como o design, programação, administração
de banco de dados, arquitetura de informação, engenharia de software, publicidade,
psicologia, dentre outras que estão no escopo desta atividade.
Hoje a técnica mais usada para a organização do conteúdo nos websites são as
tabelas, que também são usadas para demonstrações tabulares como informações nas
tabelas do Microsoft Excel por exemplo, na verdade são usadas em sua maioria para
colocar imagens e textos em conjunto, criando as formas e disposições das
informações no website de forma mais agradável.
Com o advento das folhas de estilos, o famoso CSS (“Cascading Style Sheets”,
Cascata de Estilos), possibilita a mudança da aparência simultânea de todas as páginas
relacionadas com o mesmo estilo.
Ao invés de colocar a formatação dentro do código, o webdesigner cria um
“link“ para uma página que contém os estilos, procedendo de forma idêntica para
todas as páginas de um website. Quando quiser alterar a aparência do portal basta que
modifique apenas este arquivo.
Sendo assim a disposição baseada em tabelas é considerada cada vez mais
como uma opção ultrapassada.
Veja abaixo um exemplo de programação em CSS para colocar estilo em um
website.
Ex.:
/* o corpo do website com fonte padrão ARIAL e cor de fundo branco */
body {
font-family:arial , verdana , sans-serif;
background-color:#ffffff;
Pedro F. Carvalho
Analista de Sistemas
}
[email protected]
S. J. Rio Preto - 2009
Pedro F. Carvalho
Analista de Sistemas
7.
[email protected]
S. J. Rio Preto - 2009
USABILIDADE NA INTERNET
Pela definição da International Organization for Standardization, usabilidade é a
extensão na qual um produto pode ser usado por usuários específicos para alcançar
objetivos específicos com, eficiência e satisfação.
Usabilidade está diretamente ligada ao diálogo na interface e é a capacidade do
website em permitir que o usuário alcance suas metas de interação com o sistema. Ser
de fácil aprendizagem, permitir utilização eficiente e apresentar poucos erros são os
aspectos fundamentais para a percepção da boa usabilidade por parte do usuário.
Benefícios da Usabilidade.
•
Maior número de transações bem sucedidas no Website.
•
Diminuição da evasão de usuários por desistência.
•
Aumento da eficiência de seu Website.
•
Maior fidelidade do usuário.
•
Percepção positiva da Empresa.
Melhorar a interação do usuário com o website é essencial. Atualmente existem
empresas de Consultoria em Usabilidade. O internauta precisa entender o que está
vendo, gerando confiança e fidelidade, assim uma possível transação (comercial ou
informacional) será eficiente.
Esta é a visão dos grandes e-commerces e portais. Um exemplo é o portal UOL
(www.uol.com.br), que há anos permanece com as mesmas características estruturais
(Arquitetura de Informação (próximo tópico)) de menu, seções, notícias principais e
propagandas. Observe que os grandes portais e e-commerces mantém uma estrutura
parecida, pois é a mais usual entre os internautas, ou seja, um tipo de navegação e
estrutura de informações de fácil compreensão.
Pedro F. Carvalho
Analista de Sistemas
7.1
[email protected]
S. J. Rio Preto - 2009
SEGMENTAÇÃO DE MERCADO
Os itens que compõem a segmentação de mercado são os abaixo selecionados:
•
Características Geográficas: Regiões, cidades, estados, países.
•
Características Demográficas: Sexo, Idade, Raça, Nacionalidade, Renda,
Escolaridade, Ocupação Profissional, Tamanho da Família, Estado Civil
dentre outras características.
•
Personalidade: Estilo de vida, atitudes, percepção do consumidor.
Um exemplo de estudos na psicologia na criação de interface e conteúdo é a
SIMIÓTICA DA INFORMAÇÃO (relação entre “alguma coisa” e seu significado) que
ainda está em estudos, mas logo estará em toda a internet. Trata-se de uma técnica
de criação do design, arquitetura de informação do website pensando nos processos
cognitivos de um usuário e não apenas na sua personalidade como a usabilidade
estuda. Os processos cognitivos levam um usuário a percorrer um caminho (de acordo
com a sua vontade) em um conjunto de páginas de um website por exemplo.
O ¹Macromedia flash em um website também foi uma forma agradável
de apresentação do conteúdo no website, oferecendo características
novas de interatividade com os internautas. O flash é muito mais
restritivo do que o formato aberto do HTML, e ainda requer um
proprietário plugin para que possa ser visualizado no computador do
usuário. Infelizmente muitos ²leitores de tela não “traduzem” o flash,
impossibilitando interação com o Deficiente Visual.
¹Macromedia Flash, ou simplesmente Flash, é um programa gráfico
vetorial utilizado para se criar animações interativas, ele é desenvolvido
e
comercializado
pela
Macromedia
(empresa
especializada
em
desenvolver programas que auxiliam o processo de criação de páginas
web).
²Leitor de telas (Ecrã) - É um sistema para microcomputadores da linha
PC
que
se
comunica
com
o
usuário
mediante
síntese
de
voz,
viabilizando, o uso de computadores por deficientes visuais, por exemplo
o programa DOSVOX desenvolvido pela UFRJ.
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
(indicar a fonte dos dois últimos parágrafos transcritos)
8.
ARQUITETURA DE INFORMAÇÃO
É uma das etapas para o desenvolvimento de um website. Esta etapa organiza
e classifica as informações para facilitar o acesso do usuário à informação.
O webdesigner deve ter formação em área específica em Engenharia de
Software, Desenho Industrial ou similar para que esteja capacitado a desenvolver um
planejamento onde serão geradas especificações como “esqueletos” das páginas,
menus de navegação, dentre as várias partes integrantes de cada projeto de um
website.
O conteúdo é classificado, organizado numa hierarquia chamada taxonomia, a
mesma que rege o menu de navegação e a hierarquia entre as páginas do website.
Para explicar como tudo isso vai funcionar antes de ficar pronto, apresentamos
diagramas conceituais do fluxo de navegação e da hierarquia de página.
figura 1
http://www.usabilidoido.com.br/imagens/diagrama_navegacao.gif
Localização estrutural do conteúdo informativo e forma de navegação é o que
define a arquitetura de informação.
8.1
DEFINIÇÃO DE FLUXOS DE NAVEGAÇÃO DO WEBSITE.
Um website pode conter inúmeras páginas com conteúdos que devem ser
interpostos em um menu em ordem lógica de acordo com o assunto, ou ordem que o
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
público-alvo possa compreender. É necessária uma análise do comportamento
(Psicologia “Behaviourista”) do internauta. O menu deve ser de fácil navegação
(usabilidade) e compreensão por parte do público-alvo.
Um fluxo de navegação que não tenha ordem lógica de estrutura, prejudica
seriamente o acesso do cego ao conteúdo informativo.
Um livro comum contém capa, índice, introdução, páginas estruturadas com
informações relativas a um assunto específico e conclusão final de todas as
informações obtidas em sua leitura. O mesmo conceito no fluxo de navegação deve ser
desenvolvida no website.
O cego percorre um caminho definido pelo webdesigner. Se este caminho não
conter lógica em seu fluxo de navegação.
8.2
DEFINIÇÃO DE NOMENCLATURA DE SEÇÕES.
O menu deve conter um fluxo de navegação fácil e compreensível como
descrito acima. A nomenclatura dos itens relacionados na estrutura do menu devem
estar em uma linguagem comum ao ¹público-alvo.
A nomenclatura de uma seção pode conter muitas vezes uma só palavra. Seu
objetivo é abstrair em poucas ou até mesmo em uma palavra a definição geral de uma
seção, por exemplo (um portal de notícias que contém uma seção com a nomenclatura
ESPORTES, CIDADES).
Estas são exatamente as preocupações de um arquiteto de informação e a
maioria dos webdesigners não possui conhecimento ou experiência suficiente para
tomar as decisões certas nestas questões.
Como vimos, a arquitetura de informação é essencial para a organização de
menu e conteúdo dos websites, e ainda mais importante para os Deficientes Visuais,
pois deve haver um fluxo de navegação que possibilite ao Deficiente Visual, entender
de forma homogênea todo o conteúdo informacional apresentado, pois desta forma a
informação entendida se transformará em conhecimento, e não haverá prejuízo na
interação do website e o internauta.
¹Público – Alvo - Também conhecido por levantamento do perfil, segmento de
mercado ou target, auxilia a empresa no direcionamento para o desenvolvimento de
um website.
Pedro F. Carvalho
Analista de Sistemas
9.
[email protected]
S. J. Rio Preto - 2009
ACESSIBILIDADE
Alguns países como o Canadá, Austrália e Estados Unidos regulamentaram a
adoção de regras de Acessibilidade na concepção da informação disponibilizada na
Internet pela Administração Pública, com o objetivo de facilitar o seu acesso a Pessoas
com Necessidades Especiais, em especial, pessoas com deficiências e idosos.
O W3C, publicou em 5 de Maio de 1999 o seu primeiro documento que serviu
de referência internacional para a Acessibilidade na Internet. O documento tem o
nome de "Diretivas para a acessibilidade do conteúdo da Web 1.0" (Web Content
Accessibility Guidelines 1.0) e explica como tornar o conteúdo web acessível a pessoas
com deficiências.
As regras de Acessibilidade para conteúdos na Internet aplicam-se obviamente
também aos conteúdos disponibilizados numa Intranet aos trabalhadores de uma
organização ou a qualquer documento em formato HTML.
Importa salientar que também neste caso a adoção das regras de Acessibilidade
proporciona maiores vantagens para outros utilizadores, nomeadamente para quem
tem comunicações lentas, browsers antigos, ou dispositivos de acesso diversificados:
PDA, Quiosques Internet ou Televisão.
Pedro F. Carvalho
Analista de Sistemas
9.1.
[email protected]
S. J. Rio Preto - 2009
ACESSIBILIDADE NO BRASIL
Lei de acessibilidade - Decreto lei 5296
Decreto-lei 5296 de 2 de dezembro de 2004
Regulamenta as Leis n°s 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
Capítulo III
Das Condições Gerais da Acessibilidade
Art. 8o Para os fins de acessibilidade, considera-se:
I - acessibilidade: condição para utilização, com segurança e autonomia,
total ou assistida, dos espaços, mobiliários e equipamentos urbanos, das
edificações, dos serviços de transporte e dos dispositivos, sistemas e
meios de comunicação e informação, por pessoa portadora de deficiência
ou com mobilidade reduzida;
II - barreiras: qualquer entrave ou obstáculo que limite ou impeça o
acesso, a liberdade de movimento, a circulação com segurança e a
possibilidade de as pessoas se comunicarem ou terem acesso à
informação, classificadas em:
a) barreiras urbanísticas: as existentes nas vias públicas e nos espaços
de uso público;
b) barreiras nas edificações: as existentes no entorno e interior das
edificações de uso público e coletivo e no entorno e nas áreas internas
de uso comum nas edificações de uso privado multifamiliar;
c) barreiras nos transportes: as existentes nos serviços de transportes;
e
d) barreiras nas comunicações e informações: qualquer entrave ou
obstáculo que dificulte ou impossibilite a expressão ou o recebimento de
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
mensagens por intermédio dos dispositivos, meios ou sistemas de
comunicação, sejam ou não de massa, bem como aqueles que dificultem
ou impossibilitem o acesso à informação;
Capítulo 7 do Decreto-Lei sobre Acessibilidade em Websites.
Capítulo VI
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
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.
(Texto retirado: http://www.acessobrasil.org.br/index.php?itemid=43)
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
Algumas notas sobre o que vem acontecendo no país.
22/10/2004 - Mercado para profissionais capacitados na área de
acessibilidade é cada vez mais promissor
01/03/2005 - Programa DaSilva já avalia também os websites conforme
as recomendações do Governo Eletrônico
11/04/2005 - Portal da ANEEL torna-se acessível
19/04/2005 - Portal da Justiça Federal adequa seu site de acordo com a
lei de acessibilidade
16/09/2005 - Instituto Benjamin Constant lança seu novo site em
comemoração aos 151 anos de fundação
21/10/2005 - Senado Federal inicia a adequação de suas páginas aos
princípios de Acessibilidade.
(Fonte: www.acessobrasil.org.br)
Realmente é considerável a iniciativa de alguns órgãos na preocupação com a
Acessibilidade. Mas ainda estamos muito longe do que é almejado.
10.
PROGRAMAÇÃO
ACESSÍVEIS
ESPECIAL
PARA
CONSTRUÇÃO
DE
WEBSITES
A seguir são apresentadas algumas regras para o desenvolvimento de um
website acessível. O conhecimento aprofundado requer um estudo do documento do
W3C, mas as regras abaixo são significativamente importantes.
10.1
APRESENTAÇÃO DA INFORMAÇÃO
Garantir que todas as imagens se encontram legendadas ou descritas com
texto. Códigos e funcionalidades devem ser apresentadas em forma textual.
Nota: Esta medida é essencial para botões, ligações feitas com recurso a
imagens, imagens complexas. O Leitor de Ecrã utilizado por um cego irá ler o texto
alternativo associado à imagem.
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
Exemplos:
- Imagem normal: Fotos, botões e ligações (hiperlinks)
<html>
...
<img id="logotipo" src="submarino.gif"
alt="Logotipo do Submarino" />
...
</html>
10.1.1 Imagem Complexa: Gráficos, etc...
•
Criar uma página com a descrição da imagem (equivalente textual)
suficientemente completa e salvar.
•
Na tag "img" incluir o atributo "longdesc" com o nome do arquivo que
contém a descrição.
•
Existem agentes que não suportam o "longdesc", então forneça um link
descritivo próximo a imagem.
A seguir um exemplo de imagem de gráfico com descrição completa (atributo
"longdesc" e link descritivo [D] com link para o arquivo "descricao_grafico.html").
Exemplo:
gráfico 01
<html>
...
<img id="grafico" src="grafico.gif"
longdesc="descricao_grafico.html"
alt="Gráfico com número de acessos do portal submarino" />
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
<a href="descricao_grafico.html"
title="Descrição do Gráfico">[D]</a>
...
</html>
10.1.2 Imagem Mapeada:
•
Fornece equivalente textual para regiões de mapa de imagem e fora da
imagem.
•
Tipo client-side (usa tags "map" e "area"): Na tag "area" incluir o atributo
"alt" com breve descrição do link. Para garantir o acesso, fornecer também
o texto redundante.
•
Tipo server-side (usa atributo "ismap"): Por não ser acessível a navegação
via teclado, fornecer equivalente textual fora da imagem (link/texto
redundante).
figura 2
[ Visual | Auditiva | Física | Cognitiva ]
<html>
...
<img id="imgmap" src="map.gif"
alt="Seções"
title="Seções"
usemap="#map" />
<map id="map">
<area shape="rect" coords="0,0,32,40"
href="#" alt="Visual" />
<area shape="rect" coords="34,0,78,40"
href="#" alt="Auditiva" />
<area shape="rect" coords="80,0,119,40"
href="#" alt="F&iacute;sica" />
<area shape="rect" coords="122,0,163,40"
href="#" alt="Cognitiva" />
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
</map>
<!-- texto redundante -->
[ <a href="#">Visual</a>
| <a href="#">Auditiva</a>
| <a href="#">F&iacute;sica</a>
| <a href="#">Cognitiva</a> ]
...
</html>
10.1.3 Scripts
•
Incluir o elemento "noscript" para fornecer um texto alternativo que
descreva a ação ou substitua a funcionalidade do script.
•
Fornecer equivalente textual para scripts.
•
Assegurar que programas interpretáveis funcionem mesmo quando estes
tiverem sido desativados ou não forem suportados.
•
No exemplo a seguir um script simples e descrição da ação que demonstra
que ao clicar com o mouse na imagem, faz aparecer o quadro seguinte.
Figura 3
<script type="text/javascript">
... script que faz trocar imagens quando
acionado pelo usuário...
</script>
<noscript>
No primeiro quadrinho, Cebolinha tenta
levantar o halteres para que Cascão
tire uma foto. O esforço é imenso
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
e ele não consegue.
No segundo e último quadrinho ...
</noscript>
10.1.4 Bullets e Listas
•
Fornecer equivalente textual para imagens usadas como pontos de
enumeração (bullets) simulando uma lista. Ou não simular uma lista e sim
utilizar a lista de fato (melhor solução).
•
No caso de simular uma lista com imagem, incluir o atributo "alt" com
descrição conforme Exemplo1. A desvantagem desta opção é que o leitor
de tela irá focar todas as imagens (bullets) lendo desnecessáriamente a
descrição textual de cada imagem.
•
O ideal é não simular uma lista e sim fazer a lista utilizando os elementos
"ul" e "li" no HTML, inserindo as imagens como bullets no CSS, conforme
Exemplo 2. Deste modo, o leitor de tela não focará as imagens. (Os itens
deste guia utiliza este recurso.)
Exemplo1:
•
A seguir, uma seqüência de itens que simula uma lista utilizando imagems
como bullet.
•
O código mostra 3 diferentes, mas apropriadas formas, para usar o atributo
"alt" para nomear este tipo de imagem.
Histórico
Missão
Estrutura
<img src="lista3.gif" alt="Item " />
Histórico<br />
<img src="lista3.gif" alt ="*" />
Missão<br />
<img src="lista3.gif" alt =" " />
Estrutura<br />
Exemplo2:
Pedro F. Carvalho
Analista de Sistemas
•
[email protected]
S. J. Rio Preto - 2009
Fazer uma lista não ordenada padrão no HTML.
Histórico
Missão
Estrutura
<ul>
<li>Histórico</li>
<li>Missão</li>
<li>Estrutura </li>
</ul>
//incluir imagem no CSS
ul {
list-style-type: none;
list-style-image: url("estrela.gif");
}
10.1.5 Sons, Áudios e Vídeos
•
Fornecer equivalentes para sons, áudios e vídeos. Para sons e áudios,
fornecer descrição textual. Para imagens de vídeo, fornecer descrição
sonora ou textual.
•
Levar em consideração que imagens, vídeo e áudio, podem facilitar a
compreensão do conteúdo, como por exemplo, uma seqüência de imagens
para explicar algo, um vídeo de uma pessoa traduzindo o conteúdo para a
linguagem de sinais.
Exemplo1:
Se ao acessar uma página e um som significativo é reproduzido, fornecer uma
descrição textual do som. Se o som/aúdio não for significativo ou tratar-se de uma
música sem letras, não é necessário fornecer equivalente textual.
Exemplo2:
Se o áudio conter muita informação, fornecer uma transcrição textual completa.
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
Exemplo3:
Para vídeos com áudio, fornecer equivalentes sincronizados: descrição sonora
das cenas e ações das imagens e legendas para diálogos, narração e sons. Se a
sincronização não for possível, fornecer descrição textual e transcrição em um página.
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
10.1.6 Cores em fundos
Não recorrer apenas à cor.
•
Assegurar que todas as informações veiculadas com cor estejam também
disponíveis sem cor. Se a cor for o único meio utilizado para transmitir
informações, as pessoas que não diferenciam cores, bem como os usuários
de monitores monocromáticos e dispositivos não coloridos, não receberão
essas informações.
Exemplo:
•
Incorreto: a palavra caneta está destacada dos outros itens, somente
através da cor (vermelha).
O item vermelho é o mais utilizado.
lápis - borracha – caneta
•
Sem cor perde-se a informação, pois a palavra caneta perdeu o destaque.
O item vermelho é o mais utilizado.
lápis - borracha – caneta
•
Correto: a descrição da cor faz parte da palavra caneta.
O item vermelho é o mais utilizado.
lápis preto - borracha branca - caneta vermelha
•
Cores: Assegurar que a combinação de cores entre o fundo e o primeiro
plano seja suficientemente contrastante para poder ser vista por pessoas
com cromodeficiências, bem como pelas que utilizam monitores de vídeo
monocromáticos.
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
Exemplos:
Imagem contendo texto e fundo com pouco contraste.
A imagem anterior se vista em monitor monocromático.
Imagem contendo texto e fundo com bom contraste.
Imagem anterior se vista em monitor monocromático.
10.1.7 Idiomas
Identificar a língua estrangeira em documentos e equivalentes textuais, através
de marcações que facilitem a pronúncia e a interpretação de texto.
•
A marcação do idioma permite que a mudança de idioma em um
documento seja identificado por sintetizadores de voz e os dispositivos
Braille que podem passar automaticamente para o outro idioma.
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
•
Incluir o atributo "lang" para identificar o idioma estrangeiro.
•
Alguns idiomas: inglês-en; francês-fr; espanhol-es; italiano-it; portuguêspt; alemão-de.
•
Exemplo:
•
Uma frase com expressão em inglês. (E ouvimos alguém sussurar "take it
easy!" o que nos levou a...)
<p>E ouvimos alguém sussurar "
<span lang="en">take it easy!</span>
" o que nos levou a...</p>
10.1.8 Idioma Principal
•
Identificar o principal idioma utilizado nos documentos.
•
Em HTML, definir o atributo "lang" na tag "html". Em XML, utilizar
"xml:lang". Outra alternativa é identificar no cabeçalho "http".
Exemplo:
•
Idioma principal de um documento em português do Brasil.
<html xml:lang="pt" lang="pt-br">
...conteúdo da página em português...
</html>
10.1.9 Tabelas
•
Evitar o uso de tabelas para formatação visual de uma página. É altamente
recomendável utizar as folhas de estilo (CSS) e a correta marcação para
construir a apresentação visual sem tabelas.
•
Utilizar as tabelas somente para compor dados tabulares.
•
A marcação correta de tabelas beneficia usuários que utilizam meios
sonoros, como leitor de tela, para acessar páginas web.
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
Recomendação
•
Evitar o uso de tabelas para formatação visual de uma página. É altamente
recomendável utizar as folhas de estilo (CSS) e a correta marcação para
construir a apresentação visual sem tabelas.
•
Utilizar as tabelas somente para compor dados tabulares.
•
A marcação correta de tabelas beneficia usuários que utilizam meios
sonoros, como leitor de tela, para acessar páginas web.
•
TÍTULO DA TABELA: Fornecer o título da tabela através da tag "caption".
•
RESUMO DA TABELA: Para melhor compreensão de tabelas complexas,
fornecer um resumo informando o propósito da tabela através do atributo
"summary" no elemento "table". O resumo não fica visível na página, mas o
leitor de tela descreve.
•
CABEÇALHO E DADOS: Utilizar "th" para identificar os cabeçalhos de linhas
e colunas e "td" para identificar as células com dados.
•
ASSOCIAÇÃO ENTRE CABEÇALHO E DADOS: Associar os dados "td" aos
respectivos cabeçalhos "th". Em tabelas simples, associar com o atributo
"scope" na tag "th" e em tabelas com dois ou mais níveis de cabeçalhos,
associar com os atributos "headers" e "id".
•
GRUPOS: Fornecer as marcações "thead", "tfoot" e "tbody" para agrupar
linhas e "col" e "colgroup" para agrupar colunas. Além de facilitar a
organização da tabela, auxilia na aplicação de estilos.
•
Não simular tabelas utlizando espaçamentos ou outras marcações como por
exemplo com a tag "pre". Tabelas sempre devem ser marcadas com
"table", assim o leitor de tela identificará que trata-se de uma tabela.
•
Apesar de que alguns leitores de tela reconhecerem bem uma tabela
complexa com marcação apropriada, é aconselhável, se possível, utilizar-se
de
tabelas
mais
simples.
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
Exemplo1: Tabela simples com título, cabeçalhos, dados e associação por
"scope".
NOTAS
Alunos
Português
Matemática
Paulo
7
8
Marcos
6
9
Rosa
10
7
<table>
<caption>NOTAS</caption>
<tr>
<th scope="col">Alunos</th>
<th scope="col">Portugu&ecirc;s</th>
<th scope="col">Matem&aacute;tica</th>
</tr>
<tr>
<th scope="row">Paulo</th>
<td>7</td>
<td>8</td>
</tr>
<tr>
<th scope="row">Marcos</th>
<td>6</td>
<td>9</td>
</tr>
<tr>
<th scope="row">Rosa</th>
<td>10</td>
<td>7</td>
</tr>
</table>
Exemplo2: Tabela com dois níveis de cabeçalho requer associação com dados
através dos atributos "id" e "headers".
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
NOTAS
Grupos
Alunos
Português
Matemática
A
Paulo
7
8
Marcos
6
9
Rosa
10
7
B
<table>
<caption>NOTAS</caption>
<tr>
<th id="grupo">Grupo</th>
<th id="alunos">Alunos</th>
<th id="portugues">Português</th>
<th id="matematica">Matemática</th>
</tr>
<tr>
<th id="a" rowspan="2">A</th>
<th id="paulo">Paulo</th>
<td headers="a paulo portugues">7</td>
<td headers="a paulo matematica">8</td>
</tr>
<tr>
<th id="marcos">Marcos</th>
<td headers="a marcos portugues">6</td>
<td headers="a marcos matematica">9</td>
</tr>
<tr>
<th id="b">B</th>
<th id="rosa">Rosa</th>
<td headers="b rosa portugues">10</td>
<td headers="b rosa matematica">7</td>
</tr>
</table>
Exemplo3: Tabela com mais níveis de cabeçalho, resumo, título e agrupados
por linhas - "thead", "tfoot" e "tbody". Associados com "id" e "headers".
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
A tag "tfoot" deve estar antes de "tbody".
O leitor de tela falará em ordem linearizada se utilizar as teclas de setas. Porém
ao focar determinada célula e com teclas específicas, poderá falar: grupo 1 alunos
Paulo português 7 matemática 8 e assim por diante.
NOTAS
Grupo principais
Alunos
Matérias
Português
Total por matéria
7,6
8
<table
summary="Tabela contendo notas por grupo em
relação a alunos e matérias.">
<caption>NOTAS</caption>
<thead>
<tr>
<th id="grupo" rowspan="2">
Grupos principais</th>
<th id="alunos" rowspan="2">Alunos</th>
<th id="materias" colspan="2">Matérias</th>
</tr>
<tr>
<th id="portugues">Português</th>
<th id="matematica">Matemática</th>
</tr>
</thead>
<tfoot>
<th id="total" colspan="2">Total por
matéria</th>
<td headers="total">7,6</td>
<td headers="total">8</td>
</tfoot>
Matemática
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
<tbody>
<tr>
<th id="a" rowspan="2">A</th>
<th id="paulo">Paulo</th>
<td headers="a paulo portugues">7</td>
<td headers="a paulo matematica">8</td>
</tr>
<tr>
<th id="marcos">Marcos</th>
<td headers="a marcos portugues">6</td>
<td headers="a marcos matematica">9</td>
</tr>
</tbody>
<tbody>
<tr>
<th id="b">B</th>
<th id="rosa">Rosa</th>
<td headers="b rosa portugues">10</td>
<td headers="b rosa matematica">7</td>
</tr>
</tbody>
</table>
10.1.10 Formulários
•
Posicionar corretamente os rótulos e os controles do formulário para que a
navegação seja coerente.
•
Associar o controle do formulário com o respectivo rótulo.
•
Agrupar informações de forma apropriada.
•
Associar cada controle do formulário ao rótulo incluindo "label for" para os
rótulos e "id" para os controles. Em "input" do tipo botão, não é necessária
a associação, pois o leitor de tela fala o texto contido no botão. Para botões
que são imagens, forneça o equivalente textual com "alt".
Pedro F. Carvalho
Analista de Sistemas
•
[email protected]
S. J. Rio Preto - 2009
Em formulários extensos, agrupar os controles do formulário por assunto,
utilizando as tags "fieldset" e "legend". Os elementos "option" no "select"
podem ser agrupados utilizando "optgroup".
•
Criar navegação ordenada através do atributo "tabindex".
Exemplo1: Associação entre rótulo e controle (input) através dos elementos
"label for" e "id".
Navegação ordenada através do atributo "tabindex". Ao navegar com a tecla
"tab", o controle com valor "1" receberá o foco primeiro, em seguida o controle com
valor "2" receberá o foco, e por último o controle com valor "3" receberá o foco.
Nome:
Ramal:
seu nome
ramal
Botão Enviar
Enviar
<form>
<label for="nome">Nome:</label>
<input type="text" value="Entre com o nome"
id="nome" tabindex="1" />
<label for="ramal">Ramal:</label>
<input type="text" value="Entre com o ramal"
id="ramal" tabindex="2" />
<input type="submit" value="Enviar"
name="Submit" tabindex="3" />
</form>
Exemplo2: Diversos controles agrupados através de "fieldset" e "legend".
Em "select" os elementos estão agrupados através de "optgroup".
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
Dados pessoais
seu nome
Nome:
Comentário:
Entre com o comentário
Enviar
Enviar
Botão Limpar
Limpar campos
<form>
<fieldset>
<legend>Dados pessoais</legend>
<label for="nome">Nome:</label>
<input type="text" value="Entre
com o nome" id="nome" />
<label for="comentario">Comentário:</label>
<textarea id="comentario" name="textfield">
Entre com o comentário</textarea>
</fieldset>
<fieldset>
<legend>Escolaridade:</legend>
<input id="primeiro" type="radio"
name="radio" value="radio" checked/>
<label for="primeiro">Escolaridade 1º
grau</label><br />
<input id="segundo" type="radio"
name="radio" value="radio" />
<label for="segundo">Escolaridade 2º
grau</label><br />
<input id="superior" type="radio"
Pedro F. Carvalho
Analista de Sistemas
name="radio" value="radio" />
<label for="superior">Escolaridade
superior</label>
</fieldset>
<fieldset>
<legend>Esporte:</legend>
<input id="natacao" type="checkbox"
name="checkbox" value="checkbox" />
<label for="natacao">Natação</label><br />
<input id="futebol" type="checkbox"
name="checkbox2" value="checkbox" />
<label for="futebol">Futebol</label><br />
<input id="basquete" type="checkbox"
name="checkbox3" value="checkbox" />
<label for="basquete">Basquete</label>
</fieldset>
<fieldset>
<legend>Opinião:</legend>
<label for="domingo">Seu domingo foi:
</label>
<select id="domingo">
<optgroup label="Positivo">
<option selected>Selecione:</option>
<option>Ótimo</option>
<option>Muito bom</option>
<option>Bom</option>
</optgroup>
<optgroup label="Negativo">
<option>Ruim</option>
<option>Péssimo</option>
</optgroup>
</select>
</fieldset>
[email protected]
S. J. Rio Preto - 2009
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
<input type="submit"
name="Submit" value="Enviar" />
<input type="submit"
name="Submit" value="Limpar campos" />
</form>
10.1.11 Links:
O texto do link deve ser significativo e claro.
- O texto do link deve fazer sentido se lido isoladamente. Os usuários de
leitores de tela podem navegar em links de uma página utilizando a tecla "tab". Para
cada "tab" é pronunciado um texto do link. Devido a isso, não utilizar texto do link
generalizado como "Clique aqui".
- Para tornar ainda mais claro o destino do link, utilizar título de link informativo
(elemento "title").
- Para navegação dos links via teclado, pode-se organizar a seqüência dos links
e/ou determinar teclas de atalho para links iimportantes.
TITLE: Se há mais de um link na página com diferentes textos do links mas
apontando para o mesmo endereço, diferenciar os links utilizando o atributo "title".
TITLE: Se há mais de um link na página com o mesmo texto do link, todos
estes links devem apontar para o mesmo endereço. Se não for possível devido ao
contexto do texto, diferenciar os links utilizando o atributo "title".
TABINDEX: para definir a ordem da navegação via tecla "tab", incluir o atributo
"tabindex" com valores 1, 2, 3, etc no elemento do link. Além de link, o "tabindex" é
válido para formulários e objetos. ("a", "area", "button", "input", "label", "legend",
"textarea", "input", "object", "select", "textarea").
ACCESSKEY: para definir quais as teclas de atalho dos links, incluir o atributo
"accesskey" no elemento do link. Além de link, o "accesskey" é válido para formulários
e objetos. ("a", "area", "button", "input", "label", "legend", "textarea", "input",
"object", "select", "textarea").
Exemplo 1
O exemplo incorreto possui texto do link "Clique aqui", o qual não faz sentido se
lido fora do contexto. O usuário que utiliza leitor de tela, não saberá qual o destino do
link.
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
O exemplo correto possui texto do link significativo quando lido fora do
contexto. O usuário que utiliza leitor de tela saberá que o link aponta para a
Floricultura Rosas.
Experimente navegar nesta página utilizando a tecla "tab". Os links serão
focados.
INCORRETO:
Floricultura Rosas. Clique aqui.
CORRETO:
Floricultura Rosas.
Exemplo 2
Diferentes textos de links para o mesmo objetivo. Os dois links estão apontando
para o sítio da Ferrari e possuem o atributo "title" descrevendo "Sítio da Ferrari" na
marcação dos links. Deste modo, o usuário irá saber que os dois links "Ferrari" e "time
italiano" apontam para o sítio da Ferrari.
O alemão Michael Schumacher, da Ferrari,
venceu de ponta a ponta o Grande Prêmio de
Europa, na Alemanha. O brasileiro Rubens
Barrichello, também do time italiano, ficou
com a segunda colocação, enquanto o inglês
Jenson Button, completou o pódio.
<a href="http://www.ferrari.com"
title="Sítio da Ferrari">Ferrari</a>
<a href="http://www.ferrari.com"
title="Sítio da Ferrari">time italiano</a>Exemplo 3
Links utilizando "tabindex". Definir a ordem da navegação via tecla "tab". O
primeiro link a receber o foco será o link "Ir para conteúdo" que contém "tabindex 1" ,
o segundo foco será para "Ir para menu" que contém "tabindex 2" e assim por diante.
Acessibilidade deste sítio.
Ir para conteúdo.
Ir para menu.
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
<a href="#" tabindex="3">Acessibilidade deste
sítio.</a>
<a href="#" tabindex="1">Ir para conteúdo.
</a>
<a href="#" tabindex="2">Ir para menu.</a>
Exemplo 4
Links utilizando "accesskey". Definir quais as teclas de atalho dos links. No
exemplo foram definidas as letras "a", "c" e "m". Ao teclar "alt"+"a" ou "a",
dependendo do navegador, o link "Acessibilidade deste sítio" será focado.
Evitar muitas teclas de atalho, além de o usuário ter que memorizar muitas
teclas, pode haver tecla de atalho que coincida com a tecla de atalho do navegador.
Acessibilidade deste sítio.
Ir para conteúdo.
Ir para menu.
<a href="#" accesskey="a">Acessibilidade deste
sítio.</a>
<a href="#" accesskey="c">Ir para conteúdo.
</a>
<a href="#" accesskey="m">Ir para menu.</a>
10.2
APRESENTAÇÃO, ESTRUTURA E CONTEÚDO
A acessibilidade em páginas web melhora muito quando projetadas com
independência entre a apresentação, a estrutura e o conteúdo. Por exemplo, o leitor de
tela compreenderá a página de forma ordenada, o navegador textual apresentará a
página de forma ordenada, assim como quando as páginas são carregadas sem as
folhas de estilo.
A apresentação refere-se a disposição dos elementos da página (layout).
•
elementos de apresentação são por exemplo "font", "italic", "margin",
"color"...
•
evitar o uso dos elementos de apresentação na marcação HTML/XHTML.
•
definir os elementos de apresentação através de folhas de estilo - CSS.
Pedro F. Carvalho
Analista de Sistemas
•
não
utilizar
[email protected]
S. J. Rio Preto - 2009
elementos
estruturais
da
marcação
como
recurso
de
apresentação.
Por exemplo, não usar cabeçalho <h1> como recurso para aumentar o
tamanho de uma palavra que não é título. Outro exemplo, não utilizar <pre> para
simular uma tabela.
•
definir tamanho de fontes com unidades relativas como "em" ou "%". Isto
possibilita que o tamanho das fontes sejam aumentadas pelo usuário
através do navegador.
•
evitar o uso de tabelas para compor a apresentação da página. As tabelas
são utilizadas para dados tabulares.
A estrutura refere-se a organização lógica da página como títulos, subtítulos,
parágrafos, etc.
•
os elementos de estrutura são por exemplo "p", "table", "ul", "li", "h1",
"h2", etc.
•
utilizar marcação apropriada de HTML/XHTML.
O conteúdo refere-se aos elementos de informação.
•
os elementos de conteúdo são por exemplo textos, imagens, sons, vídeo,
etc.
•
utilizar linguagem simples e apropriada.
•
empregar textos de links significativos
•
evitar blocos de textos extensos e erros de ortografia.
Padrões web
A acessibilidade em páginas web será muito mais eficaz se estiver de acordo
com os padrões web preconizados pela World Wide Web Consortium - W3C. Isto se
deve principalmente ao fato de que os criadores de tecnologias web se baseiam na
premissa de que os criadores de páginas web estão também seguindo os padrões.
Benefícios
Pedro F. Carvalho
Analista de Sistemas
•
[email protected]
S. J. Rio Preto - 2009
Ao produzir páginas separando apresentação, estrutura e conteúdo e,
seguindo os padrões web, resulta-se em muitos benefícios quanto a
acessibilidade, indexabilidade, usabilidade, portabilidade.
•
Benefícios para um maior número de usuários, muitos dos quais utilizam:
•
tecnologia assistiva como leitor de tela, ampliador de tela, sintetizador de
voz, tradutores Braille.
•
navegadores textuais como o Lynx.
•
diferentes tipos de navegadores gráficos.
•
tecnologia portátil como PDA e celular.
•
Outros benefícios:
•
manutenção e redesign das páginas mais ágil e eficiente.
•
melhores resultados em relação aos mecanismos de busca.
•
maior rapidez ao carregar as páginas
•
menor custo.
•
as páginas estarão também preparadas para outras tecnologias que estão
por vir.
Tamanho de Fonte: Garantir que o tamanho do texto poderá ser aumentado
com as opções do seu navegador.
Nota: Esta facilidade é muito utilizada por pessoas idosas com algumas
dificuldades visuais, ou mesmo por deficientes visuais com algum grau de cegueira.
10.3
VERIFICAÇÃO DA ACESSIBILIDADE
Forneça uma forma simples de contato com o responsável pelo website.
Nota: O internauta poderá comunicar-lhe as dificuldades que sente no acesso
aos conteúdos do seu website. Facilite o feedback dos internautas.
Utilize ferramentas e serviços automáticos de análise da Acessibilidade.
Recomenda-se a utilização do “da Silva”, O "da Silva" é um avaliador. Um
software que detecta um código HTML e faz uma análise do seu conteúdo, verificando
se está ou não dentro de um conjunto de regras. A análise é feita usando as regras de
acessibilidade do W3C/WAI.
Link para o “da Silva”.
http://www1.acessobrasil.org.br/dasilva/dasilva.html
Nota: Atualmente ainda são poucas as ferramentas para a criação de conteúdos
web que contemplam a verificação da acessibilidade. O software de desenvolvimento
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
web (webdesign) destinado a Webdesigners é o Macromedia Dreamweaver, que na sua
última versão (8.0), vem com facilidades para a acessibilidade de conteúdo web.
Insira o Selo de Aprovação de Acessibilidade na Web no website.
Nota: Utilize o Selo de Aprovação de Acessibilidade na Web para indicar que o
website contém funcionalidades de Acessibilidade para Cidadãos com Necessidades
Especiais, para diferentes ambientes, situações, equipamentos e navegadores.
O selo deve incluir a definição ALT="Selo de Aprovação de Acessibilidade ", e
ser colocado na página de entrada do website.
Conscientização. Coloque-se “no lugar” do internauta, desta forma, facilmente
serão observados os problemas enfrentados na interação do website.
Como vimos acima, o código é simples e fácil de implementar.
Pedro F. Carvalho
Analista de Sistemas
11.
[email protected]
S. J. Rio Preto - 2009
CONCLUSÃO
Em um mundo globalizado o mercado de trabalho é mais competitivo, e a
tecnologia e conhecimento são necessidades básicas para quem precisa entrar neste
mercado.
Sim, vivemos na Era da Informação. Agora pensemos, é possível que
deficientes tenham as mesmas oportunidades que pessoas sem deficiência em
competições em postos de trabalho?
Sim. A aptidão física e sensorial são importantes, mas não essenciais, pois hoje
é valorizado o indivíduo que tenha conhecimento, ou seja, um profissional que tenha
habilidades intelectuais.
O deficiente visual tem o mesmo potencial intelectual que qualquer indivíduo
com visão normal.
Agora, como é possível que esta afirmação seja verdadeira? Para que um
deficiente visual seja habilitado a efetuar tarefas com a mesma qualidade de um
indivíduo com visão normal, é necessário o trabalho de formação adequada e especial,
acessibilidade a informação e ambiente de trabalho de forma que o mesmo tenha a
possibilidade de estudar, desenvolver tarefas, utilizar todo o seu potencial.
A internet é um grande aliado na formação de qualquer indivíduo, pois provê
INFORMAÇÃO gratuita e de qualidade. Muitos deficientes visuais trabalham com
informática, pois não há limitação que não possa ser derrubada na Era da Informação.
Na internet é possível navegar utilizando LEITORES DE TELA, LEITORES DE
ECRÃ ou similares, o problema é que alguns são caríssimos, na internet o software
livre DOSVOX está disponibilizado gratuitamente. É fácil de instalar e de manipular.
O trabalho de conscientização para empresas e desenvolvedores é muito difícil,
pois há técnicas especiais para criação de websites acessíveis, que aos olhos da
empresa é um trabalho que não retornaria lucros. O governo tem a sua lei criada há
algum tempo sobre acessibilidade na internet, mas quantas empresas já aderiram ao
movimento da acessibilidade?
O cidadão com deficiência é sujeito de direitos e responsabilidades sociais,
tanto
quanto
os
demais
cidadãos.
A
ele devem
ser
concedidas
as mesmas
oportunidades de participação social, segundo suas capacidades de desempenho, sem
discriminações.
Pedro F. Carvalho
Analista de Sistemas
[email protected]
S. J. Rio Preto - 2009
O processo de inclusão social da pessoa com deficiência não deve excluir
serviços especializados de atendimento a esta pessoa, enquanto forem necessários.
Pelo contrário, os Serviços devem ser melhorados, para prestar atendimento cada vez
melhor, funcionando como facilitadores de um processo saudável de inclusão.