WebStandards

Sumrio
Acessibilidade.......................................................................................................................................2 1. INTRODUO...........................................................................................................................2 2. O que acessibilidade?................................................................................................................2 3. Cultura e Tecnologia....................................................................................................................2 4. Web, pessoas com deficincia e Tecnologia Assistiva.................................................................3 5. Navegao via teclado.................................................................................................................3 6. Teclas de navegao e teclas de atalho........................................................................................4 7. Acessibilidade e Usabilidade.......................................................................................................4 8. Equivalente textual, o que isto?................................................................................................5 9. Detalhes de equivalncia textual..................................................................................................6 10. Equivalentes no textuais...........................................................................................................7 11. Cores, Daltonismo e Web...........................................................................................................8 12. Epilepsia fotossensvel pode ser provocada na web..................................................................8 13. Linguagem simples e clara para todos.......................................................................................9 14. Tabela da Dados.........................................................................................................................9 15. Contedo, estrutura e apresentao (HTML & CSS)..............................................................10 16. Dispositivos de entrada, dispositivos de sada e acessibilidade...............................................11 17. Uma inacessibilidade muito comum e especial para cegos.....................................................12 18. Mtodos e ferramentas de acessibilidade.................................................................................13 Tableless.............................................................................................................................................14 1. O que tableless?......................................................................................................................14 2. Vamos ao contedo....................................................................................................................14

www.3way.com.br

WebStandards
Acessibilidade
1.INTRODUO
Apresentamos aqui alguns conceitos que permitiro ao leitor entender bem este tema. Abordaremos o prprio conceito de acessibilidade, a juno desta com o que chamamos de usabilidade, o que essas coisas tm a ver com pessoas com deficincia e pessoas sem deficincia, as relaes com desenvolvimento tecnolgico, tecnologias assistivas, softwares amigveis, cultura, juventude, modernidade, incluso e excluso digital, educao, mercado de consumo e trabalho e, finalmente, como o leitor pode se inserir em tudo isso.

2.Oqueacessibilidade?
A primeira vez que nos deparamos com a palavra acessibilidade, pensamos, naturalmente, que ela seja proveniente ou derivada da palavra acesso. Mas, e da? Em geral essa palavra no est sozinha, vem contextualizada de conceitos tcnicos ou prticos, normalmente associados a pessoas com deficincia. Sua aplicao, de fato, teve origem na necessidade da transposio dos obstculos arquitetnicos que impediam e impedem o acesso de pessoas com deficincia a lugares de uso comum e pblico. Mas, ao longo do tempo, o conceito de acessibilidade assumiu dimenso mais ampla. Qualquer tipo de barreira para qualquer pessoa, mesmo sem deficincias ou apenas com limitaes temporrias, passou a ser relacionado acessibilidade. Por exemplo, caladas esburacadas, perigosas para mulheres grvidas que no podem enxergar os ps, ou um site na internet cujo cdigo no permita o acesso por meio de celulares, passaram a ser inacessveis. Uma grvida e um proprietrio de celular com bons recursos no so pessoas reconhecidamente com deficincia, mas podem encontrar inacessibilidades comuns s pessoas com deficincia. Assim, o conceito adquiriu sentido mais amplo. Hoje, na prtica, acessibilidade diz respeito qualidade ou falta de qualidade de vida para todas as pessoas.

3.CulturaeTecnologia
Desde os anos 80, segundo a UNESCO, cresceu o entendimento de que as dificuldades impostas pelos limites de uma deficincia a um indivduo variam segundo a cultura e desenvolvimento tecnolgico de cada pas ou regio. No so apenas o tipo e o grau de deficincia sensorial, cognitiva ou fsica que determinam a limitao de uma pessoa; o ambiente no qual se insere tambm pode fazer com que fique mais ou menos limitada. Aplicando-se essa idia s pginas da web, podemos entender como a tecnologia tanto pode, quando bem utilizada, contribuir para maior qualidade de vida para inmeras pessoas, como a se constituir, se for mal empregada, numa grande fonte de frustrao. Se as pessoas com deficincia visual ou dificuldades motoras que no utilizam mouses, por exemplo, pudessem navegar pela internet e fossem a agncias bancrias on-line realizar transaes financeiras sem sair de casa; se lojas virtuais de vendas e supermercados tivessem sites com um acesso fcil e possvel a esses internautas, evitando uma locomoo desnecessria na hora de comprar um livro para um amigo ou um CD de msica para escutar; se tal tecnologia permitisse a leitura, na internet, do jornal preferido por elas; se pudessem estudar e se divertir; se, enfim, conseguissem utilizar de todas as facilidades que a internet, especialmente a web, oferece maioria de seus usurios, essas pessoas estariam cada vez menos limitadas. A tecnologia da web no seria mais uma barreira a ser transposta mas, ao contrrio, um

www.3way.com.br

WebStandards
veculo de transposio de barreiras e melhora da qualidade de vida. A legislao, sobretudo por meio da Lei n. 8.112/90, de reserva de mercado, abriu as portas das empresas e do mercado para as pessoas com deficincia. Geram-se empregos e salrios e, conseqentemente, relacionamento social, econmico e maior participao poltica, permitindo a incluso de um nmero cada vez maior de pessoas nas atividades comuns de toda a sociedade. Para isso, cultura inclusiva e tecnologia tm de estar juntas, oferecendo novos espaos, como esse espao quase infinito que a web.

4.Web,pessoascomdeficinciaeTecnologiaAssistiva
Acessibilidade nas pginas da Web significa, antes de mais nada, termos um acesso regular a essas pginas. Dependemos, ento, para comear, do prprio computador que utilizamos, seus perifricos, como mouse, teclado, monitor, udio etc. Alm disso, de programas como navegadores (Internet Explorer, Firefox, Opera e outros) e tecnologias assistivas. Tecnologia Assistiva qualquer tipo de tecnologia especificamente concebida para ajudar pessoas com incapacidades ou deficincia a executarem atividades do cotidiano. A tecnologia assistiva abrange as cadeiras de rodas, as mquinas de leitura, prteses, etc. No domnio da acessibilidade da web, tecnologias assistivas para a navegao na web so hardwares, perifricos e programas especiais que permitem, ou simplesmente facilitam, o acesso de pessoas com deficincia internet. Entre eles podemos citar os leitores de tela, sintetizadores de voz, ampliadores de tela, para pessoas cegas ou de baixa viso; programas de comando de voz para cegos e pessoas com dificuldades na digitao; teclados e mouses especiais, controlados por um joystick ou pelos movimentos da cabea, por exemplo, para pessoas com dificuldades motoras, etc. O desenvolvimento da tecnologia possibilita que cada vez mais pessoas estejam capacitadas para acessar a internet e as novidades nesse campo so permanentes.

5.Navegaoviateclado
Se pensarmos em acessibilidade nas pginas da web para pessoas com deficincia, somos obrigados a refletir no modo de navegao, que podemos dividir em trs: navegao via mouse, navegao via teclado e navegao por comando de voz. A maioria das pessoas navegam via mouse e s se utilizam do teclado para preencherem formulrios, fazerem pesquisas, escrever e-mails etc. No entanto, a maior parte das pessoas com deficincia que necessitam de acessibilidade, usam o teclado para a navegao na internet. Uma pessoa cega, ou de baixa viso, no tem como posicionar o cursor, movido pelo mouse, nos links, cones, formulrios etc. das diversas pginas. Outras pessoas com deficincia, que tm comprometimento da coordenao motora nas mos, a ponto de no conseguirem posicionar mouses para clicar, mas que possuem coordenao suficiente para teclar em teclados comuns ou mesmo com teclas de dimenses maiores, e pessoas que se utilizam de tecnologias assistivas especficas para uso do teclado, navegam atravs deste sem a utilizao do mouse. Assim, um site que, alm de sua navegao via mouse, permita uma boa navegao via teclado, possibilita sua utilizao por um nmero muito maior de indivduos.

www.3way.com.br

WebStandards
6.Teclasdenavegaoeteclasdeatalho
Como se navega pelo teclado? Esta a pergunta que os usurios de mouses, em geral, se fazem. Para podermos navegar via teclado, a princpio, no existe a dependncia de qualquer programa especial. Os prprios navegadores permitem que, atravs de teclas de navegao prprias, se possa cumprir inmeras funes que, normalmente, so realizadas atravs do mouse. Assim, por exemplo, podemos sair de um navegador clicando, com o mouse, um "x" na parte superior direita da tela, como tambm indo no menu "fechar" do navegador. No entanto, podemos fazer o mesmo atravs do conjunto das teclas alt e f4, quando tecladas simultaneamente. Ao se pressionar o alt e logo o f4, o programa fecha. Da mesma forma, boa parte das outras funes do navegador que so realizadas pelo mouse, possui algum simultneo que possa ser realizado pelo teclado. Quando pensamos em acessibilidade, podemos acrescentar s teclas de navegao do navegador, outras existentes em alguma tecnologia assistiva, como um leitor de telas, e ainda, teclas de atalho programadas em uma pgina da web por seu desenvolvedor. O desenvolvimento de recursos de acessibilidade em uma pgina web muito importante. As pessoas com deficincia, ao dependerem da acessibilidade dos navegadores e dos sistemas operacionais, podem ter dificuldades quando esses, nas trocas de verses, no as trouxerem com os mesmos recursos ou eles no lhes forem acessveis, quando estiverem longe de seus micros e os que forem utilizar estiverem com outras configuraes, ou mesmo se os navegadores e sistemas operacionais no possurem, originalmente, os recursos que necessitam. Assim, as pginas consideradas acessveis so aquelas que trazem a acessibilidade em si mesmas, que no dependam de onde e como esto sendo expostas.

7.AcessibilidadeeUsabilidade
Existem formas de se criar teclas de navegao e atalho pelo desenvolvedor nas pginas da web. Quando pensamos em fazer acessibilidade estamos querendo adaptar os sites para alm das possibilidades j existentes nos navegadores comuns, como tambm superar barreiras de acesso criadas por funcionalidades programveis que, estando fora dos padres web, se tornem incompatveis com tecnologias assistivas e o bom uso da navegao via teclado ou por voz. Por outro lado, algumas vezes, mesmo estando acessveis as informaes ou funcionalidades programadas pelo desenvolvedor, essas no possuem um acesso fcil, gastando-se tempo para entend-las em sua utilizao ou mesmo para se chegar a elas. Por exemplo: um usurio com tetraplegia e que faz uso da navegao via teclado, quer preencher um formulrio de cadastro. Esse formulrio encontra-se aps o trigsimo segundo hiperlink da pgina e, no entanto, na parte central da mesma, bem visvel a seus olhos. Para podermos entender sua dificuldade, temos de conhecer a lgica da navegao via teclado. Quem utiliza um mouse pode chegar com tranqilidade ao formulrio se posicionando diretamente na edio das respostas do mesmo, mas quem utiliza apenas o teclado, tem, nesse caso, de pressionar a tecla TAB 32 vezes para chegar ao formulrio. Nesse tipo de recurso, a navegao seqencial, da esquerda para a direita e de cima para baixo. Mesmo que esses hiperlinks estejam distribudos visualmente de forma harmnica pela pgina, se sua codificao for anterior ao formulrio, este s se apresentar disponvel ao usurio que navegue pelo teclado, depois de, seqencialmente, passar por todos os hiperlinks e a forma de faz-lo , como foi escrito, pressionando a tecla "TAB" 32 vezes. O formulrio pode estar acessvel, mas sua utilizao cansativa para tal pessoa. Dizemos, nesse caso, que a usabilidade dessa pgina no boa, independentemente de sua acessibilidade.

www.3way.com.br

WebStandards
Todas as pginas que possuem menus padronizados em um site, para serem alm de acessveis, terem uma boa usabilidade, tm de possuir teclas de atalho que permitam o salto para o contedo principal da pgina. Essas teclas de atalho podem ser colocadas pelo desenvolvedor sem prejuzo de qualquer outro contedo.

8.Equivalentetextual,oqueisto?
Todas as informaes de uma pgina acessvel devem ser apresentadas em texto. Isso significa que, se for usada alguma outra mdia, como imagens e sons, as informaes que elas contm devem ser repetidas numa descrio textual. Essa descrio deve ser "equivalente", isto , deve transmitir as mesmas informaes que os elementos disponibilizados. No devemos confundir a equivalncia textual com a confeco de uma pgina somente texto, o que deixaria um site visualmente pobre, pginas esteticamente ruins no tm a ver com acessibilidade. A inteno, quando se diz que as informaes devem estar disponveis em texto, a de uma informao redundante em texto quando da existncia de outros elementos, como imagens e sons. Esse modo de informao se deve necessidade que um leitor de tela (software de leitura para pessoas com deficincia visual e surdocegueira) tem para transmitir as informaes, uma vez que no consegue ler nada alm de textos. Criar duas verses do site, uma grfica e outra somente texto para pessoas com deficincia visual, alm de ir contra a prtica de uma nica verso acessvel a todos no chamado desenho universal, pode ocasionar erros como, na pressa, atualizar-se a pgina na verso grfica e deixar a verso texto desatualizada por esquecimento. Alm disso, pessoas que enxergam, mas que por qualquer motivo necessitam de uma navegao via teclado de bom nvel, seriam obrigadas a utilizar pginas que no foram pensadas para elas. Podemos dizer que os exemplos mais comuns de elementos no textuais so imagens de figuras, fotografias, botes, animaes, linhas horizontais separadoras, mapas, filmes e sons. Letras e textos artisticamente planejados, desenhados na imagem, usados para ttulos, cabealhos ou logos de empresas no so texto. Texto significa somente o que chamado de "texto real", digitado no teclado. Esses elementos no textuais podem ser tranqilamente utilizados numa pgina acessvel, apenas devemos usar equivalentes textuais para dar oportunidade de todos os usurios perceb-los. Funcionalidades feitas em objetos programveis, como scripts e applets, so outro tipo de elemento no textual. So partes de uma funcionalidade escrita em linguagens outras que no HTML, para criar um comportamento dinmico ou iterativo, como os escritos Java ou Macromedia Flash. Esses elementos, no entanto, possuem uma dificuldade toda especial em se fazer acessibilidade, embora sempre seja necessria a tentativa de faz-la e o WCAG 1.0 tenta ajudar nisso tambm. Sons incluem fala, sinais de udio, sons de alerta, narrativas e trilhas de udio em vdeo. Nem todos os usurios podem acessar ou utilizar esses elementos diretamente, especialmente surdos e pessoas com deficincia auditiva, e, assim, necessitam tambm que a informao ou funcionalidade seja fornecida de outra forma, ou seja, no formato texto ou visual. De qualquer maneira, o equivalente textual tem a funo de traduzir em texto, em linguagem clara e simples, a imagem ou som, especialmente se ele possui uma funcionalidade. O texto alternativo, para a maioria das imagens, pode ser colocado no cdigo da pgina

www.3way.com.br

WebStandards
atravs de marcaes e fica "transparente" na tela para quem enxerga, apenas sendo "captado" pelos leitores de tela que passam pelas imagens e os procuram no cdigo. Alguns navegadores, quando apontamos o cursor na imagem com o mouse, mostram a existncia do equivalente textual abrindo uma janela com seu texto, ou mesmo quando a imagem ainda no surgiu no momento de carregar a pgina, essa janela com o texto alternativo aparece em seu lugar. Outra forma de percebermos a existncia, ou falta, dos equivalentes textuais numa pgina, desativando as imagens nas configuraes do navegador. Se os equivalentes estiverem l, seus textos aparecero no lugar das imagens. Assim, esse recurso s existe ocasionalmente para a maioria dos usurios da web, mas surgem efetivamente para aqueles que se utilizam dos leitores de tela.

Imagem do Chaplin sem e com equivalncia textual

9.Detalhesdeequivalnciatextual
Os equivalentes textuais so implementados atravs de tcnicas que podem ser encontradas nas diretrizes internacionais, e so um acrscimo acessibilidade que se faz para termos uma boa navegao via teclado, sendo fundamentais para alguns grupos de pessoas com deficincia, nomeadamente cegos, surdos e surdocegos. Podemos chamar a ateno para alguns detalhes ao utiliz-los:

Os equivalentes textuais utilizados em elementos simples, como em imagens de figuras, botes e menus grficos, devem fazer pequenas descries da funo da imagem, ou mesmo uma simples repetio do que est sendo escrito em desenho de letra na imagem. Assim, se numa imagem estiver escrito, com letras desenhadas "Fale Conosco", esse o contedo que deve ser digitado no texto alternativo. Se a imagem for apenas decorativa, do tipo uma linha separadora, a equivalncia textual deve existir nula em contedo, com espao vazio, para que a pessoa cega no tenha de ouvir mais que o necessrio para entender o contedo da pgina. Imagine que um ttulo seja enquadrado por 4 pequenas imagens decorativas e que, em cada uma delas exista uma equivalncia textual; poderamos atravs de um sintetizador de voz acoplado a um leitor de tela, escutarmos o seguinte trecho: "imagem superior esquerda, imagem superior direita, Nossa Empresa foi feita para voc, imagem inferior esquerda, imagem inferior direita. Imagem superior esquerda, imagem superior direita, Temos tudo que voc quer e precisa, imagem inferior esquerda, imagem inferior direita"... Da mesma forma, se na imagem houver o desenho de um telefone com o nmero do

www.3way.com.br

WebStandards
telefone da empresa, no necessrio que na equivalncia haja a descrio do telefone, sua cor, sua forma e outros detalhes inteis, e sim cumprir a funo proposta pela imagem, ou seja, a informao: "Tel.: (21) 2222-2222", que seria, supostamente, o nmero do telefone da empresa. De forma semelhante, se o logo da empresa proprietria da pgina s tiver a funo de anunciar a empresa, o equivalente dever ser somente um ttulo do tipo "Logo da xxx", em que xxx o nome da empresa, sem a descrio visual do logo. Se, nesse mesmo exemplo, o logo da empresa tiver a funo de um hiperlink que leva para a pgina principal, nas pginas internas do site deve estar "Voltar pgina principal" ou outro texto que traduza a funo do logo. Quando uma pequena descrio no suficiente para a compreenso de todo contedo existente na imagem, por exemplo, se a imagem mostra a populao de cada capital brasileira. A imagem, assim, dever ter um equivalente com um pequeno texto do tipo: "Populao das capitais brasileiras". Como complemento deve-se fazer uma pgina em html com todas as capitais e suas respectivas populaes, que poder ser acessada atravs da prpria imagem, ou por tcnicas no perceptveis pelos usurios que no naveguem via teclado, por um hiperlink com uma imagem transparente, por exemplo. Isso porque somente pessoas com deficincia visual necessitam desse tipo de acessibilidade, pois atravs da imagem no podero chegar informao.

Os equivalentes textuais tambm so fundamentais para pessoas surdas, s que, ao invs de descreverem imagens, devero descrever sons. Se existirem sonorizaes na pgina, como sinais de alarme ao se fazer uma tarefa de forma errada, mensagens sonoras, vdeos com informaes orais, estas devem estar redundantes em texto, para que a pessoa surda ou com uma deficincia auditiva severa possa absorver o contedo transmitido pela sonorizao. Nesse caso, a lngua gestual tambm pode ser importante.

10.Equivalentesnotextuais
Da mesma maneira que existem equivalentes textuais para sons e imagens, existem tambm os equivalentes no textuais para os mesmos elementos, alm do equivalente no textual para o prprio texto. WCAG 1.0: "Os equivalentes no textuais de texto, como o discurso pr-gravado ou um vdeo de uma pessoa traduzindo o texto para lngua gestual, podem tornar as pginas web acessveis a pessoas que tenham dificuldade em acessar a texto escrito, entre elas as que tenham deficincias cognitivas, dificuldades de aprendizagem ou surdez1". Da mesma forma, os equivalentes no textuais de texto podem tambm ser teis a pessoas que no lem, como as pessoas analfabetas. O exemplo de um equivalente no textual de informaes visuais a descrio sonora. A descrio falada de uma passagem visual de uma apresentao multimdia, beneficia quem no consegue ver as informaes visuais de um vdeo, como as pessoas cegas, da mesma forma que um equivalente textual, como as legendas, ou um no textual, como a traduo em lngua gestual, possibilitam o entendimento da informao pelo surdo. Pode-se fazer testes para validar a descrio sonora e a prpria informao visual. Se desligando o monitor a descrio sonora do vdeo passar todas as informaes anteriormente entendidas e, se ao desligar o som das caixas a informao visual tambm for completa, esta mdia estar muito boa.

www.3way.com.br

WebStandards
11.Cores,DaltonismoeWeb
O WCAG 1.0, em seu item 2.1, sugere: "Assegure-se de que todas as informaes fornecidas com cor estejam tambm disponveis sem cor...1" A cor pode ser til para fornecer informaes, mas no se deve basear nela como a nica maneira de comunicar um significado. importante mais do que somente a cor para informar, deve-se utilizar outros meios. Para as "Diretrizes Irlandesas de Acessibilidade"2, que possui fundamentaes e explicaes tcnicas para deixarem mais didticas as diretrizes do WCAG 1.0, as informaes baseadas na cor tm tambm a seguinte fundamentao: "Nem todas as pessoas percebem facilmente as diferenas de cor, podendo ter dificuldades para entender as informaes que so transmitidas somente atravs delas. Por exemplo: imagine dois botes em uma tela, ambos idnticos em termos de tamanho e forma. Um verde, o outro vermelho. O clique no boto vermelho pode causar dano ao computador do usurio. Se o usurio no puder distinguir entre as cores e no houver textos equivalentes nos botes, ele no tem como fazer a escolha certa. Os usurios tm dificuldade de perceber as cores se eles trabalham com monitores de baixa qualidade , monocromticos ou se so daltnicos. Do mesmo modo, difcil ler um texto sobre um fundo cuja cor seja muito prxima, ou sem contraste com a cor do texto. Algumas combinaes de cores, tal como um texto vermelho sobre fundo verde, tambm so difceis de diferenciar. No confie somente na cor para transmitir o significado. Escreva, por exemplo, 'Os botes desta pgina web baseiam-se na capacidade do usurio distinguir entre o vermelho e o verde'". Existem inmeros exemplos de inacessibilidades baseadas nas informaes transmitidas somente por cores. Por vezes, a prpria incidncia de luz na tela pode alterar as cores originais, assim como a qualidade da placa de vdeo, culos inadequados, distncia entre a tela e o usurio etc. A diferena de contraste entre as cores de primeiro plano e de fundo, nas imagens, e entre texto e cor do fundo da tela, deve ser suficiente para que os usurios percebam corretamente as imagens e textos, inclusive os usurios que tiverem deficincias cromticas de viso, com vista cansada ou que usem uma tela em preto e branco.

12.Epilepsiafotossensvelpodeserprovocadanaweb
possvel fazer com que a tela trema inserindo comandos no cdigo de uma pgina web, normalmente para criar um efeito visual. Segundo as Diretrizes Irlandesas: "Nem sempre possvel que o usurio controle a taxa na qual a tela treme. Enquanto o usurio no tiver esse controle, no devem ser criados efeitos de tremidos. Isso se deve porque difcil concentrar-se em uma tela tremendo. Uma tela que treme tambm pode provocar ataques epilticos. Pessoas com epilepsia fotossensvel podem ter ataques provocados por tremidos ou flashes na faixa de 2 a 60 flashes por segundo (Hertz), com um pico de sensibilidade em 20 flashes por segundo, bem como por mudanas bruscas de escuro para claro (como nas luzes estroboscpicas)." " difcil ler contedo que esteja aparecendo e desaparecendo, ou ler contedo quando alguma outra coisa na pgina estiver apresentando luz intensa. A intermitncia causa

www.3way.com.br

WebStandards
particular desvio de ateno tambm em usurios que tenham capacidade limitada de leitura ou dificuldade de concentrao, devido a rudo, stress, ou problema de aprendizado." Sendo assim, deve-se assegurar que a tela trema dentro de uma faixa de segurana e no a alterar bruscamente de escuro para claro. Se isso no acontecer, criar mecanismos de congelamento desses tremidos e mudanas bruscas de cor. Isso vai alm das questes de acesso, para ser uma questo de segurana e sade para alguns usurios.

13.Linguagemsimpleseclaraparatodos
A simplicidade e clareza da redao, cabealhos e textos dos links, que sendo objetivos, sem ambigidades e corretamente escritos levem a um rpido entendimento do contedo da pgina, fator fundamental de acessibilidade em qualquer site, mesmo os especializados em matrias tcnicas. Para isso sempre bom que se faa uma boa reviso do texto, que se coloque um bom ttulo nele, que se divida o mesmo em pargrafos afins, utilizando cabealhos que definam o que vem a seguir. Se necessrio, no caso de haver palavras pouco utilizadas, especficas de determinada matria, criar um glossrio de fcil acesso, para que a linguagem do texto seja entendida pelo maior nmero de pessoas possvel. Verificar a pontuao e utilizar um corretor ortogrfico so medidas importantes, pois os sintetizadores de voz reproduzem exatamente o que um leitor de tela l. Assim, um texto mal escrito ortograficamente, com abreviaturas do tipo qdo (quando), palavras acentuadas de forma incorreta, e coisas do gnero, pode deixar um usurio sem entender o texto, ou tendo de parar a leitura corrente para voltar a trechos no entendidos pelos quais acabaram de passar. Os sintetizadores de voz so a voz do leitor de tela, e a maioria deles identifica a pontuao atravs de pausas, de silncios na "voz", por alguns deles quase imperceptveis. Assim um ponto tem um tempo de silncio at que se leia a prxima palavra, um tempo menor para a vrgula e tempos mais fracionados ainda para dois pontos e ponto e vrgula. A exclamao e a interrogao tm sonoridades semelhantes ao que representam, tanto quanto a reticncias. A tecnologia anda to avanada nesse aspecto, que alguns sintetizadores reproduzem fantasticamente a voz humana.

14.TabeladaDados
As tabelas de dados servem para organizar informaes mediante intersees entre linhas e colunas. Assim, por exemplo, se seguirmos as colunas at uma determinada linha correspondente, conseguimos encontrar os dados procurados. No entanto, se estivermos utilizando um leitor de telas, talvez nossa pesquisa no seja to fcil assim. Vamos nos utilizar de uma tabela de dados simples como exemplo. Imaginemos que estamos organizando os dados da quantidade de pessoas que visitaram determinado site da internet, a cada ms e dia do ano. Poderamos ter os 12 meses nas colunas horizontais, de janeiro a dezembro, e os dias nas linhas verticais, de 1 a 31. O leitor de telas procura os dados linha a linha e, portanto, se o nmero de colunas for grande, pode confundir seu usurio. Vamos supor que ele queira saber quantas pessoas entraram em seu site no dia 15 de setembro. Passando a linha horizontal dos meses do ano, a prxima linha seria o dia 1. Ele correria, dependendo do tipo de tabela, at o dia 15, quando

www.3way.com.br

WebStandards
escutaria o 15 do dia e as 12 informaes subseqentes de cada ms, ms a ms, ou todos os meses de uma s vez. Ou seja, faria uma leitura linear do dia 15 e teria de contar mentalmente quantos resultados passaram at chegar o que deseja, no caso, o do ms em questo, setembro, que seria o nono resultado aps a leitura do dia. O usurio escutaria algo mais ou menos assim: 15 353 381 402 324 397 299 306 332 411 391 392 305 enquanto que, se acessvel, esta tabela reproduziria: 1 setembro 353, 2 setembro 381... at 15 setembro 411, bastando que, com as teclas de atalho, posicionasse sua audio no dia 15 e fosse pressionando nove vezes at chegar no ms 9 (setembro). Algumas tabelas de dados, como as estatsticas do IBGE, que j no so muito fceis de serem interpretadas pela maioria das pessoas que enxergam, so impossveis para usurios de leitores de telas se no forem feitas acessveis. Para alm das coordenadas a serem encontradas numa tabela, esses usurios ainda tm de entender, pela leitura dos cabealhos, o que significam inmeras abreviaturas que no tm explicao imediata, e se eles esto procurando exatamente aqueles tipos de dados. Tambm existe acessibilidade para isso, atravs de marcaes em html que fazem o leitor de tela ler por extenso o que est abreviado, ajudando, alm disso, as pessoas que no utilizam tais auxlios, pois se passando o mouse na abreviatura, assim como nos equivalentes textuais j mencionados, dependendo do navegador utilizado, abre uma janela com a abreviatura ou acrnimo estendido.

15.Contedo,estruturaeapresentao(HTML&CSS)
O WAI, Web Accessibility Initiative, departamento do W3C, responsvel pelo WCAG, documento de diretrizes de acessibilidade para a web, recomenda que, para se ter um acesso rpido s pginas da internet, deve-se desenvolv-las separando contedo e estrutura da apresentao. O contedo o principal agente de informao; constitudo do texto, formulrios, listas de itens, pargrafos, hiperlinks etc., formando juntos a estrutura da pgina. As tcnicas sugeridas pelo WCAG3 seguem, naturalmente, os padres web, e so em html, que uma codificao de marcaes. A apresentao de uma pgina o tamanho, forma e cores do texto, do fundo da pgina, das bordas de imagens e tudo aquilo que faa parte do estilo visual do site. A recomendao que essa apresentao seja feita em CSS (Cascading Style Sheets). A linguagem HTML limitada quando se trata de aplicar a apresentao a uma pgina. Isto porque trata-se de uma linguagem que foi concebida para usos mais especficos que os atuais. Para solucionar este problema, os desenvolvedores de pginas comearam a utilizar tcnicas, tais como o uso de tabelas para formatar o layout das pginas, imagens transparentes como espaadoras de largura e altura de clulas de tabelas, codificaes que no so padres do HTML e outras, que degradam a acessibilidade e velocidade no momento de sua utilizao pelo usurio. O funcionamento das CSS consiste em definir, mediante uma sintaxe especial, a apresentao que os desenvolvedores de sites podem aplicar um site inteiro, considerando-o em todas as suas pginas, uma pgina em especial, ou mesmo a um pedao de pgina. Na apresentao feita pelo CSS, reconhecemos inmeros recursos j conhecidos do html, s que muito mais amplos e rpidos. A potncia da tecnologia muito maior:

www.3way.com.br

WebStandards

Pode-se definir, por exemplo, vrios tipos de pargrafos: em vermelho, em azul, com margens, sem margens, com letras grandes, mdias ou pequenas... Pode-se definir a distncia entre as linhas do texto; Pode-se aplicar recuo s primeiras linhas do pargrafo; Pode-se colocar elementos na pgina com maior preciso, e sem lugar para erros; Possibilita definir a visibilidade dos elementos, margens, sublinhados, riscados, etc...

A principal razo para o desenvolvimento desta tecnologia, foi a de que as pginas web tm misturado em seu cdigo HTML o contedo da pgina com a codificao necessria para lhe dar estilo, ou seja, fazer a apresentao visual. Assim, a recomendao sugerida no WCAG 1.0 exatamente a separao do contedo e estrutura da apresentao, em espaos diferentes, que possam ser unidos na visualizao da pgina na hora de ser carregada. No momento em que entramos em uma pgina, o contedo se "veste" de sua apresentao, ou seja, o html se "veste" de CSS. Navegadores somente texto, como o Lynx e Webvox, para pessoas com deficincia visual, no chamam nunca a "apresentao", apenas o "contedo" e, assim, para esses, a navegao muito rpida. A exemplo desses navegadores somente texto, a idia do WCAG 1.0 a de que, um navegador grfico seria quase to rpido quanto um somente texto, utilizando-se folhas de estilo (CSS) e contedo separados, para qualquer navegador, como para qualquer auxlio tcnico, pois o cdigo do contedo e estrutura a ser carregado seria mais simples e menor, enquanto o cdigo da apresentao, apesar de ter mais recursos tcnicos, seria muito mais rpido. Essa tcnica excelente para conexes lentas, como as discadas, sem banda larga e para usurios com baixa viso, pois podem ter suas folhas de estilo particulares, com letras ampliadas e de cores diferentes, ajudando-os na visualizao da pgina (mesmo que no fique to bonita como o designer idealizou). As folhas de estilo trazem uma acessibilidade importante para alguns usurios que necessitam mudar a apresentao, e para todos que gostam de uma navegao rpida e eficiente.

16.Dispositivosdeentrada,dispositivosdesadaeacessibilidade.
Dispositivos de entrada so os dispositivos atravs dos quais entram informaes que so trabalhadas por programas, eventos, ou mesmo apenas formulrios, envio de e-mails, etc., existentes no site e que sero utilizadas pelo o usurio, ou apenas tarefas comuns como acionamento de links, lista de opes etc. Esses dispositivos podem ser o mouse, o teclado e o comando de voz. Os dispositivos de sada so os receptores dessas tarefas. Podem ser, por exemplo, a tela do monitor, as sadas de som, Braille, etc. Alguns eventos produzem efeitos puramente visuais, "enquanto outros so usados para completar tarefas crticas, tais como submisso de contedos de formulrios, concluso de clculos ou envio de mensagens. Eventos fundamentais para completar tarefas devem sempre ser independentes do dispositivo de entrada."2 As "diretrizes Irlandesas de Acessibilidade" observam que: "as interfaces que no oferecem flexibilidade no tipo de dispositivo em que o usurio deve confiar para dar entrada em informaes ou receber sadas, so inerentemente inacessveis. Os usurios de laptops talvez prefiram trabalhar sem o mouse e com o teclado. Nesse caso, se os recursos do site exigirem um recurso do tipo "arraste e solte" como nico meio de interagir, sua utilizao no ser possvel." (...) isso (...)no est restrito somente entrada de informaes. importante tambm oferecer sadas independentes do dispositivo. Os usurios de leitores de tela podem abrir um menu,

www.3way.com.br

WebStandards
mas se no receberem feedback sobre os nomes dos links que esto selecionando, o menu no ter utilidade." Essa observao se ajusta exatamente aos menus programados para que, ao serem apontados atravs do mouse, haja a abertura de uma janela onde aparecem inmeros links de navegao, e ao ser retirado o ponteiro do mouse desses menus, essa janela com links desaparea. Essas janelas, no entanto, no so iguais as que aparecem nos textos alternativos para mostrarem os equivalentes textuais, pois so preparadas atravs de programas feitos por desenvolvedores e com seus cdigos fechados aos dispositivos de entrada, como o teclado, e os de sada, como sintetizadores de voz. Esse tipo de recurso utilizado para o maior aproveitamento possvel do espao na tela, porm, totalmente dependente do mouse. Por exemplo: vamos supor que um governo esteja apresentando suas vrias secretarias. Quando, com o mouse, o usurio passa seu ponteiro sobre o item educao, abre-se uma janela com inmeros submenus como: "secretaria, escolas, bibliotecas, ano letivo, novas matrculas, corpo docente, eventos", sem, no entanto, entrar em uma outra pgina. Assim, s aparecem esses novos submenus (links) desse menu quando apontados com o mouse, dificultando, ou mesmo eliminando, os usurios de outros dispositivos, como o teclado, do uso desses links.

17.Umainacessibilidademuitocomumeespecialparacegos
A partir de um determinado momento, e por motivo de segurana, inmeros aplicativos em sites comearam a possuir senhas numricas e alfanumricas em imagens para que fossem repetidas pelo usurio atravs do teclado. Isso impede completamente o acesso de pessoas com deficincia visual a esses aplicativos. Essas pessoas sem poderem ver as imagens e sem que essas imagens tenham equivalncia textual, pois softwares inteligentes conseguiriam ler esses textos e coloc-los no campo de edio, onde deveria ser digitada a senha, ficam sem poder entrar em diversas sees dos sites, como as de bancos on line, por exemplo. Isso acabou por se tornar uma grande barreira de acesso em diversas partes da web, deixando as pessoas cegas fora de servios essenciais para elas. Uma das formas de solucionar esse grande problema, se fazer perguntas bsicas e de dificuldade mnima, a ser escolhida pelo prprio usurio. Por exemplo: qual o primeiro ms do ano? Qual o ms que se costuma comemorar o Natal? Nenhum software consegue responder perguntas, ainda mais quando so periodicamente trocadas. Alm disso, claro, em lugares de maior segurana, como nas contas bancrias, somente o dono da conta conhece sua senha pessoal, que pode e sempre colocada por via do teclado. Outra possibilidade a de ser repetida a senha que est na imagem por voz, contanto que seja devagar e com poucos caracteres, para que a pessoa cega possa digitar as letras e nmeros "falados" sem se perderem pelo caminho.

18.Mtodoseferramentasdeacessibilidade
"A validao da acessibilidade deve ser feita por meio de ferramentas automticas e da reviso direta. Os mtodos automticos so geralmente rpidos, mas no so capazes de identificar todas as vertentes da acessibilidade. A avaliao humana pode ajudar a garantir a clareza da linguagem e a facilidade da navegao" 1. Deve-se comear por utilizar mtodos de validao automticos nas fases iniciais do desenvolvimento. Assim, as questes de acessibilidade identificadas anteriormente sero mais fceis de evitar ou corrigir.

www.3way.com.br

WebStandards
Os importantes mtodos de validao que se seguem so abordados com mais profundidade na seo de validao do documento de tcnicas do WCAG 1.04 e so: 1. Utilizar uma ferramenta de acessibilidade automatizada. Note-se que as ferramentas automticas no incidem sobre todas as questes da acessibilidade, como seja a clareza de um texto, a aplicabilidade de um equivalente textual, etc. (Ler bloco abaixo). 2. Validar a sintaxe (por ex., HTML, XML, etc., em: validador HTML do W3C http://validator.w3.org Essa validao do cdigo importa em que sua interpretao pelo navegador seja mais rpida e eficiente, j que estar em contato com um cdigo totalmente correto; 3. Validar as folhas de estilo (por ex., CSS, valide em: Validador Css do W3C http://jigsaw.w3.org/css-validator/ Pelo mesmo motivo que se deve validar o cdigo do html, se deve fazer o mesmo com o do CSS. 4. Utilizar um navegador s de texto (Lynx ou Webvox) ou um emulador; 5. para se averiguar se o contedo est completo, Utilizar vrios navegadores grficos na verificao do contedo, com: 1. o som e os grficos ativos; 2. sem grficos; 3. sem som; 4. sem mouse; 5. sem carregar frames, programas interpretveis, folhas de estilo ou applets. 6. Utilizar vrios navegadores, antigos e recentes, para verificar a consistncia dos dados entre eles; 7. Utilizar um navegador de emisso automtica de fala, um leitor de tela, software de ampliao de tela, uma tela de pequenas dimenses, etc. Este item difcil de ser realizado, mas importantssimo para uma pgina realmente acessvel; 8. Utilizar corretores ortogrficos e gramaticais. Uma pessoa que, para ler uma pgina, se sirva de um sintetizador de voz, pode no ser capaz de decifrar a melhor aproximao do sintetizador a uma palavra que contm um erro de ortografia. A eliminao dos problemas gramaticais aumenta o grau de compreenso da pgina. 9. Rever o documento, verificando-lhe a clareza e a simplicidade. O melhor pedir a um revisor literrio experiente que reveja o contedo escrito e avalie a clareza da redao; 10.Pea a pessoas com deficincias que revejam os documentos. Estes usurios , com ou sem experincia, so uma fonte inestimvel de informaes sobre o estado dos documentos, no que diz respeito ao seu grau de acessibilidade e de facilidade de utilizao.

www.3way.com.br

WebStandards
Tableless
1.Oquetableless?
Na verdade, no existe nenhuma tecnologia chamada Tableless. Esse um nome de "marketing". O que chamamos de Tableless uma filosofia de desenvolvimento client-side que prega a abordagem do HTML em seu significado semntico. Ou seja, as tags HTML passam a ser usadas para aquilo para o que foram originalmente designadas. Logo, se voc quer fazer uma lista numerada, vai usar a tag <ol>, se deseja fazer um pargrafo, vai usar a tag <p>, e se vai exibir dados tabulados, como numa tabela peridica ou num calendrio, vai usar a tag <table>. Ocorre que um vcio de grande parte do desenvolvedores hoje, munidos de seus poderosos editores WYSIWYG, construir seus layouts usando tabelas, que no a tag semanticamente correta para construo de layouts. Por conta disso comearam a chamar o desenvolvimento semanticamente coerente de "Tableless". O desenvolvimento Tableless usa como ferramentas as linguagens HTML e CSS.

2.Vamosaocontedo
Cdigo no modo antigo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <table width="750" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="200">Coluna 1</td> <td width="350">Coluna 2</td> <td width="200">Coluna 3</td> </tr> </table> </body> </html> Cdigo no modo Tableless: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Tableless Nivel 1</title> </head> <body>

www.3way.com.br

WebStandards
<!-- canto esquerdo --> <div id="esquerdo">Coluna 1</div> <!-- fim canto esquerdo --> <!-- canto direito --> <div id="direito">Coluna 3</div> <!-- fim canto direito --> <!-- centro --> <div id="meio">Coluna 2</div> <!-- fim centro --> </body> </html> Outras opes:

http://www.gophp.com.br/palestras http://www.gophp.com.br/palestras/global.css

www.3way.com.br