Você está na página 1de 52

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

T h ia g o L o p e s Fernando Eurides Martins

Acessibilidade na Web para Deficientes Visuais

Faculdade Comunitria de Campinas Unidade II Curso de Sistema de Informao Campinas/SP


Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

T h ia g o L o p e s Fernando Eurides Martins

Acessibilidade na Web para Deficientes Visuais

Trabalho de Concluso de Curso apresentado Faculdade Comunitria de Campinas Unidade II, como requisito para obteno do ttulo de Bacharel em Sistemas de Informao. Orientador:

Faculdade Comunitria de Campinas Unidade II Curso de Sistema de Informao Campinas/SP 2005


Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

T h ia g o L o p e s Fernando Eurides Martins

Acessibilidade na Web para Deficientes Visuais

Objetivo:
Este projeto tem como objetivo padronizar o desenvolvimento de Websites para que os mesmos sejam acessveis aos deficientes visuais, assim como conscientizar webdesigners e autoridades sobre o tema acessibilidade na Web.

Faculdade Comunitria de Campinas Unidade II Curso de Sistema de Informao Campinas/SP 2005


Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

T h ia g o L o p e s Fernando Eurides Martins

Acessibilidade na Web para Deficientes Visuais

Banca Examinadora
Campinas, 19 de Dezembro de 2005

Prof. Carlos Miglinski

Prof.a Jane Rondina - Orientador -

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

AGRADECIMENTOS
Agradecemos primeiramente a Deus, pois nos deu sabedoria, pacincia e a vida para que pudssemos construir uma profisso. Todos esses dias nestes 4 (quatro) anos de lutas, chuvas, stresses, compartilhamos juntamente com pessoas especiais na famlia e nos colegas que conhecemos. Eu, Thiago, agradeo aos meus pais Lindalva e Claudinei, meus irmos Fernando e Andr e meus avs Euclides e Geni que conviveram estes momentos juntamente comigo, meu pai me levando s vezes para a faculdade, minha me sempre preocupada comigo se j havia me alimentado antes de ir estudar e meus avs que foram essenciais em todo o processo que passei, sempre dizendo para eu ter cuidado onde eu andasse e sempre orando pelos meus caminhos. Agradeo meus sogros Edivino e Nilma, meu cunhado Renato e minha amada namorada Edilene que conviveram estes 4(quatro) anos me ajudando em todos os momentos que precisei. Agradeo especialmente a minha namorada que esteve ao meu lado em todos os momentos que passei, chorando, sorrindo e lutando comigo sempre. A todos eu sou grato por me abraarem e estarem comigo. Eu, Fernando, agradeo a minha linda amada esposa Regina que suportou e ajudou em todos os momentos que passei nestes 4 (quatro) anos. minha filha Fernanda que s vezes at me emprestou material escolar para estudar e meus familiares e amigos, sou muito grato a eles. Agradecemos aos nossos companheiros e amigos Z (do anglo), grande amigo em todos os momentos que colaborou na diagramao deste trabalho, ao Michel que um exemplo de amigo e colega, a Fabiana que uma grande amiga e colega, aos meus amigos e colegas Alessandro e Carlos que sempre estiveram mais prximos nas brincadeiras e trabalhos. Aos professores, Jane que foi uma grande professora nos orientando e incentivando nosso trabalho, ao Cor que foi um grande professor e amigo, a Virgnia que foi uma excelente professora e orientadora nos caminhos profissionais, e ao Professor Mig que alm de Coordenador do Curso um grande amigo que esteve ao nosso lado, nos ajudando e defendendo os nossos ideais.

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

DEDICATRIA

Eu, Thiago dedico este trabalho, Aos meus pais, irmos, avs E minha amada namorada Edilene. Eu, Fernando dedico este trabalho A minha esposa Regina e A minha filha Fernanda.

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

LISTA DE ILUSTRAES
Figura 1: Diagrama de navegao Figura 2: Smbolos deficientes Figura 3: Ilustrao Figura em quadrinhos Grfico 1: Grfico de acesso descritivo 11 19 20 18

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

NDICE

1. 2. 3. 4. 4.1 4.2 5. 5.1 6. 7. 7.1 8. 8.1 8.2 9. 9.1 10.

INTRODUO.................................................................... 1 QUEBRANDO PARADIGMAS ...........................................2 ESTATSTICA SOBRE O DEFICIENTE VISUAL NA REIGO METROPOLITANA DE CAMPINAS (RMC)..........2 DA INFORMO AO CONHECIMENTO............................ 4 INFORMAO ................................................................... 4 CONHECIMENTO .............................................................. 4 INTERNET.......................................................................... 5 BROWSER7 WEBDESIGN...................................................................... 7 USABILIDADE NA INTERNET............................................9 SEGMENTAO DE MERCADO ..................................... 10 ARQUITETURA DA INFORMAO ................................. 11 DEFINIO DE FLUXO DE NAVEG. DO WEBSITE ........ 12 DEFINIO DE NOMENCLATURA DE SEO ............. 12 ACESSIBILIDADE ............................................................ 13 ACESSIBILIDADE NO BRASIL......................................... 14 PROGRAMAO ESPECIAL PARA CONSTRUO DE WEBSITES ACESSVEIS ................................................. 17

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

10.1

APRESENTAO DA INFORMAO ............................. 17

10.1.1 IMAGEM COMPLEXA:GRFICO 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 VDEOS ............................................... 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 FORMALRIOS ............................................................... 30 10.1.11 LINKS .............................................................................. 34 10.2 10.3 11. 12. APRESENTAO, ESTRUTURA E CONTEDO .............. 37 VERIFICAO DA ACESSIBILIDADE ............................... 39 CONCLUSO...................................................................... 41 BIBLIOGRAFIA.................................................................... 43

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

1.

INTRODUO
O mundo vive atualmente a ERA DA INFORMAO ou SOCIEDADE

DA INFORMAO, utilizao de tecnologias de informao e comunicao est em expanso no mundo a internet a anfitri desta era. Os computadores pessoais e demais tecnologias que possibilitam a interface entre o homem e a informao esto mais acessveis

economicamente s pessoas. Atualmente possvel comprar um computador facilmente,

possibilitando acesso internet. Acessibilidade um termo muito mais amplo do que apenas acesso a algo. Uma minoria da sociedade no tem os mesmos direitos de acessibilidade s tecnologias de informao e comunicao. So eles os cegos ou amblopes. A maioria dos websites e computadores tm barreiras de acessibilidade impossibilitando a maioria das pessoas com deficincia fsica o acesso a informao. O objetivo deste trabalho desenvolver acessibilidade na internet especificamente para os cegos por meio da conscientizao dos

desenvolvedores web (webmasters, webdesigners, projetistas, consultores, empresrios), empresas pblicas /privadas e todas as pessoas com disposio para aprender e concretizar esta idia. dever de todos estes grupos citados acima que assegurem a disponibilizao acessvel da informao na INTERNET para todos com necessidades especiais. Sendo assim necessrio o entendimento das solues tcnicas para que este objetivo seja alcanado.

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

2.

QUEBRANDO PARADIGMAS
A deficincia visual, seja ela cegueira total ou baixa viso, pode afetar a pessoa em qualquer idade. Bebs podem nascer sem viso e outras pessoas podem tornar-se deficientes visuais, em qualquer fase da vida, desde os primeiros dias de vida at a idade avanada. A deficincia visual ocorre independentemente de sexo, religio, crenas, grupo tnico, raa, ancestrais, educao, cultura, sade, posio social, condies de residncia ou qualquer outra condio especfica. Pode ocorrer repentinamente de um acidente ou doena sbita, ou to gradativamente que a pessoa atingida demora a tomar conscincia do que est acontecendo. A deficincia visual interfere em habilidades e capacidades e afeta, no somente a vida da pessoa que perdeu a viso, mas tambm dos membros da famlia, amigos, colegas, professores, empregadores e outros. Entretanto, com tratamento precoce, atendimento educacional adequado, programas e servios especializados, a perda da viso no significar o fim da vida independente e no ameaar a vida plena e produtiva. (Texto retirado http://www.fundacaodorina.org.br/fundacao/deficiencia.asp )

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

3. ESTATSTICA SOBRE OS DEFICIENTES VISUAIS NA REGIO METROPOLITANA DE CAMPINAS (RMC)


Os nmeros da Regio Metropolitana de Campinas (RMC) em relao s pessoas com deficincia acompanham as dimenses nacionais, de acordo com dados deste ano do Instituto Brasileiro de Geografia e Estatstica (IBGE). Cerca de 357 mil pessoas so portadoras de deficincia mental, fsica, auditiva ou visual. O nmero representa 13,5% da populao residente nas 19 cidades englobadas.A deficincia 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 deficincia auditiva so 2,4% da populao (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 tambm 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 regio com a maior proporo de pessoas com pelo menos uma das deficincias registradas pela pesquisa. O estudo estatstico aponta que 18,7% da populao desta cidade so deficientes. A menor proporo em relao 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 populao tem se organizado para criar entidades e polticas pblicas que garantam os direitos dos cidados que no precisam de assistencialismo, mas de condies para sobreviver com dignidade.(Texto retirado http://www.cosmo.com.br) Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

4.

DA INFORMAO AO CONHECIMENTO
A ERA DA INFORMAO traz paradigmas da economia, como

produtividade e qualidade, cria novos caminhos para o desenvolvimento e exige uma nova postura diante das mudanas sociais. Para o Deficiente Visual como para todos, obter e aplicar conhecimento passa a ser item bsico para enfrentar essas mudanas. A informao no-acessvel o maior paradigma aos deficientes visuais. Vejamos abaixo a importncia da informao e conhecimento.

4.1 INFORMAO
Informao so dados ou matria informacional relacionada ou estruturada de maneira potencialmente significativa sendo subsdio til tomada de deciso. Da informao podemos extrair o conhecimento, pois reduz a incerteza em determinada situao.

4.2 CONHECIMENTO
Existem os conhecimentos:

Explcito o conjunto de informaes disponveis em livros, documentos, websites, dentre outros.

Tcito o saber prtico sobre um assunto, agregando crenas, sentimentos, emoes e experincia na formao da personalidade de uma pessoa

Estratgico a juno do conhecimento Explcito e Tcito juntamente com conhecimento de especialistas na estratgia especfica.

A construo da personalidade, princpios ticos e outros fatores que compem um ser humano vem da informao e conhecimento adquiridos. Como veremos nos tpicos a seguir, a internet o meio de comunicao em massa que contm informao acessvel a quase todas as pessoas. A frentes Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

pela Incluso Digital e a Acessibilidade aos Deficientes Visuais (que tratamos neste trabalho) so aes essenciais para que todos possam obter o conhecimento.

5.

INTERNET
Fruto da Guerra Fria, que colocou EUA e Unio Sovitica em lados

opostos, a internet se transformou numa das mdias de mais rpido crescimento da histria. Uma grande rede mundial de computadores interligados. Comeou 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 Agncia de Pesquisa de Projetos Avanados, uma subdiviso do Departamento de Defesa dos Estados Unidos. Esses projetos visavam o desenvolvimento de uma rede de

computadores para comunicao entre os principais centros militares de comando e controle que pudesse sobreviver a um possvel 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 marcao utilizada para a criao de Websites (conjunto de pginas HTML). Em 1996 a palavra Internet j era de uso comum, principalmente nos pases desenvolvidos a criao de websites de todos os ramos (comrcioseletrnicos, bate-papos, empresariais) foi grande, elevando um nmero que cresce velozmente ainda hoje. poca do seu "estouro" comercial, jornalistas, publicitrios, designers, escritores, redatores, fotgrafos, alm claro de programadores, e webmasters, afluram ao mercado, criando e desenvolvendo empresas com os mais variados objetivos.

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

No meio educativo a internet se tornou um aliado poderoso s pesquisas disponibilizando tutoriais e guias-rpidos gratuitamente. Chegaram a pensar que substituiria os livros, jornais e todo o meio impresso. Mas no foi o que aconteceu, ao contrrio, a internet seria a nova aliada juntamente com os outros meios de comunicao. Em 2002 o estouro comercial havia se normalizado e empresas especializadas em desenvolvimento de websites e sistemas web foram surgindo. A padronizao de criao e a prpria sociedade j estava se adaptando a este novo mundo. No dia 31/05/2005 a internet comercial no Brasil comemorou a criao do Comit Gestor da Internet no Brasil (entidade responsvel pela internet no Brasil), dados estatsticos do Registro.BR (registro online de domnios para a internet no Brasil) O Brasil o 10 pas em nmero de usurios de internet e o 72 em densidade por 100 habitantes, segundo dados da Unio Internacional de Telecomunicaes (UIT) referentes a 2004 de 183 pases. Em 2004 o Brasil tinha 22 milhes de usurios de internet, 3,5 milhes de servidores de internet (hosts) e 19,35 milhes de computadores. Pela primeira vez no mundo um cidado comum pode (facilmente e a um custo muito baixo) no s ter acesso a informaes localizadas nos mais distantes pontos do globo como tambm criar, gerenciar e distribuir informaes em larga escala, no mbito mundial, algo que somente uma grande organizao poderia fazer usando os meios de comunicao convencionais. Com a Internet uma pessoa qualquer (um jornalista, por exemplo) pode, de sua prpria casa, oferecer um servio de informao baseado na Internet, a partir de um computador com acesso a rede. Todo cidado tem direito a informao, pois o princpio de sua formao moral e intelectual. O acesso ao contedo informacional na internet prope que a sociedade no estar marginalizada na ERA DA INFORMAO, mas no contexto de um paradigma objetivista (moralidade do auto-interesse) onde formamos nossas prprias idias. * O World Wide Web Consortium (http://www.w3.org), foi criado em 1994 para levar a Web para o seu potencial mximo, atravs do desenvolvimento de

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

protocolos comuns e fruns abertos que promovem sua evoluo e asseguram a sua interoperabilidade. O W3C desenvolve tecnologias, denominadas Web Standards (ou Padres Web) para a criao e a interpretao dos contedos para Web.

5.1. BROWSERS
O web browser uma aplicao que permite ao usurio interagir com websites e sistemas web hospedados em um servidor web. Os browsers populares disponveis 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 informao codificada (HTML) contida na internet e o internauta, sendo que o HTML traduzido pelo browser que por sua vez apresenta uma informao compreensvel ao internauta.

6.

WEBDESIGN
Bilhes de websites existentes no mundo inteiro e milhares (de que ?)

so desenvolvidos todos os dias. O website a janela para o mundo, uma ferramenta essencial na internet para disseminar a informao, de fcil compreenso pelo internauta, pois utiliza imagens, sons, vdeos, animaes dentre outros componentes. Quando um website utiliza todos estes componentes juntos necessrio que haja organizao para que o internauta possa compreender o que est sendo apresentado, esta organizao chamada de ARQUITETURA DE INFORMAO que veremos no prximo tpico. Quando visitamos um website, em que seu desenvolvimento se deu por tcnicas de usabilidade (captulo X.X), podemos navegar por todo seu contedo sem dificuldades e sem prejuzo na captao da informao passada. O Webdesigner um profissional que constri websites, utilizando conhecimento de diversas reas tcnicas, como o design, programao, administrao de banco de dados, arquitetura de informao, engenharia de

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

software, publicidade, psicologia, dentre outras que esto no escopo desta atividade. Hoje a tcnica mais usada para a organizao do contedo nos websites so as tabelas, que tambm so usadas para demonstraes tabulares como informaes nas tabelas do Microsoft Excel por exemplo, na verdade so usadas em sua maioria para colocar imagens e textos em conjunto, criando as formas e disposies das informaes no website de forma mais agradvel. Com o advento das folhas de estilos, o famoso CSS (Cascading Style Sheets, Cascata de Estilos), possibilita a mudana da aparncia simultnea de todas as pginas relacionadas com o mesmo estilo. Ao invs de colocar a formatao dentro do cdigo, o webdesigner cria um link para uma pgina que contm os estilos, procedendo de forma idntica para todas as pginas de um website. Quando quiser alterar a aparncia do portal basta que modifique apenas este arquivo. Sendo assim a disposio baseada em tabelas considerada cada vez mais como uma opo ultrapassada. Veja abaixo um exemplo de programao em CSS para colocar estilo em um website. Ex.: /* o corpo do website com fonte padro ARIAL e cor de fundo branco */ body { font-family:arial , verdana , sans-serif; background-color:#ffffff; }

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

7.

USABILIDADE NA INTERNET
Pela definio da International Organization for Standardization,

usabilidade a extenso na qual um produto pode ser usado por usurios especficos para alcanar objetivos especficos com, eficincia e satisfao. Usabilidade est diretamente ligada ao dilogo na interface e a capacidade do website em permitir que o usurio alcance suas metas de interao com o sistema. Ser de fcil aprendizagem, permitir utilizao eficiente e apresentar poucos erros so os aspectos fundamentais para a percepo da boa usabilidade por parte do usurio. Benefcios da Usabilidade.

Maior nmero de transaes bem sucedidas no Website. Diminuio da evaso de usurios por desistncia. Aumento da eficincia de seu Website. Maior fidelidade do usurio. Percepo positiva da Empresa.

Melhorar a interao do usurio com o website essencial. Atualmente existem empresas de Consultoria em Usabilidade. O internauta precisa entender o que est vendo, gerando confiana e fidelidade, assim uma possvel transao (comercial ou informacional) ser eficiente. Esta a viso dos grandes e-commerces e portais. Um exemplo o portal UOL (www.uol.com.br), que h anos permanece com as mesmas caractersticas estruturais (Arquitetura de Informao (prximo tpico)) de menu, sees, notcias principais e propagandas. Observe que os grandes portais e e-commerces mantm uma estrutura parecida, pois a mais usual entre os internautas, ou seja, um tipo de navegao e estrutura de informaes de fcil compreenso.

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

7.1 SEGMENTAO DE MERCADO


Os itens que compem a segmentao de mercado so os abaixo selecionados:

Caractersticas Geogrficas: Regies, cidades, estados, pases. Caractersticas Demogrficas: Sexo, Idade, Raa, Nacionalidade, Renda, Escolaridade, Ocupao Profissional, Tamanho da Famlia, Estado Civil dentre outras caractersticas.

Personalidade: Estilo de vida, atitudes, percepo do consumidor.

Um exemplo de estudos na psicologia na criao de interface e contedo a SIMITICA DA INFORMAO (relao entre alguma coisa e seu significado) que ainda est em estudos, mas logo estar em toda a internet. Trata-se de uma tcnica de criao do design, arquitetura de informao do website pensando nos processos cognitivos de um usurio e no apenas na sua personalidade como a usabilidade estuda. Os processos cognitivos levam um usurio a percorrer um caminho (de acordo com a sua vontade) em um conjunto de pginas de um website por exemplo. O Macromedia flash em um website tambm foi uma forma agradvel de apresentao do contedo no website, oferecendo caractersticas novas de interatividade com os internautas. O flash muito mais restritivo do que o formato aberto do HTML, e ainda requer um proprietrio plugin para que possa ser visualizado no computador do usurio. Infelizmente muitos leitores de tela no traduzem o flash, impossibilitando interao com o Deficiente Visual. Macromedia Flash, ou simplesmente Flash, um programa grfico vetorial utilizado para se criar animaes interativas, ele desenvolvido e comercializado pela Macromedia (empresa especializada em desenvolver programas que auxiliam o processo de criao de pginas web).

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

Leitor de telas (Ecr) - um sistema para microcomputadores da linha PC que se comunica com o usurio mediante sntese de voz, viabilizando, o uso de computadores por deficientes visuais, por exemplo o programa DOSVOX desenvolvido pela UFRJ. (indicar a fonte dos dois ltimos pargrafos transcritos)

8.

ARQUITETURA DE INFORMAO
uma das etapas para o desenvolvimento de um website. Esta etapa

organiza e classifica as informaes para facilitar o acesso do usurio informao. O webdesigner deve ter formao em rea especfica em Engenharia de Software, Desenho Industrial ou similar para que esteja capacitado a desenvolver um planejamento onde sero geradas especificaes como esqueletos das pginas, menus de navegao, dentre as vrias partes integrantes de cada projeto de um website. O contedo classificado, organizado numa hierarquia chamada taxonomia, a mesma que rege o menu de navegao e a hierarquia entre as pginas do website. Para explicar como tudo isso vai funcionar antes de ficar pronto, apresentamos diagramas conceituais do fluxo de navegao e da hierarquia de pgina.

figura 1 http://www.usabilidoido.com.br/imagens/diagrama_navegacao.gif

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

Localizao estrutural do contedo informativo e forma de navegao o que define a arquitetura de informao.

8.1

DEFINIO DE FLUXOS DE NAVEGAO DO WEBSITE.


Um website pode conter inmeras pginas com contedos que devem

ser interpostos em um menu em ordem lgica de acordo com o assunto, ou ordem que o pblico-alvo possa compreender. necessria uma anlise do comportamento (Psicologia Behaviourista) do internauta. O menu deve ser de fcil navegao (usabilidade) e compreenso por parte do pblico-alvo. Um fluxo de navegao que no tenha ordem lgica de estrutura, prejudica seriamente o acesso do cego ao contedo informativo. Um livro comum contm capa, ndice, introduo, pginas estruturadas com informaes relativas a um assunto especfico e concluso final de todas as informaes obtidas em sua leitura. O mesmo conceito no fluxo de navegao deve ser desenvolvida no website. O cego percorre um caminho definido pelo webdesigner. Se este caminho no conter lgica em seu fluxo de navegao.

8.2 DEFINIO DE NOMENCLATURA DE SEES.


O menu deve conter um fluxo de navegao fcil e compreensvel como descrito acima. A nomenclatura dos itens relacionados na estrutura do menu devem estar em uma linguagem comum ao pblico-alvo. A nomenclatura de uma seo pode conter muitas vezes uma s palavra. Seu objetivo abstrair em poucas ou at mesmo em uma palavra a definio geral de uma seo, por exemplo (um portal de notcias que contm uma seo com a nomenclatura ESPORTES, CIDADES). Estas so exatamente as preocupaes de um arquiteto de informao e a maioria dos webdesigners no possui conhecimento ou experincia suficiente para tomar as decises certas nestas questes. Como vimos, a arquitetura de informao essencial para a organizao de menu e contedo dos websites, e ainda mais importante para

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

os Deficientes Visuais, pois deve haver um fluxo de navegao que possibilite ao Deficiente Visual, entender de forma homognea todo o contedo informacional apresentado, pois desta forma a informao entendida se transformar em conhecimento, e no haver prejuzo na interao do website e o internauta. Pblico Alvo - Tambm conhecido por levantamento do perfil, segmento de mercado ou target, auxilia a empresa no direcionamento para o desenvolvimento de um website.

9.

ACESSIBILIDADE
Alguns pases como o Canad, Austrlia e Estados Unidos

regulamentaram a adoo de regras de Acessibilidade na concepo da informao disponibilizada na Internet pela Administrao Pblica, com o objetivo de facilitar o seu acesso a Pessoas com Necessidades Especiais, em especial, pessoas com deficincias e idosos. O W3C, publicou em 5 de Maio de 1999 o seu primeiro documento que serviu de referncia internacional para a Acessibilidade na Internet. O documento tem o nome de "Diretivas para a acessibilidade do contedo da Web 1.0" (Web Content Accessibility Guidelines 1.0) e explica como tornar o contedo web acessvel a pessoas com deficincias. As regras de Acessibilidade para contedos na Internet aplicam-se obviamente tambm aos contedos disponibilizados numa Intranet aos trabalhadores de uma organizao ou a qualquer documento em formato HTML. Importa salientar que tambm neste caso a adoo das regras de Acessibilidade proporciona maiores vantagens para outros utilizadores, nomeadamente para quem tem comunicaes lentas, browsers antigos, ou dispositivos de acesso diversificados: PDA, Quiosques Internet ou Televiso.

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

9.1. ACESSIBILIDADE NO BRASIL


Lei de acessibilidade - Decreto lei 5296 Decreto-lei 5296 de 2 de dezembro de 2004 Regulamenta as Leis ns 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 critrios bsicos para a promoo da acessibilidade Captulo III Das Condies Gerais da Acessibilidade Art. 8o Para os fins de acessibilidade, considera-se: I - acessibilidade: condio para utilizao, com segurana e autonomia, total ou assistida, dos espaos, mobilirios e equipamentos urbanos, das edificaes, dos servios de transporte e dos dispositivos, sistemas e meios de comunicao e informao, por pessoa portadora de deficincia ou com mobilidade reduzida; II - barreiras: qualquer entrave ou obstculo que limite ou impea o acesso, a liberdade de movimento, a circulao com segurana e a possibilidade de as pessoas se comunicarem ou terem acesso informao, classificadas em: a) barreiras urbansticas: as existentes nas vias pblicas e nos espaos de uso pblico; b) barreiras nas edificaes: as existentes no entorno e interior das edificaes de uso pblico e coletivo e no entorno e nas reas internas de uso comum nas edificaes de uso privado multifamiliar; c) barreiras nos transportes: as existentes nos servios de transportes; e

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

d) barreiras nas comunicaes e informaes: qualquer entrave ou obstculo que dificulte ou impossibilite a expresso ou o recebimento de mensagens por intermdio dos dispositivos, meios ou sistemas de comunicao, sejam ou no de massa, bem como aqueles que dificultem ou impossibilitem o acesso informao; Captulo 7 do Decreto-Lei sobre Acessibilidade em Websites. Captulo VI Do Acesso Informao e Comunicao Art. 47. No prazo de at doze meses a contar da data de publicao deste Decreto, ser obrigatria a acessibilidade nos portais e stios eletrnicos da administrao pblica na rede mundial de computadores (internet), para o uso das pessoas portadoras de deficincia visual, garantindo-lhes o pleno acesso s informaes disponveis. 1o Nos portais e stios de grande porte, desde que seja demonstrada a inviabilidade tcnica de se concluir os procedimentos para alcanar integralmente a acessibilidade, o prazo definido no caput ser estendido por igual perodo. 2o Os stios eletrnicos acessveis s pessoas portadoras de deficincia contero smbolo que represente a acessibilidade na rede mundial de computadores (internet), a ser adotado nas respectivas pginas de entrada. 3o Os telecentros comunitrios instalados ou custeados pelos Governos Federal, Estadual, Municipal ou do Distrito Federal devem possuir instalaes plenamente acessveis e, pelo menos, um computador com sistema de som instalado, para uso preferencial por pessoas portadoras de deficincia visual. Art. 48. Aps doze meses da edio deste Decreto, a acessibilidade nos portais e stios eletrnicos de interesse pblico

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

na rede mundial de computadores (internet), dever ser observada para obteno do financiamento de que trata o inciso III do art. 2o. (Texto retirado: http://www.acessobrasil.org.br/index.php?itemid=43) Algumas notas sobre o que vem acontecendo no pas. 22/10/2004 - Mercado para profissionais capacitados na rea de acessibilidade cada vez mais promissor 01/03/2005 - Programa DaSilva j avalia tambm os websites conforme as recomendaes do Governo Eletrnico 11/04/2005 - Portal da ANEEL torna-se acessvel 19/04/2005 - Portal da Justia Federal adequa seu site de acordo com a lei de acessibilidade 16/09/2005 - Instituto Benjamin Constant lana seu novo site em comemorao aos 151 anos de fundao 21/10/2005 - Senado Federal inicia a adequao de suas pginas aos princpios de Acessibilidade.
(Fonte: www.acessobrasil.org.br)

Realmente considervel a iniciativa de alguns rgos na preocupao com a Acessibilidade. Mas ainda estamos muito longe do que almejado.

10. PROGRAMAO ESPECIAL PARA CONSTRUO DE WEBSITES ACESSVEIS


A seguir so apresentadas algumas regras para o desenvolvimento de um website acessvel. O conhecimento aprofundado requer um estudo do documento do W3C, mas as regras abaixo so significativamente importantes.

10.1 APRESENTAO DA INFORMAO

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

Garantir que todas as imagens se encontram legendadas ou descritas com texto. Cdigos e funcionalidades devem ser apresentadas em forma textual. Nota: Esta medida essencial para botes, ligaes feitas com recurso a imagens, imagens complexas. O Leitor de Ecr utilizado por um cego ir ler o texto alternativo associado imagem. Exemplos: - Imagem normal: Fotos, botes e ligaes (hiperlinks) <html> ... <img id="logotipo" src="submarino.gif" alt="Logotipo do Submarino" /> ... </html>

10.1.1 Imagem Complexa: Grficos, etc...

Criar uma pgina com a descrio da imagem (equivalente textual) suficientemente completa e salvar.

Na tag "img" incluir o atributo "longdesc" com o nome do arquivo que contm a descrio.

Existem agentes que no suportam o "longdesc", ento fornea um link descritivo prximo a imagem.

A seguir um exemplo de imagem de grfico com descrio completa (atributo "longdesc" e link descritivo [D] com link para o arquivo "descricao_grafico.html"). Exemplo:

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

grfico 01 <html> ... <img id="grafico" src="grafico.gif" longdesc="descricao_grafico.html" alt="Grfico com nmero de acessos do portal submarino" /> <a href="descricao_grafico.html" title="Descrio do Grfico">[D]</a> ... </html>

10.1.2 Imagem Mapeada:

Fornece equivalente textual para regies 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 descrio do link. Para garantir o acesso, fornecer tambm o texto redundante.

Tipo server-side (usa atributo "ismap"): Por no ser acessvel a navegao via teclado, fornecer equivalente textual fora da imagem (link/texto redundante).

figura 2 [ Visual | Auditiva | Fsica | Cognitiva ] Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

<html> ... <img id="imgmap" src="map.gif" alt="Sees" title="Sees" 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" /> </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 ao ou substitua a funcionalidade do script.

Fornecer equivalente textual para scripts. Assegurar que programas interpretveis funcionem mesmo quando estes tiverem sido desativados ou no forem suportados.

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

No exemplo a seguir um script simples e descrio da ao 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 usurio... </script> <noscript> No primeiro quadrinho, Cebolinha tenta levantar o halteres para que Casco tire uma foto. O esforo imenso e ele no consegue. No segundo e ltimo quadrinho ... </noscript>

10.1.4 Bullets e Listas

Fornecer equivalente textual para imagens usadas como pontos de enumerao (bullets) simulando uma lista. Ou no simular uma lista e sim utilizar a lista de fato (melhor soluo).

No caso de simular uma lista com imagem, incluir o atributo "alt" com descrio conforme Exemplo1. A desvantagem desta opo que o leitor de tela ir focar todas as imagens (bullets) lendo desnecessriamente a descrio textual de cada imagem.

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

O ideal no 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 no focar as imagens. (Os itens deste guia utiliza este recurso.)

Exemplo1:

A seguir, uma seqncia de itens que simula uma lista utilizando imagems como bullet.

O cdigo mostra 3 diferentes, mas apropriadas formas, para usar o atributo "alt" para nomear este tipo de imagem. Histrico Misso Estrutura

<img src="lista3.gif" alt="Item " /> Histrico<br /> <img src="lista3.gif" alt ="*" /> Misso<br /> <img src="lista3.gif" alt =" " /> Estrutura<br /> Exemplo2:

Fazer uma lista no ordenada padro no HTML. Histrico Misso Estrutura

<ul> <li>Histrico</li> <li>Misso</li> <li>Estrutura </li> </ul> //incluir imagem no CSS

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

ul { list-style-type: none; list-style-image: url("estrela.gif"); }

10.1.5 Sons, udios e Vdeos

Fornecer equivalentes para sons, udios e vdeos. Para sons e udios, fornecer descrio textual. Para imagens de vdeo, fornecer descrio sonora ou textual.

Levar em considerao que imagens, vdeo e udio, podem facilitar a compreenso do contedo, como por exemplo, uma seqncia de imagens para explicar algo, um vdeo de uma pessoa traduzindo o contedo para a linguagem de sinais.

Exemplo1: Se ao acessar uma pgina e um som significativo reproduzido, fornecer uma descrio textual do som. Se o som/adio no for significativo ou tratar-se de uma msica sem letras, no necessrio fornecer equivalente textual. Exemplo2: Se o udio conter muita informao, fornecer uma transcrio textual completa. Exemplo3: Para vdeos com udio, fornecer equivalentes sincronizados: descrio sonora das cenas e aes das imagens e legendas para dilogos, narrao e sons. Se a sincronizao no for possvel, fornecer descrio textual e transcrio em um pgina.

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

10.1.6 Cores em fundos


No recorrer apenas cor.

Assegurar que todas as informaes veiculadas com cor estejam tambm disponveis sem cor. Se a cor for o nico meio utilizado para transmitir informaes, as pessoas que no diferenciam cores, bem como os usurios de monitores monocromticos e dispositivos no coloridos, no recebero essas informaes.

Exemplo:

Incorreto: a palavra caneta est destacada dos outros itens, somente atravs da cor (vermelha). O item vermelho o mais utilizado. lpis - borracha caneta

Sem cor perde-se a informao, pois a palavra caneta perdeu o destaque. O item vermelho o mais utilizado. lpis - borracha caneta

Correto: a descrio da cor faz parte da palavra caneta. O item vermelho o mais utilizado. lpis preto - borracha branca - caneta vermelha

Cores: Assegurar que a combinao de cores entre o fundo e o primeiro plano seja suficientemente contrastante para poder ser vista por pessoas com cromodeficincias, bem como pelas que utilizam monitores de vdeo monocromticos.

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

Exemplos: Imagem contendo texto e fundo com pouco contraste.

A imagem anterior se vista em monitor monocromtico.

Imagem contendo texto e fundo com bom contraste.

Imagem anterior se vista em monitor monocromtico.

10.1.7 Idiomas
Identificar a lngua estrangeira em documentos e equivalentes textuais, atravs de marcaes que facilitem a pronncia e a interpretao de texto.

A marcao do idioma permite que a mudana de idioma em um documento seja identificado por sintetizadores de voz e os dispositivos Braille que podem passar automaticamente para o outro idioma. Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao


Incluir o atributo "lang" para identificar o idioma estrangeiro. Alguns idiomas: ingls-en; francs-fr; espanhol-es; italiano-it;

portugus-pt; alemo-de.

Exemplo: Uma frase com expresso em ingls. (E ouvimos algum sussurar "take it easy!" o que nos levou a...)

<p>E ouvimos algum 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 cabealho "http".

Exemplo:

Idioma principal de um documento em portugus do Brasil.

<html xml:lang="pt" lang="pt-br"> ...contedo da pgina em portugus... </html>

10.1.9 Tabelas

Evitar o uso de tabelas para formatao visual de uma pgina. altamente recomendvel utizar as folhas de estilo (CSS) e a correta marcao para construir a apresentao visual sem tabelas.

Utilizar as tabelas somente para compor dados tabulares. A marcao correta de tabelas beneficia usurios que utilizam meios sonoros, como leitor de tela, para acessar pginas web.

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

Recomendao

Evitar o uso de tabelas para formatao visual de uma pgina. altamente recomendvel utizar as folhas de estilo (CSS) e a correta marcao para construir a apresentao visual sem tabelas.

Utilizar as tabelas somente para compor dados tabulares. A marcao correta de tabelas beneficia usurios que utilizam meios sonoros, como leitor de tela, para acessar pginas web.

TTULO DA TABELA: Fornecer o ttulo da tabela atravs da tag "caption".

RESUMO DA TABELA: Para melhor compreenso de tabelas complexas, fornecer um resumo informando o propsito da tabela atravs do atributo "summary" no elemento "table". O resumo no fica visvel na pgina, mas o leitor de tela descreve.

CABEALHO E DADOS: Utilizar "th" para identificar os cabealhos de linhas e colunas e "td" para identificar as clulas com dados.

ASSOCIAO ENTRE CABEALHO E DADOS: Associar os dados "td" aos respectivos cabealhos "th". Em tabelas simples, associar com o atributo "scope" na tag "th" e em tabelas com dois ou mais nveis de cabealhos, associar com os atributos "headers" e "id".

GRUPOS: Fornecer as marcaes "thead", "tfoot" e "tbody" para agrupar linhas e "col" e "colgroup" para agrupar colunas. Alm de facilitar a organizao da tabela, auxilia na aplicao de estilos.

No simular tabelas utlizando espaamentos ou outras marcaes 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 marcao apropriada, aconselhvel, se possvel, utilizar-se de tabelas mais simples.

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

Exemplo1: Tabela simples com ttulo, cabealhos, dados e associao por "scope". NOTAS Alunos Paulo Marcos Rosa <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> Portugus 7 6 10 Matemtica 8 9 7

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

Exemplo2: Tabela com dois nveis de cabealho requer associao com dados atravs dos atributos "id" e "headers". NOTAS Grupos A B <table> <caption>NOTAS</caption> <tr> <th id="grupo">Grupo</th> <th id="alunos">Alunos</th> <th id="portugues">Portugus</th> <th id="matematica">Matemtica</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> Trabalho de Concluso de Curso Alunos Paulo Marcos Rosa Portugus 7 6 10 Matemtica 8 9 7

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

Exemplo3: Tabela com mais nveis de cabealho, resumo, ttulo e agrupados por linhas - "thead", "tfoot" e "tbody". Associados com "id" e "headers". A tag "tfoot" deve estar antes de "tbody". O leitor de tela falar em ordem linearizada se utilizar as teclas de setas. Porm ao focar determinada clula e com teclas especficas, poder falar: grupo 1 alunos Paulo portugus 7 matemtica 8 e assim por diante. NOTAS Grupo principais Total por matria <table summary="Tabela contendo notas por grupo em relao a alunos e matrias."> <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">Matrias</th> </tr> <tr> <th id="portugues">Portugus</th> <th id="matematica">Matemtica</th> </tr> </thead> <tfoot> <th id="total" colspan="2">Total por Trabalho de Concluso de Curso Alunos 7,6 Matrias Portugus 8 Matemtica

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

matria</th> <td headers="total">7,6</td> <td headers="total">8</td> </tfoot> <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 Formulrios

Posicionar corretamente os rtulos e os controles do formulrio para que a navegao seja coerente.

Associar o controle do formulrio com o respectivo rtulo. Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao


Agrupar informaes de forma apropriada. Associar cada controle do formulrio ao rtulo incluindo "label for" para os rtulos e "id" para os controles. Em "input" do tipo boto, no necessria a associao, pois o leitor de tela fala o texto contido no boto. Para botes que so imagens, fornea o equivalente textual com "alt".

Em formulrios extensos, agrupar os controles do formulrio por assunto, utilizando as tags "fieldset" e "legend". Os elementos "option" no "select" podem ser agrupados utilizando "optgroup".

Criar navegao ordenada atravs do atributo "tabindex".

Exemplo1: Associao entre rtulo e controle (input) atravs dos elementos "label for" e "id". Navegao ordenada atravs 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

Boto 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" />

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

<input type="submit" value="Enviar" name="Submit" tabindex="3" </form> Exemplo2: Diversos controles agrupados atravs de "fieldset" e "legend". Em "select" os elementos esto agrupados atravs de "optgroup". Dados pessoais Nome:
seu nome

/>

Comentrio:
Entre com o comentrio

Enviar

Enviar Limpar campos

Boto Limpar <form> <fieldset>

<legend>Dados pessoais</legend> <label for="nome">Nome:</label> <input type="text" value="Entre com o nome" id="nome" /> <label for="comentario">Comentrio:</label> <textarea id="comentario" name="textfield"> Entre com o comentrio</textarea> </fieldset> <fieldset> <legend>Escolaridade:</legend> Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

<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" 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">Natao</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>Opinio:</legend> <label for="domingo">Seu domingo foi: </label> <select id="domingo"> <optgroup label="Positivo"> <option selected>Selecione:</option> Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

<option>timo</option> <option>Muito bom</option> <option>Bom</option> </optgroup> <optgroup label="Negativo"> <option>Ruim</option> <option>Pssimo</option> </optgroup> </select> </fieldset> <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 usurios de leitores de tela podem navegar em links de uma pgina utilizando a tecla "tab". Para cada "tab" pronunciado um texto do link. Devido a isso, no utilizar texto do link generalizado como "Clique aqui". - Para tornar ainda mais claro o destino do link, utilizar ttulo de link informativo (elemento "title"). - Para navegao dos links via teclado, pode-se organizar a seqncia dos links e/ou determinar teclas de atalho para links iimportantes. TITLE: Se h mais de um link na pgina com diferentes textos do links mas apontando para o mesmo endereo, diferenciar os links utilizando o atributo "title". TITLE: Se h mais de um link na pgina com o mesmo texto do link, todos estes links devem apontar para o mesmo endereo. Se no for possvel devido ao contexto do texto, diferenciar os links utilizando o atributo "title". Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

TABINDEX: para definir a ordem da navegao via tecla "tab", incluir o atributo "tabindex" com valores 1, 2, 3, etc no elemento do link. Alm de link, o "tabindex" vlido para formulrios 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. Alm de link, o "accesskey" vlido para formulrios 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 no faz sentido se lido fora do contexto. O usurio que utiliza leitor de tela, no saber qual o destino do link. O exemplo correto possui texto do link significativo quando lido fora do contexto. O usurio que utiliza leitor de tela saber que o link aponta para a Floricultura Rosas. Experimente navegar nesta pgina utilizando a tecla "tab". Os links sero focados. INCORRETO: Floricultura Rosas. Clique aqui. CORRETO: Floricultura Rosas. Exemplo 2 Diferentes textos de links para o mesmo objetivo. Os dois links esto apontando para o stio da Ferrari e possuem o atributo "title" descrevendo "Stio da Ferrari" na marcao dos links. Deste modo, o usurio ir saber que os dois links "Ferrari" e "time italiano" apontam para o stio da Ferrari. O alemo Michael Schumacher, da Ferrari, venceu de ponta a ponta o Grande Prmio de Europa, na Alemanha. O brasileiro Rubens Barrichello, tambm do time italiano, ficou Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

com a segunda colocao, enquanto o ingls Jenson Button, completou o pdio. <a href="http://www.ferrari.com" title="Stio da Ferrari">Ferrari</a> <a href="http://www.ferrari.com" title="Stio da Ferrari">time italiano</a>Exemplo 3 Links utilizando "tabindex". Definir a ordem da navegao via tecla "tab". O primeiro link a receber o foco ser o link "Ir para contedo" que contm "tabindex 1" , o segundo foco ser para "Ir para menu" que contm "tabindex 2" e assim por diante. Acessibilidade deste stio. Ir para contedo. Ir para menu. <a href="#" tabindex="3">Acessibilidade deste stio.</a> <a href="#" tabindex="1">Ir para contedo. </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 stio" ser focado. Evitar muitas teclas de atalho, alm de o usurio ter que memorizar muitas teclas, pode haver tecla de atalho que coincida com a tecla de atalho do navegador. Acessibilidade deste stio. Ir para contedo. Ir para menu.

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

<a href="#" accesskey="a">Acessibilidade deste stio.</a> <a href="#" accesskey="c">Ir para contedo. </a> <a href="#" accesskey="m">Ir para menu.</a>

10.2 APRESENTAO, ESTRUTURA E CONTEDO


A acessibilidade em pginas web melhora muito quando projetadas com independncia entre a apresentao, a estrutura e o contedo. Por exemplo, o leitor de tela compreender a pgina de forma ordenada, o navegador textual apresentar a pgina de forma ordenada, assim como quando as pginas so carregadas sem as folhas de estilo. A apresentao refere-se a disposio dos elementos da pgina (layout).

elementos de apresentao so por exemplo "font", "italic", "margin", "color"...

evitar o uso dos elementos de apresentao na marcao HTML/XHTML.

definir os elementos de apresentao atravs de folhas de estilo CSS.

no utilizar elementos estruturais da marcao como recurso de apresentao.

Por exemplo, no usar cabealho <h1> como recurso para aumentar o tamanho de uma palavra que no ttulo. Outro exemplo, no 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 usurio atravs do navegador.

evitar o uso de tabelas para compor a apresentao da pgina. As tabelas so utilizadas para dados tabulares. Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

A estrutura refere-se a organizao lgica da pgina como ttulos, subttulos, pargrafos, etc.

os elementos de estrutura so por exemplo "p", "table", "ul", "li", "h1", "h2", etc.

utilizar marcao apropriada de HTML/XHTML.

O contedo refere-se aos elementos de informao.

os elementos de contedo so por exemplo textos, imagens, sons, vdeo, etc.

utilizar linguagem simples e apropriada. empregar textos de links significativos evitar blocos de textos extensos e erros de ortografia.

Padres web A acessibilidade em pginas web ser muito mais eficaz se estiver de acordo com os padres 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 pginas web esto tambm seguindo os padres. Benefcios

Ao produzir pginas separando apresentao, estrutura e contedo e, seguindo os padres web, resulta-se em muitos benefcios quanto a acessibilidade, indexabilidade, usabilidade, portabilidade.

Benefcios para um maior nmero de usurios, 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 grficos. tecnologia porttil como PDA e celular. Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao


Outros benefcios: manuteno e redesign das pginas mais gil e eficiente. melhores resultados em relao aos mecanismos de busca. maior rapidez ao carregar as pginas menor custo. as pginas estaro tambm preparadas para outras tecnologias que esto por vir.

Tamanho de Fonte: Garantir que o tamanho do texto poder ser aumentado com as opes 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 VERIFICAO DA ACESSIBILIDADE


Fornea uma forma simples de contato com o responsvel pelo website. Nota: O internauta poder comunicar-lhe as dificuldades que sente no acesso aos contedos do seu website. Facilite o feedback dos internautas. Utilize ferramentas e servios automticos de anlise da Acessibilidade. Recomenda-se a utilizao do da Silva, O "da Silva" um avaliador. Um software que detecta um cdigo HTML e faz uma anlise do seu contedo, verificando se est ou no dentro de um conjunto de regras. A anlise 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 so poucas as ferramentas para a criao de contedos web que contemplam a verificao da acessibilidade. O software de desenvolvimento web (webdesign) destinado a Webdesigners o Macromedia Dreamweaver, que na sua ltima verso (8.0), vem com facilidades para a acessibilidade de contedo web. Insira o Selo de Aprovao de Acessibilidade na Web no website.

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

Nota: Utilize o Selo de Aprovao de Acessibilidade na Web para indicar que o website contm funcionalidades de Acessibilidade para Cidados com Necessidades Especiais, para diferentes ambientes, situaes, equipamentos e navegadores. O selo deve incluir a definio ALT="Selo de Aprovao de Acessibilidade ", e ser colocado na pgina de entrada do website. Conscientizao. Coloque-se no lugar do internauta, desta forma, facilmente sero observados os problemas enfrentados na interao do website. Como vimos acima, o cdigo simples e fcil de implementar.

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

11. CONCLUSO
Em um mundo globalizado o mercado de trabalho mais competitivo, e a tecnologia e conhecimento so necessidades bsicas para quem precisa entrar neste mercado. Sim, vivemos na Era da Informao. Agora pensemos, possvel que deficientes tenham as mesmas oportunidades que pessoas sem deficincia em competies em postos de trabalho? Sim. A aptido fsica e sensorial so importantes, mas no essenciais, pois hoje valorizado o indivduo que tenha conhecimento, ou seja, um profissional que tenha habilidades intelectuais. O deficiente visual tem o mesmo potencial intelectual que qualquer indivduo com viso normal. Agora, como possvel que esta afirmao seja verdadeira? Para que um deficiente visual seja habilitado a efetuar tarefas com a mesma qualidade de um indivduo com viso normal, necessrio o trabalho de formao adequada e especial, acessibilidade a informao 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 formao de qualquer indivduo, pois prov INFORMAO gratuita e de qualidade. Muitos deficientes visuais trabalham com informtica, pois no h limitao que no possa ser derrubada na Era da Informao. Na internet possvel navegar utilizando LEITORES DE TELA, LEITORES DE ECR ou similares, o problema que alguns so carssimos, na internet o software livre DOSVOX est disponibilizado gratuitamente. fcil de instalar e de manipular. O trabalho de conscientizao para empresas e desenvolvedores muito difcil, pois h tcnicas especiais para criao de websites acessveis, que aos olhos da empresa um trabalho que no 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? Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

O cidado com deficincia sujeito de direitos e responsabilidades sociais, tanto quanto os demais cidados. A ele devem ser concedidas as mesmas oportunidades de participao social, segundo suas capacidades de desempenho, sem discriminaes. O processo de incluso social da pessoa com deficincia no deve excluir servios especializados de atendimento a esta pessoa, enquanto forem necessrios. Pelo contrrio, os Servios devem ser melhorados, para prestar atendimento cada vez melhor, funcionando como facilitadores de um processo saudvel de incluso.

Trabalho de Concluso de Curso

Acessibilidade na Web para Deficientes Visuais Sistema de Informao

12. BIBLIOGRAFIA

webinsider.uol.com.br - Artigos sobre Tecnologia na Internet www.usabilidoido.com.br - Usabilidade na Internet www.wikipedia.org - Enciclopdia Internacional www.acessobrasil.org.br - Website oficial da Acessibilidade na Internet Usabilidade.net - Especializado em Usabilidade intervox.nce.ufrj.br/dosvox/textos/guido.doc - Universidade Federal do Rio de Janeiro www.serpro.gov.br - Site do Governo Especializado em Acessibilidade na Web www.lerparaver.com - Website sobre Acessibilidade http://www.tableless.com.br/?dando_atencao_para_acessibilidade - artigo sobre Acessibilidade no website Tableless

Trabalho de Concluso de Curso