Tc3a9cnicas de Acessibilidade Web Jalves Nicc3a1cio

Tcnicas de Acessibilidade
Criando uma web para todos
Jalves Mendona Niccio
UNIVERSIDADE FEDERAL DE ALAGOAS Reitora Ana Dayse Rezende Dorea Vice-reitor Eurico de Barros Lbo Filho Diretora da Edufal Sheila Diab Maluf Conselho Editorial Sheila Diab Maluf (Presidente) Ccero Pricles de Oliveira Carvalho Elton Casado Fireman Roberto Sarmento Lima Iracilda Maria de Moura Lima Lindemberg Medeiros de Arajo Leonardo Bittencourt Eurico Eduardo Pinto de Lemos Antonio de Pdua Cavalcante Cristiane Cyrino Estevo Oliveira
Capa: Carlos Eduardo do Nascimento Arajo Reviso: Marcus de Melo Braga Diagramao: Jalves Mendona Niccio Superviso Grca: Mrcio Roberto Vieira de Melo
Catalogao na fonte Universidade Federal de Alagoas Biblioteca Central - Diviso de Tratamento Tcnico Bibliotecria Responsvel: Helena Cristina Pimentel do Vale N582t Niccio, Jalves Mendona. Tcnicas de acessibilidade : criando uma web para todos / Jalves Mendona Niccio. - Macei : EDUFAL, 2010. 100 p. : il. Inclui bibliograa. O projeto da 1 edio (2007) foi nanciado pelo Banco do Nordeste do Brasil. 1. Internet (Redes de computadores). 2. World Wide Web (Sistema de recuperao da informao). 3. Interao homem-mquina. 4. Informtica. I. Ttulo. CDU: 004.5
Direitos desta edio reservados Edufal - Editora da Universidade Federal de Alagoas Campus A. C. Simes, BR 104, Km 97,6 - Fone/Fax: (82) 3214.1111 Tabuleiro do Martins - CEP: 57.072-970 - Macei - Alagoas E-mail: edufal@edufal.ufal.br - Site: www.edufal.ufal.br
Editora aliada:
A Web acessvel como um caminho para auxiliar na Educao Inclusiva

Desde 1999 o SENAI Nacional desenvolve com sucesso, atravs da Unidade de Educao Prossional - UNIEP, Programa SENAI de Aes Inclusivas - PSAI, que estabeleceu o amplo atendimento a pessoas com decincia fsica, intelectual, auditiva, visual ou mltipla, bem como, superdotados (altas habilidades) nas unidades operacionais dos seus 27 Departamentos Regionais. O PSAI, alm de atender ao contingente de pessoas com necessidades especiais, promove o acesso aos cursos do SENAI para mulheres, negros e ndios e a re-qualicao prossional de pessoas idosas. O grande foco do PSAI oportunizar a educao prossional para todos os cidados que por algum motivo scio-cultural, econmico ou por preconceito, so tolhidos de exercer este direito constitucional. No que se refere incluso digital de pessoas com necessidades especiais, o Brasil tem adotado uma poltica favorvel a aes que procuram promover a educao inclusiva, amplamente defendida pela legislao brasileira. Desta forma, o SENAI Nacional, atravs do PSAI, vem capacitando seus docentes para utilizao dos softwares leitores de tela mais usados no Brasil. Tais softwares so utilizados pelas pessoas cegas em sua interao com o computador e a informtica. Assim, os docentes do SENAI foram habilitados para receber, nos cursos de informtica, alunos decientes visuais, tornando possvel para essas pessoas o acesso a mdias digitais como a Web. Em Alagoas, o SENAI vem desenvolvendo com sucesso vrias aes dentro do PSAI desde 2002. Alm de oferecer cursos de capacitao prossional para pessoas com decincia fsica ou sensorial, o SENAI/AL tem ampliado suas aes no sentido de aumentar a participao dessas pessoas no mercado de trabalho. Um dos maiores exemplos desta atuao a publicao do Guia Alagoas Inclusiva, uma cartilha informativa com perguntas e respostas para orientao de empregadores na contratao de pessoas com decincia. No mbito da informao digital, o SENAI/AL, numa promoo da Rede de Incluso Social da Pessoa com Decincia em Alagoas, criou o site Alagoas Inclusiva, que traz informaes e servios para empresas e comunidade. O Site conta com um banco de prossionais composto por pessoas com
decincia que foram qualicadas e certicadas pelo SENAI e outras instituies de educao que compem a Rede de Incluso Social. No entanto, mesmo diante de todas as iniciativas j mencionadas, fazem-se necessrios a difuso e o ensino de tcnicas que viabilizem a construo e publicao na Web de pginas com contedo acessvel, preparando desta forma os futuros construtores de pginas da Internet na perspectiva da incluso. A edio especial desse livro, patrocinada pelo SENAI em parceria com a EDUFAL e o Banco do Nordeste do Brasil, com a devida anuncia do autor e tambm colaborador do SENAI em Alagoas, Jalves Mendona Niccio, mais uma etapa dessa estratgia educativa. imprescindvel pensar numa Web que possibilite o acesso a qualquer pessoa, independente de suas limitaes. Mais ainda: contribuir para que este ideal se realize deve ser considerado uma obrigao de todos que queiram compartilhar informaes atravs de uma pgina na Internet. Entendemos que com a publicao desta edio especial, o SENAI ratica seu compromisso com a construo da cidadania, por intermdio da educao prossional, e oportuniza a qualicao no apenas dos seus educandos, mas tambm do seu quadro docente, que faz a diferena no processo de incluso de pessoas com necessidades especiais.
Marben Montenegro Loureiro

Diretor Regional do SENAI/AL
Sumrio
Apresentao x xii
Introduo
Do que trata este livro?
1. O problema da inacessibilidade pginas de Web ...... xiii Caso 1: ................................................................................................xiii Caso 2: ................................................................................................xiii Caso 3: ................................................................................................xiv 2. Quem deveria ler este livro?...................................... xv
Captulo 1
O mnimo que voc deve saber... 18
1. Anal, o que Web Acessvel?................................ 19 O que quer dizer Web? ........................................................................ 19 O que quer dizer acessvel? ................................................................ 21 O que quer dizer Web acessvel? ........................................................ 22 2. Sobre a Web e seus componentes. .............................. 23
Sumrio
Captulo 2
Diretrizes para construo de contedo acessvel 28
1. Diretrizes W3C ........................................................ 29 2. Diretrizes Brasileiras: E-MAG .................................... 31 3. Diretrizes WCAG Samurai .......................................... 32
Captulo 3
Regras simples, timos resultados! 34
1. Identicando a linguagem utilizada ........................... 37 2. Trabalhando com texto alternativo ............................. 38 3. Trabalhando com CSS ............................................... 40 Um exemplo prtico: ........................................................................... 42 4. Trabalhando com medidas relativas ........................... 49 5. Pensando na estrutura da pgina .............................. 52 Descrio de pgina ............................................................................ 54 6. Tabelas .................................................................. 56 Como um leitor de tela deve ler uma tabela: ...................................... 57 7. Formulrios ............................................................ 61 8. Acrnimos e Abreviaes........................................... 65
vii
Sumrio
Captulo 4
Tcnicas para aplicao de acessibilidade 68
1. Teclas de Atalho....................................................... 70 2. Skip links ............................................................... 72 3. Controle do tamanho da letra .................................... 79 4. Problemas de acessibilidade com CAPTCHA.................. 85 5. Breadcrumbs Trail .................................................. 89 6. Menu de Acessibilidade ............................................ 91
Captulo 5
Cinto de Utilidades! 94
1. Ferramentas de avaliao/validao de acessibilidade . 95 2. Softwares para avaliao de acessibilidade ................. 95 3. Ferramentas validadoras de HTML/CSS ....................... 96 - Validadores de sintaxe HTML/XHTML ................................................ 96 -Validadores de CSS............................................................................. 96 4. Softwares leitores de tela ......................................... 97 5. Complementos de acessibilidade para Firefox .............. 97 6. Ferramentas que teis para teste e desenvolvimento .... 98 7. tens de leitura Obrigatria....................................... 98 8. tens de leitura recomendada .................................... 98
viii
Apresentao
Alguns sonhos que conseguimos realizar em nossas vidas so, muitas vezes, vistos como meras fantasias nossas, diante de todos os obstculos que teremos que enfrentar para torn-los algo real, concreto. O presente livro que me cabe agora apresentar um bom exemplo disso. Nasceu de uma proposta de trabalho de concluso de curso que gerou uma iniciativa de um projeto de acessibilidade para o site da editora da Universidade Federal de Alagoas e que, no seu decorrer, criou as condies necessrias realizao desse projeto. Acessibilidade um tema ainda pouco explorado e de bibliograa escassa, apesar da sua inegvel relevncia. Est intimamente ligado questo da incluso digital e da ateno s pessoas, ao ser humano de uma forma geral. Sob esse ponto de vista, o presente trabalho reveste-se de uma natureza altrusta em querer buscar difundir o uso de tcnicas e ferramentas que promovam a acessibilidade para esse instrumento fantstico e entusistico que hoje a Web. Trata-se de um texto que, apesar de abordar questes tcnicas, destinadas a um pblico especializado, cumpre sua misso com uma linguagem simples e acessvel, como deve ser o tom de uma obra que pretende abordar tal tema. Nele, o leitor conduzido desde aos conceitos bsicos da acessibilidade, sua motivao e importncia, at s tcnicas e ferramentas avanadas para a sua utilizao plena por especialistas, ou at mesmo por pessoas que no tenham tanta experincia em desenvolvimento de aplicaes para a Web, mas que pretendam publicar algo, desde um simples blog at um site mais complexo. Com a disponibilizao de ferramentas extremamente fceis para publicao de contedo na Web, pessoas sem muita experincia de programao de computadores podem marcar presena, cada vez mais, no contexto
Apresentao
global que a Internet criou, divulgando seus produtos, servios ou at mesmo pensamentos, nessa grande rede. Para todo esse pblico, a presente obra pode contribuir com valiosas informaes, com o intuito de possibilitar a criao de espaos na Web que possam ser acessados com a maior abrangncia possvel. Ampliar a acessibilidade das informaes disponveis na rede implica o aumento de visitas e, logicamente, de possveis usurios ou clientes adicionais, gerando resultados e contribuindo para uma maior incluso social. A adeso ao tema aqui abordado um dos raros exemplos em que todos saem ganhando. Mas, apesar de ser uma ferramenta til para todos, pouco se faz em termos de acessibilidade no cenrio global. H outro sonho incubado nessa obra: de que um dia a Web seja amplamente acessvel, incluindo jovens e idosos, pessoas carentes de ateno e aquelas mais autoconantes. O livro a contribuio do seu autor, jovem idealista e visionrio, para a transformao de uma realidade, para mudar o mundo. a sua deciso pessoal de interferir nessa realidade, optando por tentar fazer alguma diferena nesse universo miditico, em que a Web se transformou. Por todas essas questes, esta obra tem um mrito louvvel. o primeiro livro no cenrio nacional sobre esse assunto e, como toda iniciativa pioneira, abre espao para novas pesquisas e trabalhos no tema abordado. Pode ser adotado como livro texto para cursos de desenvolvimento de aplicaes para a Web e, at mesmo, para cursos de graduao em Sistemas de Informao e Cincias da Computao. Espera-se que o leitor no se detenha apenas a conhecer os recursos de acessibilidade aqui tratados e que se una a um grupo cada vez maior de prossionais que trabalham para melhorar as condies de acesso ao contedo da Web. Se cada um de ns der um simples passo nessa caminhada, a sinergia gerada pelos pequenos esforos individuais poder contribuir para um considervel aumento do nmero de pessoas que podem tirar proveito de todas as tecnologias inclusivas que j existem e que esto nossa disposio, para construir um mundo cada vez mais acessvel a todos ns. MARCUS DE MELO BRAGA
xi
INTRODUO Do que trata este livro?

Internet, e-mail, site, home page, servidor, navegador, links por toda parte! Quem nunca cou confuso com toda esta tecnologia? Mesmo quem j nasceu na gerao on-line, algumas vezes pode se sentir perdido, at porque esta uma tecnologia em constante desenvolvimento desde sua criao. Na verdade, desde a primeira vez que o mundo ouviu falar de Web, nada tem sido como antes. A Internet, e a Web por sua vez, vem a cada ano provocando mudanas radicais na maneira como os homens se relacionam, trocam informaes, resolvem problemas, estudam ou simplesmente se divertem. Muitas vezes, a Web substitui antigos servios conhecidos pelo homem, como os correios e o telefone. Desta forma, no h como negar a importncia da Web nos dias de hoje.
Captulo INTRODUO - Do que trata este livro?
1. O problema da inacessibilidade pginas de Web

Este um problema que no passa despercebido para um grupo de pessoas que tentam se beneciar das vantagens dos servios oferecidos pela Web. Por diversas razes, muitas vezes um determinado servio ou pgina da Web poder estar inacessvel a uma pessoa ou grupos de pessoas. Por exemplo, imagine os seguintes casos:
Caso 1:
Joo quer fazer umas compras num site de vendas on-line. Nada complicado: ele quer adquirir uns CDs e alguns livros. No site, ele encontra instrues explicando que preos com desconto esto em vermelho. Tudo estaria muito bem, a no ser por um detalhe: Joo daltnico e no consegue distinguir a cor vermelha. A situao se complica quando Joo se depara com um formulrio onde os campos obrigatrios tambm so destacados dos demais pela cor vermelha.
Caso 2:
Toda vez que Sandra precisa ir sozinha ao supermercado ela ca aita. Sandra tem sndrome de Down e tem diculdade com leitura, clculos matemticos e conceitos abstratos. Na hora de escolher um produto, ela ca confusa com as diversas opes e acaba perdendo o controle de quanto ela est gastando.
xiii
Uma vez um amigo dela a apresentou a um site onde ela poderia fazer as mesmas compras que ela fazia no supermercado pela internet. Ela tentou usar o site algumas vezes e logo descobriu uma srie de diculdades: o site nunca deixava claro em que seo ela estava, nem como encontrar um determinado produto. Em algumas sees o layout da pgina muda completamente e a Sandra ca na dvida se ainda est no mesmo site ou no.
Caso 3:
A primeira vez que o Henrique usou um programa leitor de tela foi uma comoo s! Pela primeira vez em muito tempo ele sentia que poderia fazer alguma coisa sem ajuda de ningum. Henrique cego e acabou de ser apresentado a um programa capaz de ler todo texto que se encontra na tela. Imaginem quanta coisa agora ele ser capaz de fazer! Atravs da tecla TAB do teclado ele pode navegar de link em link e encontrar o que deseja. Com este programa, agora ele poder acessar os servios da Web, ele pode pagar suas contas, comprar produtos, fazer pesquisas, mandar e-mails, etc. Mas sua fascinao no durou muito tempo. Logo Marcos descobriu que nem todos os sites permitiam que o leitor de telas acessasse adequadamente seu contedo. Todos estes exemplos servem para evidenciar uma
xiv
realidade vivida por milhes de pessoas em todo mundo. Quando privamos estas pessoas do acesso aos servios e informaes que circulam na Web, estamos criando um srio problema de excluso social e digital. Encare da seguinte forma: Para pessoas sem decincia, sistemas da Web facilitam a vida, mas para quem no pode ver ou ouvir ou andar, estes mesmos sistemas so mais do que facilitadores. Para essas pessoas, ter acesso a esses sistemas, muitas vezes signica tornar possvel a realizao de tarefas que, de outra forma, exigiriam um esforo imenso ou at mesmo seriam impossveis de serem realizadas. Ento, o que podemos fazer para que o contedo das pginas e sistemas da Web seja acessvel a pessoas portadoras de necessidades especiais? exatamente disso que trata este livro. Abordaremos aqui os principais conceitos que precisamos saber para tornar ou construir sites acessveis.
2.
Quem deveria ler este livro?
Nem todas as pessoas que publicam algum contedo na Web esto ligadas rea de Informtica e, por isso, no necessariamente tem conhecimento das tecnologias utilizadas para construir sites. Contudo, todas as pessoas que publicam contedos na Web, seja texto, udio ou vdeo, deveriam se preocupar com a questo da acessibilidade. Ento, mesmo que voc no entenda nada de HTML, CSS ou qualquer outra tecnologia da Web, ainda assim voc pode compreender quais so os pontos crticos na acessibi-
xv
lidade de um site, pode aprender a realizar testes de usabilidade e acessibilidade ou pode realizar a nobre misso de informar as outras pessoas que ainda no despertaram para este problema que atinge a maioria esmagadora dos sites da Web. Gerentes de Tecnologia da Informao, gerentes de marketing e desenvolvedores de negcios tambm deveriam ler este livro. Cada um dentro de sua rea e por razes diferentes deveriam se preocupar em garantir acesso aos produtos que desenvolvem. Tal atitude traria diversos benefcios, alm de criar novas oportunidades de negcios. Programadores, web masters, web designers, consultores de usabilidade, pessoas que possuem ou administram sites e estudantes de informtica devem se preocupar em aprender como garantir acesso a pessoas com variadas necessidades especiais. Mais fcil do que consertar um site que no est acessvel j constru-lo levando-se em considerao que pessoas com decincias, sejam elas temporrias ou permanentes, vo querer acessar este site.
xvi
O mnimo que voc deve saber...

Para que voc entenda claramente do que estamos tratando aqui, necessrio que primeiro compreenda alguns conceitos bsicos. De nada vai adiantar comearmos a explicar a aplicao de algumas tcnicas em cdigos de pginas da Web sem antes denirmos alguns termos que geralmente causam bastante confuso. Tais conceitos so muito importantes para que voc possa ter uma viso ampla sobre porque alguns sites so inacessveis para algumas pessoas e o que j tem sido feito para resolver este problema.
Captulo 1 - O mnimo que voc deve saber...
1. Anal, o que Web Acessvel?

O que quer dizer Web?
Para comear, no confunda mais Internet com Web. Apesar de serem extremamente ligadas, so coisas bem distintas e tem propsitos diferentes. Quem veio primeiro na histria foi a Internet, criada inicialmente para ns militares. Sua funo era, e ainda , conectar computadores. A Internet fez isso to bem que hoje temos uma rede mundial de computadores. Alias, rede mundial de computadores dene muito bem o que Internet. Uma vez que j temos uma rede de comunicao bem estruturada entre computadores, agora precisamos de programas que permitam a troca de mensagens entre esses computadores. Assim, surgiram os servidores de e-mail e os programas clientes de e-mail. Basicamente funcionam como o sistema de correio convencional, s que ao invs de termos agncia de correios, temos servidores de e-mail. No lugar do carteiro, temos a internet com todo seu cabeamento e protocolos, e os remetentes e destinatrios so sempre computadores. Mas trocar informaes por e-mails no era suciente. At ento, em termos prticos, a Internet era pouco mais do que uma ferramenta para troca de correspondncias e disponibilizao de arquivos. Alm disso, no havia compatibilidade entre os diversos sistemas de informao utilizados. O problema era: dado s circunstncias, como compartilhar
19
publicaes e tecnologias entre pessoas geogracamente distantes, facilitando o acesso a qualquer tipo de informao? Nos anos 80, O Centro Europeu de Pesquisa Nuclear (CERN) estava particularmente interessado em solucionar esta questo. Para tanto contou com a colaborao de Tim Berners-Lee, um engenheiro de sistemas com larga experincia em telecomunicaes. Tim primeiramente criou um tipo padro de documento eletrnico e, com isso, resolveu o problema de incompatibilidade entre arquivos disponibilizados na internet. Segundo a soluo de Tim, os arquivos seriam disponibilizados na internet seguindo uma idia parecida com a de troca de e-mails: atravs de um programa servidor (responsvel por disponibilizar o documento) e programas clientes (que fariam a solicitao deste documento ao servidor). Mas o que foi realmente genial na soluo de Tim Berners-Lee foi a utilizao de URLs (endereos de pginas) para acesso aos diversos documentos e a possibilidade de vincular esses documentos. Funciona assim: cada documento, seja texto, imagem, som ou vdeo, teria uma URL prpria. Para abrir qualquer um destes documentos, bastava solicitar isto no programa cliente, que hoje conhecemos pelo nome de navegador. Dentro do prprio documento de texto existem links para outros documentos. A possibilidade de vincular um documento a outro (e este segundo documento a um terceiro, e assim por diante)
20
nos d uma sensao de que estamos lidando com algo que pode fugir ao controle. A gente vai seguindo os links e, quando menos esperamos, voltamos para a primeira pgina, de onde samos inicialmente. Se formos pensar em um grco ilustrando esse emaranhado de links, esse grco seria algo parecido com uma teia de aranha (em ingls, web). Da o nome dado inveno de Tim Berners-Lee. Enm, a Web nada mais do que este mar de links, sites e sistemas on-line onde milhes de pessoas diariamente navegam e procuram encontrar tudo aquilo que desejam. uma tecnologia criada para tornar qualquer tipo de informao ou servio acessvel a qualquer hora do dia ou da noite.
O que quer dizer acessvel?

Geralmente, quando ouvimos falar que algo Acessvel, ns primeiramente pensamos em decientes fsicos. Voc provavelmente j ouviu algum dizer: aquela passarela nova acessvel ou aquele nibus acessvel. Mas com uma olhadinha rpida no Aurlio, logo descobrimos que algo acessvel quando fcil de aproximar, tratar ou obter. Isto sem dvida melhora a compreenso do que ser acessvel, ou seja, bem mais do que pensvamos inicialmente. Por exemplo: nem tudo que fcil para um adulto normal fcil para uma criana, ou um idoso, ou um deciente fsico e assim por diante. Nem tudo que acessvel para um cego tambm acessvel para um paraplgico ou simplesmente para algum com a perna engessada. Cada pessoa,
21
independente de ser deciente fsica ou no, possui um grau diferente de necessidade para poder acessar alguma coisa. Quando dizemos, portanto, que algo acessvel, isto deveria signicar que qualquer pessoa, independente de sua necessidade, ter facilidade em entrar, aproximar, subir, utilizar, etc.
O que quer dizer Web acessvel?

Web acessvel a representao de uma Web ideal, onde todas as pessoas teriam acesso ao seu contedo. No s pessoas, mas tambm sistemas, uma vez que sistemas tambm acessam contedos de pginas na internet para algum propsito, dependendo do sistema. Um exemplo: o sistema de buscas mais utilizado no mundo e que vale mais de dois bilhes de dlares, o Google. Ele garimpa toda a Web procurando os resultados mais relevantes para uma busca. Algum a pode estar se perguntando como o Google faz isso?. Bom, uma forma de se fazer isso entrar em cada pgina e ler seu contedo, da mesma forma que os leitores de telas utilizados por cegos. Quando o sistema no consegue acessar alguma pgina ou site, este ou indexado de maneira equivocada ou simplesmente deixado de lado. Acessibilidade Web tambm est ligada a diversos dispositivos. Hoje em dia, pginas da web tambm podem ser exibidas em celulares, palmtops e at em televiso. Se no
22
houver uma preocupao em como as informaes do site sero exibidas nestes dispositivos, h uma forte possibilidade de que seu contedo no seja disponibilizado adequadamente. Existem vrios fatores que podem impossibilitar ou dicultar o acesso ao contedo de uma pgina. Na introduo deste livro vimos alguns casos que relatam a diculdade que algumas pessoas encontram para acessar informaes devido a determinadas caractersticas de um site. O que veremos mais adiante como podemos detectar pontos crticos de acessibilidade e como poderemos corrigir o problema. Contudo, ainda precisaremos explicar mais alguns detalhes sobre o funcionamento da Web, o que faremos no prximo tpico.
2.
Sobre a Web e seus componentes.
Para que a Web funcione, ela depende de certos componentes; o mais bvio deles a prpria Internet, ou seja, toda esta estrutura de cabos, placas de redes, protocolos, bra ptica e computadores. A Internet a plataforma onde a Web funciona. A Web composta por documentos e sistemas. Ou seja, pginas da Web, sistemas de webmails, sistemas de busca e tudo mais que roda na Web so outro tipo de componente da Web, e ns chamaremos de Contedo. Nenhum contedo existiria se no houvesse quem o
23
criasse. Portanto, aqui entram os Desenvolvedores de websites e sistemas Web como o terceiro componente essencial da Web. Mas todo desenvolvedor utiliza programas que o ajudam a criar contedo para a Web: so os softwares de criao de contedo. Alm desses, os desenvolvedores tambm utilizam softwares de validao, que validam o cdigo criado pelo desenvolvedor e avaliam a acessibilidade do contedo. Muitas vezes essas duas ferramentas so integradas em uma s ou trabalham em parceria. Tais softwares so nosso quarto grupo de componentes essenciais da Web. Ns poderemos chamalos de ferramentas de criao e validao. Se tivermos quem cria contedo como um componente da Web, ento teremos tambm o usurio da Web como outro componente. Usurio toda e qualquer pessoa que navega, acessa e l contedos publicados na Web. Mas para navegar pela Web, preciso que o usurio possua tambm um navegador, como o Internet Explorer, Opera ou Firefox. Algumas vezes possvel que um usurio no esteja acessando a Web atravs de um navegador convencional como estes anteriormente citados. Um usurio pode acessar contedos da Web atravs de uma TV digital, por exemplo. Ento, chamaremos de Agentes de Usurios todo sistema ou dispositivo capaz de requisitar acesso a qualquer contedo da Web e este ser o sexto componente. No podemos nos esquecer que muitos usurios no
24
podem acessar contedos da Web diretamente pelo agente de usurio. Usurios cegos, por exemplo, se utilizam de leitores de telas ou de didpositivos especiais que reproduzem o contedo de uma pgina da Web em braille. Essas ferramentas que auxiliam usurios que possuem algum tipo de necessidade especial so chamados de ferramentas assistivas, nosso ultimo grupo de componentes da Web. A gura abaixo foi retirada do site Iniciativa de Acessibilidade Web1 (sigla em ingls: WAI), que est vinculado ao W3C, uma organizao presidida pelo inventor da Web e que se preocupa em criar padres para as tecnologias utilizadas na Web. A gura representa todos estes componentes e como eles se relacionam entre si.
Figura 1. Componentes da Web e seus relacionamentos
exatamente a, entre o usurio e o contedo, que 1 http://www.w3c.org/WAI

25
o problema da falta de acessibilidade aparece. E se o usurio for cego? E se for surdo? E se no tiver uma das mos, ou estiver temporariamente incapacitado? Foi por causa das necessidades especiais destas pessoas que as ferramentas assistivas foram criadas. A tendncia, nesse ponto, pensar: Ento, se existem as ferramentas assistivas, logo est tudo resolvido. Todas as pessoas podem navegar pela internet. Mas no bem assim. O fato que s se pode garantir uma boa acessibilidade a um determinado site quando todos esses componentes esto bem relacionados entre eles. No pode haver uma boa acessibilidade se um determinado browser (navegador) no der suporte a nenhum leitor de tela, por exemplo. Tambm no haveria motivao para um desenvolvedor programar algo que facilitasse o acesso a uma pgina Web se as ferramentas de criao ou os agentes de usurio no derem suporte para tal facilidade que o desenvolvedor deseja programar. muito comum encontramos desenvolvedores de contedo que no esto preocupados se algum deciente fsico vai tentar acessar a pgina que ele criou. O que geralmente acontece que muitas pginas da Web no podem ser acessadas pelas ferramentas assistivas, causando transtorno para aqueles que dependem de tais ferramentas. Um exemplo claro de inacessibilidade o simples fato de permitir a navegao num site somente pelo mouse. Isto j suciente para deixar de lado todas as pessoas que, por
26
algum motivo, no podem utilizar este dispositivo e navegam atravs do teclado. Se voc ainda no se deu conta, pessoas que possuem somente decincia na viso, apesar de geralmente no apresentarem nenhum problema nos braos e nas mos, tambm esto incapacitadas de utilizar o mouse por um motivo simples: mouse um dispositivo que, para ser utilizado, precisa da mo e dos olhos do usurio. Faa um teste e tente usar o mouse com os olhos fechados.
27
Diretrizes para construo de contedo acessvel

At agora, pudemos perceber que o problema da falta de acesso a pginas Web ocorre justamente entre os componentes Usurio e Contedo. Tal diculdade um reexo de um relacionamento fraco entre outros dois ou mais componentes da Web. Por exemplo, um fraco vnculo entre o desenvolvedor e a ferramenta de criao pode acarretar num contedo mal formado. O quadro piora se as ferramentas de validao de contedo no se basearem em regras claras para poder avaliar o contedo adequadamente. Por este motivo, a melhor soluo para garantir que todos os componentes funcionem harmoniosamente bem estipular conjuntos de regras que mostrem claramente os pontos crticos de acessibilidade.
Captulo 2 - Diretrizes para construo de contedo acessvel
Existem atualmente vrios documentos internacionais que propem regras de acessibilidade para Web com o propsito de orientar desenvolvedores de ferramentas de criao, ferramentas de avaliao e desenvolvedores de contedo. Todos, no entanto, baseiam-se em diretrizes do W3C. Por esse motivo, iniciaremos este captulo entendendo como as diretrizes do W3C esto organizadas e depois seguiremos analisando outras diretrizes que possuem relevncia dentro da realidade brasileira.
1.
Diretrizes W3C
O World Wide Web Consortium (W3C) uma organizao mundialmente conhecida por elaborar documentos de especicao de tecnologias especialmente criadas para a Web, tais como o HTML, XHTML, CSS, dentre muitas outras. O W3C procura desenvolver padres de tecnologias para Web de forma que possibilite a criao e interpretao dos contedos para Web. A idia que sites desenvolvidos segundo tais padres possam ser acessados por qualquer pessoa ou tecnologia, independente de qual hardware ou software seja utilizado. Por intermdio da iniciativa WAI (Web Accessibility Initiative), o W3C desenvolve diretrizes para acessibilidade Web. Existem diretrizes especcas para diferentes grupos de componentes: ATAG (Authoring Tool Accessibility Guidelines)
29
destinada para fabricantes de ferramentas de criao de contedo. Ela orienta os fabricantes a implementarem funcionalidades em seu produto que ajude ao desenvolvedor de contedo a obedecer as recomendaes descritas na WCAG. WCAG (Web Content Accessibility Guidelines) destinada para contedo das pginas Web, e utilizada por desenvolvedores de pginas Web. Fabricantes de ferramentas de criao e ferramentas de avaliao tambm consultam este documento com o objetivo de renar melhor o funcionamento de seus produtos e criar uma aderncia melhor ao trabalho realizado pelo desenvolvedor de contedo. UAAG (User Agent Accessibility Guidelines) destinada para desenvolvedores de web browsers e players de mdia, incluindo tambm alguns aspectos das tecnologias assistivas. Todas essas diretrizes foram fundamentadas nas especicaes tcnicas da Web (HTML, XML, CSS, SVG, SMIL, etc.), que tambm so desenvolvidas pela W3C. A primeira verso da WCAG cou pronta em 1999 e desde ento tem sido largamente utilizada, reproduzida e referenciada por diversos documentos sobre o assunto. A WCAG possui 14 diretrizes e cada diretriz se desdobra em alguns pontos de vericao. Como um documento um pouco extenso, para facilitar o entendimento dessas diretrizes, a WAI organizou a WCAG em nveis de prioridade.
30
Dessa forma, cada ponto de vericao est associado a um nvel de prioridade, que pode ser 1, 2 ou 3. Os pontos de vericao de prioridade UM devem ser satisfeitos para que todos os grupos de usurios tenham a possibilidade de acessar as informaes contidas no documento. Os pontos de vericao de prioridade DOIS deveriam ser satisfeitos. Caso contrrio, um ou mais grupos de usurios tero diculdades em acessar as informaes contidas no documento. Os pontos de vericao de prioridade TRS podem ser satisfeitas e existem para evitar que alguns grupos de usurios sintam alguma diculdade em acessar as informaes contidas no documento. Existe uma verso mais recente da WCAG (verso 2.0) que recomenda acessibilidade num sentido mais amplo que a verso anterior. Enquanto a WCAG est mais focada em acessibilidade para decientes fsicos, a segunda verso deste documento foi desenvolvida para aplicao diferentes tecnologias da Web.
2.
Diretrizes Brasileiras: E-MAG
A partir de uma iniciativa do Ministrio do Planejamento, o Brasil, assim como em outros pases, tambm criou o seu modelo de acessibilidade. O Modelo de Acessibilidade
31
do Governo Brasileiro (E-MAG) est organizado em dois documentos: A Cartilha tcnica (ou viso tcnica) contm as diretrizes de adequao de contedo da Web, sendo direcionada para prossionais de informtica, e o Modelo de Acessibilidade (ou viso do cidado) contm orientaes que auxiliam na implementao das diretrizes e procura facilitar o entendimento do modelo. O modelo brasileiro foi elaborado com base nas normas adotadas em outros pases e, foi principalmente baseada na WCAG, porm, segundo o prprio modelo, tudo foi feito de forma que casse coerente com as necessidades brasileiras. O e-MAG adotou os mesmos nveis de prioridade das recomendaes estabelecidas pelo WAI e deniu tambm trs nveis de acessibilidade. Para quem nunca chegou a ler um documento de orientao de acessibilidade, o e-MAG um bom comeo. A organizao da cartilha tcnica facilita bastante a compreenso das diretrizes e todas as recomendaes de acessibilidade do documento se assemelham muito aos pontos de vericao adotados pela WCAG 1.0.
3.
Diretrizes WCAG Samurai
WCAG Samurai um grupo de desenvolvedores que no possuem nenhuma ligao com o W3C e que estavam insatisfeitos com algumas caractersticas da WCAG 2.0. Por isso propuseram uma lista de correes para a WCAG 1.0
32
e disponibilizaram este documento como uma alternativa WCAG 2.0. O documento WCAG Samurai errata est disponvel desde fevereiro de 2008. Anal o que h de errado com WCAG 2.0? O grande problema deste documento seu tamanho. A WCAG 2.0 grande demais para tranmitir, de uma maneira fcil de compreender, as idias sobre acessibilidade na Web. Procurando reduzir sua complexidade, muitos desenvolvedores sugeriram a criao de uma verso compacta. Mas a diculdade para a criao desta verso mais compacta est na escolha de qual seria seu conjunto de regras apropriado. O documento WCAG Samurai Errata, na verdade procura fazer uma correo de algumas recomendaes da verso 1.0 da WCAG. O motivo pra isso simples: muitas recomendaes escritas na WCAG 1.0 so consideradas desatualizadas por que este documento foi publicado em 1999 e muita coisa mudou nesses 9 anos, principalmente por causa da absoro de novos conceitos por parte dos desenvolvedores, tais como padres Web, desenvolvimento em camadas, Web 2.0 e Web semntica.
33
Regras simples, timos resultados!

Nunca se falou tanto em acessibilidade quanto nos ltimos anos, e isto no uma realidade exclusivamente brasileira. Muitos pases reformaram sua legislao para que ela englobasse os ltimos conceitos sobre o assunto, incluindo a os mais atualizados padres de acessibilidade para a tecnologia da informao. Toda esta mobilizao dos pases empolgante e serviu para que muitas pessoas que esto de alguma forma envolvidas com projetos Web obtivessem conhecimento sobre acessibilidade, ou na pior das hipteses, pelo menos ouviram falar. Ainda assim, o nmero de sites que se preocuparam em tornar seu contedo acessvel quase inexpressivo perto
Captulo 3 - Regras simples, timos resultados!
da quantidade de sites que no se preocuparam com isso. Mas se ns j temos uma Lei1 que trata sobre o assunto e se ns j temos diretrizes que orientam como devemos proceder ento o que est faltando? Lda Spelta procurou explicar isso em seu artigo Sete Mitos e Um Equvoco2 . A base de todo problema se encontra na total falta de conhecimento sobre o que mito e o que realidade quando o assunto sites acessveis. Muitos projetistas de sites, sem uma base concreta, acreditam que fazer um site acessvel um trabalho muito demorado e custoso. Outros acreditam que uma tarefa difcil de ser realizada. Mas em muitos casos, no nem uma coisa nem outra. Se a acessibilidade de um site for planejada junto com o desenvolvimento do prprio site, alm de no atrasar o andamento do projeto, a acessibilidade poderia ter um custo baixo ou at nulo. Uma diculdade maior poderia aparecer quando o site j existe e precise ser adequado, mas ainda assim o resultado nal deste trabalho compensaria o esforo. Em todo caso, sempre podemos tomar alguns cuidados que j melhorariam a acessibilidade do site. So coisas
1 2 Decreto-lei 5296 de 2 de dezembro de 2004 Publicado no site Acesso Digital. Di
sponvel em: http://acessodigital.net/art_acessibilidade-web-7-mitos-e-um-equivoco.html
35
simples de serem feitas, mas que fazem uma grande diferena, principalmente se o site for totalmente inacessvel. Ento, o mnimo que voc pode fazer pela acessibilidade de uma pgina isto: 1) Mantenha o HTML de sua pgina semanticamente correto e vlido por exemplo, use sempre h1, h2 para ttulos e p para pargrafos. Sempre valide seu HTML. 2) Organize o contedo de sua pgina de forma que ele faa sentido quando for lido uma boa dica aqui desabilitar o css de sua pgina para vericar como o navegador renderiza seu cdigo HTML. 3) Sempre disponibilize texto alternativo para qualquer contedo visual ns veremos como fazer isso ainda neste captulo. 4) Verique se todos os seus ttulos e textos de links fazem sentido, mesmo quando so lidos fora do contexto. Voc pode encarar estas quatro orientaes como um ponto de partida para acessibilidade do contedo. No entanto, seguir somente estas quatro premissas no garante uma validao do contedo, nem humana nem por sistema avaliador. Passar pelas validaes de acessibilidade vai exigir do projetista mais ateno s diretrizes adotadas, seja WCAG, e-
36
MAG, WCAG-Samurai ou qualquer outra. Mas nem por isso o trabalho se torna de difcil compreenso e execuo. A seguir discutiremos uma lista de orientaes criadas a partir das diretrizes WCAG 1.0 e que pode ser bastante til caso voc ainda esteja dando seus primeiros passos. Perceba que nenhuma dessas orientaes exige um nvel de conhecimento muito aprofundado sobre HTML e CSS.
1.
Identicando a linguagem utilizada
Essa uma das primeiras coisas que todos deveriam checar quando criam uma pgina. Alis, identicar idioma principal utilizado num documento faz todo sentido e uma coisa muito simples de fazer. A razo pela qual esta identicao importante que, em primeiro lugar, isso ajuda os sites de busca a indexar melhor a pgina quanto lngua em que ela foi escrita. Alm disso, esta identicao auxilia os softwares leitores de tela a decidir em que lngua o contedo desta pgina ser falado. Como foi dito antes, identicar o idioma de um documento muito simples e vai depender apenas do tipo documento que voc est criando e a alterao vai ocorrer justamente na linha que identica o tipo de documento. Por exemplo, na tabela abaixo ns podemos ver como ca a declarao de tipo de documento quando o idioma portugus do Brasil:
37
Tipo de Documento HTML XHTML (transitional)
XML e XHTML (strict)
Declarao para idioma pt-br <html lang=pt-br> <html xmlns=http:// www.w3.org/1999/ xhtml xml:lang=pt-br lang=pt-br> <html xmlns=http:// www.w3.org/1999/ xhtml xml:lang=pt-br lang=pt-br>
Uma observao importante aqui os leitores de tela mais avanados conseguem fazer uma identicao automtica do idioma. Contudo ainda existem no mercado muitos softwares leitores de tela que no possuem esta facilidade.
2.
Trabalhando com texto alternativo
Alt um parmetro encontrado em algumas marcaes de HTML e XHTML, principalmente naquelas que representam algum elemento no textual. Por exemplo, a marcao de imagem, como mostrado no fragmento de cdigo abaixo:
<img src=/imagem/imagem1.jpg />
38
Esta marcao seria passada para o navegador, que entenderia que precisa carregar a imagem imagem1.jpg nesta pgina. O problema que a informao contida na imagem s estaria disponvel para aqueles que conseguem enxergar. Como poderemos saber o que a imagem est retratando sem, contudo, visualizar a imagem? Bom, ns podemos vincular a imagem a um texto alternativo, da seguinte forma:
<img src=/imagem/imagem1.jpg alt=capa do livro: O silncio da alma/>
Dessa forma, agora j temos uma idia do que se trata a imagem que est na pgina. O programa leitor de tela, ao se deparar com esta marcao ir procurar se existe algum alt declarado para poder ler. Sistemas que fazem busca por imagem, tambm se utilizam do texto alternativo para poder indexar as imagens contidas em websites. Porm nem todas as imagens que esto numa pgina precisam ser descritas. Algumas imagens s tm propsitos decorativos e no possuem nenhuma relevncia para o contedo da pgina. Nestes casos, declare um alt com espao em branco:
<img src=/imagem/bullet.gif alt= />
39
A maioria dos usurios da Web tem pressa de encontrar o que desejam em uma determinada pgina, por isso, dicilmente eles lem uma pgina da Web linha por linha at que encontrem o que esto procurando. Usurios que utilizam programas leitores de tela no so diferentes neste ponto. Eles tambm tm pressa em encontrar o que desejam e no querem ler todas as palavras de uma pgina. A diferena que usurios cegos no lem o contedo, eles escutam. Como eles querem encontrar a informao procurada o mais rpido possvel, ento eles no param para ouvir todas as palavras. Geralmente eles vo pulando para o prximo link, prximo pargrafo at chegarem ao ponto que desejam. Muitos usurios de leitores de tela tm o costume de congurar a voz do sintetizador em uma velocidade alta para ganhar tempo enquanto ouvem o contedo. Alguns desenvolvedores de contedo para a Web acham equivocadamente que declarar um texto alternativo para todas as imagens de uma pgina ajuda queles que no podem ou tem diculdade de enxergar e colocam textos alternativos inclusive em imagens decorativas: aqui uma bola, imagem de arredondamento de canto, uma linha pra separar o rodap, etc. Perda de tempo! Isso s diculta mais a leitura do documento.
3.
Trabalhando com CSS
Quando comecei a criar pginas para a Web, ningum falava ainda em CSS. Tudo era feito usando o HTML e Ja-
40
vascript, para criar algum dinamismo na pgina. Uma pgina com muitos detalhes de layout era sinnimo de uma pgina com muitas tabelas aninhadas, ou seja, tabela dentro de tabela. Quanto mais tabelas ns tnhamos no documento, mais marcaes <TR><TD> teramos para gerenciar. Tambm toda informao de cor, tamanho, fonte, tudo enm deveria estar no HTML. O resultado disto: um documento altamente confuso e difcil de manusear. Era impossvel abrir mo de um bom programa de edio de cdigo HTML tipo WYSIWYG (What You See Is What You Get), como o Macromedia Dreamweaver. Neste cenrio catico, o CSS aparece como um forte aliado, tornando possvel separar de uma vez por todas o contedo de uma pgina de sua estrutura e apresentao. Dessa forma, toda estrutura e contedo de uma pgina devem car no HTML, enquanto o CSS se encarrega de sua apresentao. Entenda por apresentao toda informao de tamanho, largura, altura, tipo de fonte, altura de linha, cores, posicionamento na pgina, tudo que faa referncia a como o contedo deve ser apresentado na tela. Esta tcnica ou metodologia de criar uma pgina Web separando-a em camadas conhecida como tableless. A metodologia Tableless recebeu este nome por no permitir, no HTML, a utilizao de tabelas para montagem de apresentao de contedo. Existem muitas vantagens na utilizao de CSS para
41
apresentao de uma determinada pgina da Web. Uma das mais fortes que o HTML agora ca livre de tabelas aninhadas e de elementos que s so utilizados para apresentao de contedo, como o elemento <font>. Dessa forma, ca muito mais simples fazer qualquer manuteno no contedo desta pgina. Do ponto de vista da acessibilidade, uma vez que todos os dados da apresentao do contedo esto separados em um arquivo CSS, muito simples fazer alteraes na apresentao deste contedo e at mesmo criar apresentaes diferentes para tipos de mdia diferentes. Assim, voc pode criar, por exemplo, um conjunto de regras CSS para apresentao na tela do computador e outro conjunto para impresso do contedo, eliminando algumas informaes desnecessrias na impresso.
Um exemplo prtico:
Perdido no meio de tantos conceitos? Ento vamos melhorar um pouco as coisas com um exemplo bastante prtico. Quem trabalha com desenvolvimento para a Web, ao menos uma vez j precisou montar um layout de pgina com trs colunas. Quase instantaneamente pensamos: Simples! Basta criar uma tabela, inserir as trs colunas e est feito o layout. Realmente parece simples, no? Vamos ver como ca o cdigo HTML para a soluo apresentada:
42
<table width=95% border=0> <tr> <td colspan=5> <h1 align=center><font face=Verdana, Arial, Helvetica, sansserif> Layout com 3 Colunas</font></h1> </td> </tr> <tr> <td valign=top><div align=justify> <font face=Arial, Helvetica, sansserif>Conteúdo da esquerda Lorem ipsum dolor sitamet, consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque.</font></ div> </td> <td><img src=spacer.gif /></td> <td valign=top> <p align=justify><font face=Arial, Helvetica, sans-serif>Escreve alguma coisa...</font></p>
O cdigo acima somente um fragmento de todo trabalho que teremos que realizar para criar e manter um site utilizando a tcnica convencional. Perceba que no trecho de cdigo, alm de utilizarmos tabelas para criar a disposio do contedo, tambm abusamos no uso da tag <font>. O que aconteceria se esta pgina zesse parte de um portal com mais de 100 pginas como esta? E se precisssemos alterar o
43
tipo de fonte ou a cor da fonte em todas as pginas? Apesar do cdigo estar bastante poluido com os elementos de tabela, a renderizao deste HTML bastante simples. Com este cdigo, o navegador simplesmente vai distribuir a informao em 3 colunas, conforme a imagem abaixo:
Figura 2. Exemplo de layout com 3 colunas
Quando utilizamos a metodologia Tableless, a primeira coisa que fazemos e elimar a tabela. No lugar dela, utilizaremos a tag <div>, conforme mostra o trecho de cdigo a seguir:
44
<body> <div id=geral> <h1>Layout com 3 Colunas</h1> <div id=esquerda class=coluna>Contedo da coluna da esquerda...</div> <div id=conteudo class=coluna> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut volutpat. Nulla pellentesque. In sed neque. Integer facilisis, lorem ac malesuada dignissim, eros metus posuere urna, et vestibulum urna justo ac enim. Ut </p> <p> Maecenas congue, ipsum et elementum ullamcorper, urna velit ultrices massa, in accumsan velit ligula id purus. Sed metus elit, blandit nec, ultrices id,scelerisque ultrices, augue. Phasellus accumsan. Cras porta. </p> <p> Proin in eros at justo lacinia varius. Proin nulla dui, euismod sit amet, lobortis non, porta vel, ipsum. Fusce malesuada accumsan tellus. Sed tincidunt justo a magna. In a nunc. Suspendisse placerat, quam a euismod </p> </div> <div id=direita class=coluna> Contedo da Direita Lorem ipsum dolor sit</div> </div> </body>
45
A estrutura bem simples. Para cada coluna utilizase uma tag e identica-se cada uma delas com os atributos id e class. Observe que agora o cdigo est livre no s da tabela, mas tambm de todos os elementos de formatao de fonte (<font>). At este momento, nenhuma formatao foi dada ao cdigo do exemplo. Contudo, a maneira como o contedo foi estruturado aqui nos permitir criar regras de CSS bastante consistentes e assim poderemos construir o layout. Como ainda no criamos a folha de estilo para a pgina do exemplo, ela seria renderizada no browser da seguinte forma:
Figura 3. Pgina HTML sem a formatao de folha de estilos
Criar as regras CSS para este cdigo tambm no uma tarefa de grande complexidade, mas exige um mnimo
46
de conhecimento sobre como manipular folhas de estilo. Neste ponto, a primeira coisa que voc deve fazer criar um link entre a folha de estilo e seu cdigo HTML. Isto feito dentro da declarao <head> do seu documento. Assim:
<head> ... <link href=estilo.css rel=stylesheet type=text/css media=screen /> </head>
Estilo.css seu arquivo que dene as regras que sero aplicadas ao documento. Mas estas regras s sero aplicadas para um certo tipo de mdia, que denido no atributo media. Neste caso, esta folha de estilo serve somente para monitores (screen). Existem outras medias para as quais voc tambm pode criar folhas de estilo. As mais comuns so: screen, print e handheld. Para o nosso exemplo, que queremos construir um layout de 3 colunas, a folha de estilo poderia ser denida da seguinte forma:
47
h1{ font-family: Verdana, Arial, Helvetica, sansserif; font-size: 2em; font-weight: bold; } #geral{ width:710px; text-align: center; position: absolute; left: 50%; margin-left: -355px; } #esquerda, #direita { width:150px; } .coluna { font-family: Verdana, Arial, Helvetica, sansserif; font-size: 70%; text-align: justify; oat:left; margin:2.5px; padding:2.5px; }
Toda regra CSS formada por um Seletor, propriedades e valores. Propriedades e valores sempre cam entre as chaves e o seletor a parte que dene em qual elemento esta regra ser aplicada. Por exemplo, a primeira regra do cdigo CSS descrito anteriormente ser aplicado a qualquer elemento h1 existente no HTML e as alteraes que h1 ir sofrer se encontram entre as chaves: mudana de tipo, tamanho e lar48
gura de fonte. E as trs colunas do layout? Quem vai denir isso no CSS de exemplo? exatamente a ltima regra do nosso exemplo, que ser aplicada a qualquer elemento que pertena a classe coluna. O ponto (.) antes da palavra coluna indica que esta palavra est se referindo a uma classe. Se voc olhar novamente o cdigo HTML, vai perceber que existem 3 elementos <div> que pertencem a esta classe coluna. Esta regra se aplica exatamente a esses trs elementos. E, mais precisamente, a regra oat:left que faz com que os trs elementos <div> se posicionem um ao lado do outro, criando assim o layout de 3 colunas. A Web est repleta de informaes que orientam como os desenvolvedores podem utilizar HTML e CSS em conjunto. Um timo comeo para quem deseja aprender mais sobre o assunto fazer uma pesquisa na Web por Tableless. Contudo, no captulo 7 voc encontrar uma lista de timos artigos disponveis na Web sobre o esta metodologia.
4.
Trabalhando com medidas relativas
Quando trabalhamos com CSS, temos disposio vrias unidades de medidas: pixel, pontos, centmetro, milmetro, ems, porcentagem, dentre outras. Essas unidades dividem-se em absolutas ou relativas.
49
Unidades Absolutas Polegadas (in) Centmetros (cm) Milmetros (mm) Pontos (pt) Picas (pc)
Unidades Relativas Pixel (px) Ems (em) Ex (ex) Porcentagem (%)
Qualquer elemento que possuir alguma de suas dimenses declarada como relativa sempre vai tomar como referncia as dimenses de algum outro elemento, dependendo da unidade de medida. No caso da unidade em, usa-se como referncia o tamanho da fonte do seletor em que ela foi declarada. Por exemplo, observe a seguinte regra CSS: P { Font-size:14px; Line-heigth: 1em; }
Declaramos para a altura da linha do pargrafo (lineheigth) um valor relativo (1 em). Para calcular quanto este valor em pixel, basta vericar qual o tamanho da fonte declarada para este mesmo seletor (14px) e multiplica-lo pelo valor relativo declarado (14 * 1 = 14px). Assim, o valor em pixels da altura da linha para a regra acima ser 14. Observe
50
que, se line-heigth fosse declarado com o valor 0.5em, a altura da linha mediria a metade de font-size. Caso a regra no dena qual o valor de font-size, ento o valor que seria tomado como referncia seria o fontsize do elemento pai. Caso esta regra se rera ao elemento HTML ou BODY, o valor tomado por referncia o valor de font-size padro do navegador. Muitos autores classicam a medida pixel como absoluta. Isto acontece porque pixel s depende da resoluo de tela e do tipo de sistema operacional, ou seja, a no ser que o usurio troque sua resoluo de tela ou seu sistema operacional, ele no ter controle sobre os elementos declarados com px. Para ilustrar, considere o elemento pargrafo (P) do exemplo anterior que foi declarado com tamanho de fonte 14px. Se o usurio estiver utilizando o Internet Explorer para navegar nesta pgina e tentar aumentar o tamanho do texto3, ele no vai conseguir. Quando levamos em considerao a acessibilidade de uma pgina, trabalhar com medidas relativas muito mais apropriado. So as medidas relativas que nos permite criar layouts de pgina totalmente elsticos, podendo se adaptar a tamanhos de tela variados e garantindo ao usurio uma experincia confortvel ao visualizar o contedo de uma pgina.
3 maior Podemos fazer isso clicando no menu exibir > tamanho do texto >
51
5.
Pensando na estrutura da pgina
Se preocupar com a organizao e estrutura da pgina de Web uma obrigao do bom projetista. Ele deve pensar em como organizar o contedo na pgina de maneira que esta faa sentido, mesmo quando o usurio no possa utilizar CSS. Lembre-se que: 1) 2) Nem todo usurio navega utilizando o mouse. Nem todo usurio pode ver sua pgina.
Pensar na estrutura da pgina como criar uma planta-baixa da sua pgina. Voc deve planejar o lugar onde cada elemento vai aparecer e manter essa informao consistente em todo o site. 1) 2) na? 3) Onde vou exibir o contedo propriamente dito? 4) Vou precisar de uma navegao local? Onde vou colocar? Todas essas indagaes e outras adicionais devem ser respondidas no momento em que se planeja como as informaes e links vo ser dispostos na pgina. Qualquer que seja a deciso tomada sobre esta organizao, sua pgina sempre deve permitir uma navegao pelo teclado sem nenhuma restrio.
52
Onde vai car o sistema de navegao? Que informaes vo aparecer no topo da pgi-
Deve-se levar em considerao que, quando se navega pelo teclado, o deslocamento feito atravs da tecla TAB e das teclas de direo, sempre de cima para baixo e da esquerda para a direita. No aconselhvel alterar este uxo de deslocamento por um motivo simples: pessoas com decincia visual j esperam que o deslocamento ocorra neste sentido. Leve em considerao que pessoas cegas no podem ver como sua pgina est organizada. A gura abaixo uma demonstrao de como uma pgina pode ser estruturada. Para este exemplo foram levados em considerao as reas: topo, navegao global, navegao local, contedo e rodap.
Figura 4. Estrutura bsica de um site
53
Algumas vezes, por algum motivo, os links ou elementos de formulrio em seu HTML so escritos em uma ordem que no segue uma seqncia lgica. Nestes casos, use o atributo tabindex para denir a ordem de acesso. O exemplo abaixo demonstra como podemos fazer isto:
<a TABINDEX=10 href=pgina.html title=Alguma pgina>ir para pgina</a>
Descrio de pgina
Quando voc entra num site pela primeira vez, quanto tempo voc leva pra aprender a navegar por este site? Em quanto tempo voc consegue encontrar o que est procurando? Se o site estiver bem organizado, bastam alguns segundos. Acontece desta forma por que quando entramos em um site pela primeira vez, a primeira coisa que fazemos dar uma olhada geral, procurando por alguma coisa que nos d vontade de clicar: pode ser um link de uma notcia, pode ser uma opo de menu, ou pode ser um formulrio de pesquisa no site. Isto depende do perl de cada usurio. O fato que sempre estamos procurando por algo e, quando fazemos isso, contamos com um aliado fortssimo: a nossa viso. Atravs da nossa viso temos acesso pgina
54
inteira, mesmo antes clicar em qualquer coisa. Se pudssemos perceber como as informaes que so transmitidas pela nossa viso so processadas pelo nosso crebro, poderia ser algo assim: Bom, deixe-me ver... Ali est a logomarca, legal. Mas onde ser que eles colocaram a cesso de CDs? Ser que aqui? No deve ser... Este site no tem busca? Pode ser ali. Ser que d pra clicar ali? Ah, olha ali o menu...aqui! Pronto! Achei! No d pra negar, a viso realmente ajuda muito em algumas tarefas. Mas nem todas as pessoas podem contar com ela. E o que acontece com pessoas que no podem enxergar? Vamos imaginar o mesmo cenrio descrito anteriormente, s que agora o usurio cego. Quer ter uma idia de como uma pessoa se sente numa situao destas? Ento faa o seguinte: faa uma busca na internet, pode ser qualquer coisa. Depois clique em qualquer um dos links que veio no resultado, mas tem que ser um site que voc nunca tenha visitado antes. Desligue o monitor antes que a pgina carregue e tente navegar. A sensao de que camos de pra-quedas em algum lugar completamente desconhecido, totalmente no escuro. Nestes casos, existem vrias formas de trazer alguma orientao. Dependendo do site, se ele for simples, com poucas opes, um mapa do site j seria suciente. Mas quando o site de uma complexidade considervel, ento uma soluo
55
seria criar uma pgina com uma descrio textual de como o site est organizado. Voc pode aproveitar e colocar tambm nesta pgina uma lista de atalhos para diversos links no seu site.
6.
Tabelas
Em 1994, o elemento TABLE entrava denitivamente na especicao do HTML, cuja verso na poca era a 2.0. O TABLE foi introduzido para atender uma demanda por uma representao especca para dados tabulados ou cruzamento de dados, tipo: tabela de preos, tabela de medidas, etc. Ningum imaginava, at ento, que os desenvolvedores iriam descobrir uma outra funo para este elemento. Eles descobriram que as tabelas tambm poderiam controlar o layout e a apresentao das informaes em uma pgina da Web. A Web ento, entra numa nova fase, repleta de sites com layout de alta complexidade e recheadas de tabelas (e tabelas dentro de tabelas) que no passavam nenhuma informao, s estavam l para ajustar a apresentao da pgina. O cdigo HTML passou ento a cumprir duas misses: disponibilizar contedo e ajustar a apresentao do documento. Contudo, o uso de tabelas para construir o layout pode causar srios problemas acessibilidade. Com toda essa mistura entre apresentao e contedo, muitas vezes um programa leitor de tela ca impossibilitado de acessar o
56
contedo, comprometendo o amplo entendimento da informao daquela pgina. Na verdade as tabelas, quer sejam usadas para dados tabulares ou para construo de layout, se no forem bem estruturadas, os leitores de tela acabam fazendo uma grande confuso ao ler os dados para os seus usurios, tornando a tabela impossvel de ser entendida. No fcil criar tabelas totalmente acessveis por que depende de uma srie de coisas. Primeiro, depende da prpria destreza do desenvolvedor para utilizar o mximo de recursos disponveis para torn-la acessvel. Depende tambm da prpria aplicao que l a tela, que deve possuir a capacidade de acessar os dados da tabela de diversas formas. Quanto mais complexa for a tabela, mais cuidado o desenvolvedor dever ter ao construir a tabela. Um bom ponto de partida compreender como um leitor de tela l a tabela. Na maioria dos casos, os leitores possuem uma srie de atalhos pelo teclado que permitem o acesso a uma linha ou a uma clula. Uma observao importante que o leitor de tela deve ser capaz de associar o cabealho de uma linha ou coluna clula que est sendo lida. Sem isso, impossvel para um deciente visual entender de que se trata a informao que est sendo lida.
Como um leitor de tela deve ler uma tabela:

Para comear, um leitor de tela no l (literalmente)
57
a tela, como o nome sugere. Os leitores de tela vo direto para o cdigo HTML dos documentos, por que, para eles o que interessa realmente extrair o contedo que est l. Pouco importa para o software leitor como aquelas informaes esto sendo diagramadas na tela. No leitor de tela Jaws, que um dos mais famosos, a primeira coisa que lida numa tabela seu ttulo, depois lido o sumrio, se estiver disponvel. O terceiro passo posicionar o cursor de leitura na primeira clula da tabela. Aps isso, o leitor de tela aguarda os comandos de navegao na tabela para continuar a leitura, que vai depender do desejo do usurio: l a linha, l somente a clula atual, l a clula com seu cabealho correspondente, etc. Para car mais claro, observe a tabela da gura abaixo. uma tabela simples de ser entendida e consegue transmitir sem nenhum problema as informaes que nela esto contidas. No h nenhuma diculdade, por exemplo, em descobrir que o preo do prato individual do yakisoba custa R$ 11,00.
Figura 5. Exemplo de tabela
58
O cdigo HTML para esta tabela seria assim:
<table border=1 summary=Tabela com um nvel de cabealho horizontal> <caption>Tabela de preos dos pratos do restaurante chins</caption> <tr> <th id=nomeprato>Nome do Prato</th> <th id=individual>Valor Individual</th> <th id=duplo>Valor duplo</th> </tr> <tr> <td headers=nomeprato>Yakisoba</td> <td headers=individual>11,00</td> <td headers=duplo>20,00</td> </tr> <tr> <td headers=nomeprato>Yakimeshi</td> <td headers=individual>10,00</td> <td headers=duplo>18,00</td> </tr> <tr> <td headers=nomeprato>Yakibifum</td> <td headers=individual>18,00</td> <td headers=duplo>35,00</td> </tr> </table>
Observe que no cdigo desta tabela foram utilizados algumas tags e atributos de tabela do HTML que so pouco conhecidos: summary, caption, th e headers. Vamos descreve-las agora.
59
Summary um atributo de table que no aparece na tela, mas lido pelo software leitor. Ele serve para que o desenvolvedor possa descrever alguma particularidade da tabela. Caption Deve ser declarado imediatamente abaixo da tag <table>. Fornece um ttulo para a tabela e exibido na tela logo acima da tabela. Tambm lido pelo leitor de tela. Th Marca uma clula de cabealho. muito importante que o cabealho de uma tabela seja corretamente marcado no HTML, para que o leitor de tela reconhea quais clulas so dados e quais so cabealho. Headers este atributo de <td> (clula de dado) vincula uma determinada clula a um cabealho existente. Em headers declarado o id do cabealho correspondente. Existem outras maneiras de montar esta mesma tabela e chegar a resultados parecidos ao que chegamos aqui. De qualquer forma, o mais importante que a tabela sempre seja construda de maneira que permita ao software leitor de tela o mximo de acesso aos dados da tabela. Assim, para que o desenvolvedor crie tabelas bem estruturadas necessrio: 1) CAPTION Fornecer o ttulo da tabela atravs do elemento
2) Para melhor compreenso de tabelas, fornecer um resumo informando o propsito da tabela atravs do
60
atributo SUMMARY no elemento TABLE. Vale salientar que o resumo no ca visvel na pgina, mas o leitor de tela o descreve. 3) Utilizar TH para identicar os cabealhos de linhas e colunas e TD para identicar as clulas com dados. 4) Associar, de alguma forma, os dados TD aos seus respectivos cabealhos TH.
7.
Formulrios
Os formulrios HTML so estruturas que permitem que usurios submetam dados a uma pgina. uma das formas mais simples e ecientes de interagir com o usurio. Por este motivo, o formulrio acabou se transformando numa matria de extrema importncia no HTML. O Formulrio composto basicamente por trs partes: O Container A entrada de dados Os botes
Os controles de entrada de dados e botes cam dentro do container do formulrio, que denido no HTML atravs da tag <form>. O elemento <form> possui atributos especcos que informam para o navegador para onde e de que forma devem ser enviados os dados digitados no formulrio. Os controles que permitem a entrada de dados va-
61
riam, de acordo com o tipo de dado. Os elementos bsicos que permitem a entrada de dados so: INPUT: que especica vrios tipos de campos como text, submit, button e radio. SELECT: Utilizado para listas selecionveis (como um menu). TEXTAREA: campo de texto multi-linha, como observaes e comentrios; A gura 6 ilustra um formulrio com controles de entrada de texto, radio (com as opes masculino e feminino) e um boto para envio das informaes.
Figura 6. Exemplo de Formulrio
Uma coisa que a maioria dos desenvolvedores desconhece que existe uma ordem certa nos navegadores e leitores de tela para exibio e leitura dos elementos de um formulrio. Por exemplo, quando um navegador encontra um controle <input type= text>, ele espera que o rtulo para este controle esteja antes do controle. J para os campos do tipo <input type= radio>, o navegador espera encontrar
62
o rtulo depois do campo. A tabela abaixo mostra uma relao entre o controle e seu rtulo. Posio do Rtulo Antes
Controle <input type= text>
Exemplo Nome:<br /> <input type=text name=nome /> Senha:<br/> <input type=password name=senha /> <input type=radio name=estcivil value=1 />casado<br /> <input type=checkbox name=chkassinar value=Assinar /> Assinar a revista Tratamento<br /> <select name=tratamento> <option>Sr.</option> ... </select>
<input type= password> <input type= radio>
Antes
Depois
<input type= chekbox>
Depois
Select
Antes
63
Controle Textarea
Posio do Rtulo antes
Exemplo Comentrios<br /> <textarea name=txtComments></ textarea>
Rtulos so sempre importantes, tanto para navegadores comuns quanto para leitores de tela. So os rtulos que identicam o que deve ser preenchido em cada campo do formulrio e, em muitos casos, informam ao usurio se o preenchimento de determinado campo obrigatrio. Por conta disso, a melhor forma de promover acessibilidade em formulrios HTML fortalecendo este vnculo entre rtulo e campo de preenchimento de dados. Para isto, utilizamos o elemento <label> do HTML. Para entendermos seu uso, vamos tomar como exemplo o formulrio da gura X. O cdigo HTML para o primeiro campo seria assim: <LABEL for=primeironome>Primeiro nome: <INPUT type=text id=primeironome> </LABEL> O atributo FOR do elemento LABEL associa explicitamente um rtulo a um controle. O valor atribudo a FOR deve ser o mesmo valor do atributo ID do controle associado. Neste exemplo, o elemento LABEL est associado ao elemento INPUT atravs do atributo FOR de LABEL que possui o mesmo
64
valor do atributo ID do elemento INPUT. Existem outros elementos do HTML que auxiliam na construo de um formulrio bem organizado e acessvel. Por exemplo, os elementos: <eldset> - pode agrupar um conjunto de controles de formulrio de acordo com a natureza dos dados. Por exemplo: dados pessoais e dados prossionais. <legend> - Fornece um ttulo para um determinado eldset. O desenvolvedor deve utiliz-los sempre que achar necessrio e conveniente, de forma a facilitar o entendimento das solicitaes do formulrio.
8.
Acrnimos e Abreviaes
Muita gente desconhece, mas existem dois elementos do HTML criados para serem usados em acrnimos e abreviaes. Estes elementos executam dois papis importantes: 1) Prov uma denio dos termos atravs do atributo title, como por exemplo: <acronym title=Estados Unidos da Amrica>EUA</ acronym> <abbr title=Cascading style sheets>CSS</abbr>
Esta funo, alm de ajudar os usurios leitores de
65
tela que podem desconhecer o termo, tambm pode ser bastante til para sistemas de buscas. 2) Providencia uma forma de softwares leitores de tela determinarem se o termo deve ser pronunciado ou soletrado. Isso pode ser feito de duas maneiras: ou voc deixa que o software leitor de tela decida se deve ler ou soletrar, dependendo de qual elemento foi utilizado, ou ento voc dene isso usando CSS, como nas regras abaixo: abbr {speak:spell-out;} acronym {speak:normal;}
Como a nalidade aqui assegurar que um documento seja acessvel da melhor maneira possvel e para um maior nmero de pessoas, ento muito importante que voc possa compreender quando deve usar abbr e quando deve usar acronym. Uma abreviao uma forma encurtada de uma palavra ou frase utilizada para representar a forma completa. Por exemplo: - Sr. a abreviao de senhor - Av. abreviao de avenida. A forma mais comum de abreviao geralmente um conjunto de letras seguidas de um ponto. Porm existem outros tipos diferentes de abreviao:
66
Inicialismo so aquelas formadas pela primeira letra de cada palavra do termo representado. Quem trabalha com informtica j deve estar bastante familiarizado com este tipo de abreviao. Por exemplo: HTML, CSS, EUA Contrao muito comum no idioma ingls. Tanto pode ser uma forma encurtada de uma palavra terminando com a ltima letra desta palavra, como tambm pode ser duas palavras encurtadas juntas, mas separadas por um apstrofo. Exemplos: - Pagto Abreviao de pagamento - Cant Abreviao de can not em ingls - Dgua abreviao de de gua. Acronismo um tipo de abreviao cujo conjunto de letras que formam o acrnimo pode ser pronunciado, como se fosse uma palavra. Por exemplo: - NASA National Aeronautics and Space Administration - OTAN Organizao do Tratado do Atlntico Norte. No existe no HTML uma forma correta de se marcar uma contrao. De qualquer forma, como seu uso geralmente muito comum, dicilmente uma contrao ir merecer uma marcao especial. No entanto deve-se marcar os demais tipos de abreviaes. Somente utilize a marcao <acronym> para acrnimos.
67
Tcnicas para aplicao de acessibilidade

J algum tempo nota-se uma preocupao crescente por parte da sociedade em geral em tornar o acesso a lugares e a informao ao menos um pouco melhor do que eram antes. Na la de um banco pode-se perceber no cho, uma trilha de um material emborrachado formado por linhas e por pontos. Depois descobre-se que era um tipo de assoalho especial para ajudar na orientao de decientes visuais. No mesmo dia, no caixa automtico, havia uma entrada para fones de ouvido e o teclado numrico tinha botes em alto relevo. As propagandas polticas agora sempre vm acompanhadas por legenda simultnea das falas e narraes. Em vrios pontos da cidade percebi rampas para acesso s caladas.
Captulo 4 - Tcnicas para aplicao de acessibilidade
Todos estes recursos que so instalados pela cidade e facilitam o acesso de pessoas decientes so chamados de dispositivos de acessibilidade. Na verdade, o conceito de dispositivos de acessibilidade ainda mais abrangente. Tudo que construdo ou fabricado com a inteno de melhorar, facilitar ou promover acesso a alguma coisa ou algum lugar um dispositivo de acessibilidade. Desta forma a lista de dispositivos de acessibilidade aumenta consideravelmente, e pode ir de uma simples bengala a uma passarela construda sobre uma avenida. Na Web tambm podemos construir dispositivos de acessibilidade que facilitam o acesso de pessoas decientes. Os recursos que vamos apresentar neste captulo so tcnicas de acessibilidade que se forem bem aplicadas podem fazer diferena quando um dado usurio tenta acessar o contedo de algum site. Uma coisa importante sobre este captulo que ele vai exigir de voc um pouco de conhecimento sobre CSS, HTML, Javascript e Tableless. Uma vez que nosso foco aqui estudarmos as tcnicas de acessibilidade existentes e que permitem promover acessibilidade atravs da Web, no iremos aqui nos prender a detalhes sobre estas linguagens e metodologia. Contudo, voc encontrar no captulo 5 uma lista de artigos, sites e
69
material para estudo.
1.
Teclas de Atalho
Utilizar tecla de atalho a forma mais rpida de acessar algumas partes de uma pgina. De um modo geral os usurios conhecem teclas de atalho, e muitas vezes as utiliza, mesmo sem perceber que esto fazendo isso. Duas das combinaes de teclas mais comuns so as famosas combinaes CONTROL + C (comando para copiar) e CONTROL + V (comando para colar). No importa em que contexto elas so aplicadas, mas teclas de atalho sempre tm um objetivo em comum: permitir que o usurio acesse pelo teclado os comandos mais importantes de um determinado sistema. Muita gente no sabe, mas possvel colocar em pginas da Web comandos que permitam acesso rpido a um determinado recurso. Utilizando-se o atributo accesskey, voc consegue associar uma determinada letra ou nmero a um outro elemento da pgina, como no exemplo abaixo:
<a href= pagina.html accesskey= 1>Pgina</a> Neste exemplo ns conguramos a tecla 1 para ser o atalho do link. Para o usurio acessar este link atravs da tecla de atalho, e se ele estiver utilizando o Internet Explorer, por exemplo, ele ter que digitar a combinao ALT +1.
70
Os elementos HTML que do suporte ao atributo accesskey so todos os elementos do HTML que geralmente so associados a um evento, como o click do mouse ou o enter do teclado. Ou seja, voc pode declarar um accesskey para os seguintes elementos: a, rea, textarea, legend, label, input e button. Os elementos Label e Legend, apesar de normalmente no serem associados diretamente a eventos do mouse ou teclado, tambm fazem parte desta lista. Isto acontece porque eles so elementos intimamente ligados a controles de entrada de dados, como o input. Semanticamente, no haveria sentido em utilizar esses elementos em um documento HTML se eles no estiverem rotulando uma entrada de dados ou um conjunto de entradas. A utilizao de teclas de atalho um recurso bastante interessante e amplia grandemente as chances de sucesso de um usurio que utiliza o teclado para navegar. Contudo, de nada adianta criar teclas de atalho se o usurio no souber da existncia delas. Portanto, divulgar suas teclas de atalho to importante quanto cria-las. Uma maneira de divulgar suas teclas de atalho em um documento de descrio do site, se ele tiver um, ou ento no mapa do site. Tambm possvel divulga-las diretamente nas pginas onde essas teclas de atalho aparecem. Cada desenvolvedor pode encontrar uma forma criativa de fazer esta divulgao, procurando preservar o layout da pgina.
71
Uma desvantagem do uso das teclas de atalho que cada navegador da web utiliza uma combinao de tecla diferente para o mesmo accesskey. Desta forma, supondo que voc criou uma tecla de atalho para um link utilizando a tecla C (accesskey = c). Dependendo do navegador utilizado pelo usurio ele teria que digitar uma combinao especca de teclas. Assim: Combinao de Teclas ALT + C CTRL + C ALT + SHIFT + C CTRL + SHIFT + C CTRL + C CTRL + C
Navegador Internet Explorer (Windows) Internet Explorer (MAC) Firefox, Mozilla, Netscape (Windows) Firefox, Mozilla, Netscape (Mac) Safari, Omniweb (Mac) Konqueror (Linux)
2.
Skip links
Os Skip Links, tambm conhecido como Jump Links, so links para outra parte da mesma pgina. A sua funo possibilitar que os usurios possam navegar pela pgina saltando algumas partes da mesma. Por exemplo, vamos supor que voc quer chegar a uma determinada parte de uma pgina onde se encontra um
72
formulrio. Mas para chegar ao formulrio, usando somente o teclado, voc ter que passar primeiro por alguns links do topo da pgina e depois pela navegao para s ento chegar ao formulrio. A tcnica do skip link justamente para evitar este tipo de problema. Utilizando um skip link, voc poderia saltar direto para o formulrio. Hoje em dia, comum em sites que se preocupam com acessibilidade encontrarmos no topo das pginas um link com o texto Ir para o contedo, Pular navegao ou algo parecido. Estes so skip links em ao! muito simples colocar skip links em uma pgina, principalmente se esta pgina foi construda utilizando-se separao de camadas. A nica coisa que vamos precisar para construir estes links saber para que parte da pgina o skip link vai apontar. Por exemplo, se no cdigo HTML se est utilizando a seguinte marcao para indicar a entrada de contedo: <div id=conteudo>....</div> Ento pode-se criar no topo da pgina um skip link para o contedo atravs do seguinte cdigo: <a href=#conteudo title=Skip Link para o Contedo> Ir para o Contedo </a>
73
O mais importante nesta tcnica compreender que o skip link serve para pular alguma coisa. De nada adianta colocar um link para pular a navegao depois da navegao. por isso que os skip links so geralmente os primeiros links da pgina. Mas nada impede que um skip link seja colocado no meio do contedo para pular, por exemplo, uma lista. No site acessodigital.net podemos encontrar um exemplo bastante claro do uso de skip links. Neste site, este dispositivo est localizado no topo direita, conforme a gura abaixo:
Figura 7. Exemplo de skip links
Notou o nmero ao lado do texto? Isto uma indicao visual de que estes links podem ser acessados diretamente atravs de combinaes de teclas (accesskey). Isto mostra que perfeitamente possvel combinar skip links com o atributo accesskey. Para o caso desta pgina em particular, no primeiro skip link seria denido da seguinte forma:
<a href=#conteudo accesskey=1>pular para o contedo [1]</a>
74
A princpio, skip links eram sempre usados de forma visvel, ou seja, os links sempre faziam parte da apresentao da pgina. Contudo, como os skip links acabam ocupando espao na pgina, alguns desenvolvedores no gostavam de exibi-los. Foi assim que surgiu a tcnica de esconder os skips links atravs de CSS, utilizando a regra display:none. A idia era, j que quem utiliza skip links so usurios de leitores de tela, ento omitimos o skip link visualmente, mas ele permanece no cdigo HTML para que o leitor de telas possa acess-lo. Contudo esta tcnica no se mostrou muito boa por dois motivos. Primeiro porque um dos leitores de tela mais utilizado, o Jaws, estava omitindo a leitura de qualquer elemento do cdigo que tivesse a declarao display:none em sua regra de apresentao, o que fazia com que o skip link no fosse lido. Alm disso, no so s usurios de programas leitores de tela que utilizam skip links. Na verdade, qualquer usurio que navega pelo teclado pode se beneciar deste dispositivo. Uma outra tcnica desenvolvida para skip links conhecida como mtodo off-left e consiste em utilizar a seguinte regra CSS para o skip link: .off-left{ Position:absolute; Left:2000px; }
75
Esta regra no impede que os navegadores e leitores de tela carreguem o link, porm ele tambm no vai aparecer na tela por que o link acaba sendo jogado para um ponto fora da tela. como se a tela do computador fosse um palco e o skip link tivesse sido colocado nos bastidores. O mtodo Off-Left resolve o primeiro problema (o do Jaws no acessando o link), mas continua prejudicando a acessibilidade dos demais usurios de teclado. Por m, uma outra metodologia foi desenvolvida com a inteso de solucionar os dois problemas apontados. Este mtodo se parece bastante com o Off-Left, mas com uma diferena: a medida que o usurio vai apertando TAB no teclado, as opes de skip links vo aparecendo na tela. Dessa forma, ora os links esto escondidos, ora eles esto na tela. Este mtodo foi batizado de skip link off-screen. Implementar este mtodo mais fcil do que parece. A primeira coisa a se fazer aqui criar uma lista com todos os skip links. Algo como: <ul class=off-left> <li><a href=#conteudo>Ir para contedo</ a></li> ... </ul> O restante ser controlado atravs de regras CSS:
76
1. Primeiro, a tag <ul> vai receber a classe offleft da tcnica anterior para sair de cena; 2. Segundo, a tag <a> receber uma regra sobre seu posicionamento que ser absoluto. Esta regra importante para que possamos ter um maior controle no posicionamento dos links. a { position:absolute; }
3. Depois, vamos criar para as tags <a>, uma pseudo-classe que ir descrever o comportamento de cada link quando receberem foco pelo teclado. Esta regra varia, de acordo com o navegador utilizado pelo usurio. Por exemplo, para funcionar com Internet Explorer, esta regra deve ser: a:active{ left: 20100px; }
Para a maioria dos outros navegadores, a regra para fazer a mesma coisa : a:focus{ left: 20100px; }
Voc tambm pode criar uma regra mista, combinan77
do a duas opes: a:active, a:focus{ left: 20100px; }
Voc pode encontrar esta tcnica aplicada a vrios sites na internet. Na imagem abaixo, por exemplo, esta tcnica aplicada ao site da Unilever. Observe que, atravs do CSS, voc tem o controle total de onde e como os skip links vo aparecer.
Figura 8. Mtodo Off-screen
Existe uma preocupao quanto a usabilidade do site que utiliza o mtodo off-screen para controle de apresentao de skip links. Segundo alguns especialistas em usabilidade, no existe neste mtodo clareza suciente para que um visitante perceba visualmente que o site possui skip links e, por conta disso, o visitante acaba no utilizando os links. Apesar disto, este mtodo bastante interessante e, sendo bem implementado e at combinado com outros dispositivos de acessibilidade, pode dar excelentes resultados.
78
3.
Controle do tamanho da letra
Nem sempre o tamanho da letra utilizado no site adequado para a viso de quem o visita. Por isso muito interessante para a acessibilidade do site que este tamanho de letra seja congurvel pelo visitante. Claro que sempre existe a possibilidade do visitante utilizar o controle do prprio navegador para realizar esta tarefa, mas se o site no tiver um layout adequado , esses controles podem acabar distorcendo a apresentao do site. Uma forma melhor de controlar isto fornecendo no prprio site a opo de aumentar ou diminuir o tamanho da letra. Este recurso oferecido usando dois links ou duas imagens representando botes que, quando acionados, fazem uma chamada a uma funo Javascript. Esta funo percorre todo o documento e aumenta (ou diminui) o tamanho da letra dos campos informados.
Figura 9. Exemplo de controle do tamanho de letra
A vantagem em utilizar esta tcnica que ela permite que desenvolvedor do site mantenha o controle sobre a apresentao. O desenvolvedor controla quais partes do layout
79
podem ter o texto ajustado e o quanto a letra pode aumentar ou diminuir. A primeira coisa que fazemos no cdigo Javascript denir todos os tamanhos que podero ser utilizados no site em um vetor. Desta forma, voc pode controlar exatamente quais tamanhos de texto so permitidos. var tamanhos = new Array( 9px,10px,11px, 12px,13px,14px,15px ); Outra denio importante neste momento o tamanho inicial da letra, o primeiro tamanho exibido na tela. var tamanhoInicial = 2; Note que a varivel tamanhoInicial no um valor pertencente ao vetor tamanhos, e sim um ndice desse vetor. Isso quer dizer que, quando denimos tamanhoInicial = 2, na verdade queremos dizer que o primeiro tamanho de letra 11px, j que no Javascript a primeira posio de um vetor zero. Iniciadas essas duas variveis, o restante do cdigo uma funo que recebe como parmetros o id do elemento que ter o tamanho das letras alterado. Esta funo tambm receber um valor, que sempre ser +1 ou -1, dependendo da escolha do visitante.
80
function mudaTamanho(idName, valor){ tamanho = tamanhoInicial + valor; if (tamanho < 0){ tamanho = 0; } if (tamanho > 6){ tamanho = 6; } document.getElementById(idName).style.fontSize = tamanhos[tamanho]; }
Nesta funo, a varivel responsvel pela mudana do tamanho tamanho, que inicialmente recebe a soma do tamanho inicial com o valor passado por parmetro. Logo depois feito uma vericao, para evitar que tamanho extrapole os valores permitidos. Em seguida, a varivel tamanho aplicada ao tamanho da letra do elemento passado por parmetro (idName). Para usar esta funo, basta criar uma chamada onde os links de alterao de tamanho aparecem. Por exemplo, os links poderiam ser escritos desta forma:
<a href=javascript:mudaTamanho(texto, +1);>[+]</a> <a href=javascript:mudaTamanho(texto, -1);>[-]</a>
81
Contudo, existe um grave problema quanto ao uso de chamadas a funes Javascript dentro de links. O que acontece quando temos no cdigo HTML algo do tipo <a href=ja vascript:mudaTamanho(texto, +1);>[+]</a>, e o browser no tiver suporte a javascript ativado? Na verdade, no acontece nada! Nem o que se esperava que acontecesse, que neste caso, era aumentar a letra. O que ocorre nesta situao que a falta de suporte a Javascript est impedindo o bom funcionamento da pgina da Web e bloqueando o acesso a algum recurso. Tal problema conhecido como Javascript obstrutivo. Ns podemos fazer algumas alteraes na chamada da funo javascript mudaTamanho() para permitir uso no obstrutivo desta funo. Uma forma de solucionar o problema criar uma funo que manipule eventos relacionados aos links que aumentam ou diminuem o tamanho da letra1. Desta forma, utilizamos a seguinte funo Javascript: function manipulaEvento(){ var linkAumenta = document. getElementById(aumenta);
Bruno Torres chama esta manipulao de elementos HTML via Javascript
de Camada de Comportamento. Tal camada responsvel por controlar eventos depois que o cdigo HTML (ou XHTML ou XML) j tiver sido renderizado. Leia mais em: http://www.obasicodaweb.com/padroes-web-desenvolvimento-em-camadas-camada-de-comportamento
82
var linkDiminui = document. getElementById(diminui); linkAumenta.onclick = function(){ mudaTamanho(texto, +1); return false; } linkDiminui.onclick = function(){ mudaTamanho(texto, -1); return false; }
Esta funo capaz de detectar quando algum click de mouse dado sobre um dos dois links, [+] e [-], que esto na pgina da Web. A funo manipulaEvento( ) dispensa a necessidade de uma chamada direta a funo que controla a alterao do tamanho de letra. Desta forma, os links da pgina sero reescritos sem o uso de javascript: <a href=erroJavascript.html id=aumenta>[+]</ a> <a href=erroJavascript.html id=diminui>[-]</ a> Note que, se o browser no tiver suporte a Javascript, uma pgina chamada erroJavascript.html carregada, procurando dar um tratamento adequado para o problema. O prximo passo garantir que o acesso aos links tambm possa ser feito via teclado. Para que voc possa ter
83
uma idia geral da soluo adotada, a funo manipulaEvento( ) foi escrita na ntegra, logo abaixo: function manipulaEvento(){ var linkAumenta = document. getElementById(aumenta); var linkDiminui = document. getElementById(diminui); linkAumenta.onclick = function(){ mudaTamanho(texto, +1); return false; } linkDiminui.onclick = function(){ mudaTamanho(texto, -1); return false; } linkAumenta.onkeypress = function(e){ var keynum; if(window.event){ // para o IE keynum = window.event.keyCode; } else if(e.keyCode){ // Netscape/Firefox/Opera keynum = e.keyCode; } if (keynum == 13) { mudaTamanho2(texto, +1); return false; } } linkDiminui.onkeypress = function(e){ var keynum; if(window.event){ // para o IE
84
keynum = window.event.keyCode; } else if(e.keyCode){ // Netscape/Firefox/ Opera keynum = e.keyCode; } if (keynum == 13) { mudaTamanho2(texto, -1); return false; } } } Para que esta tcnica funcione, ainda falta ajustar um ltimo detalhe: devemos executar a funo de manipulao de evento assim que a pgina seja carregada. Desta forma, estaremos associando os links da pgina aos eventos implementados na funo javascript. <script type=text/javascript> window.onload = manipulaEvento; </script>
4.
Problemas de acessibilidade com CAPTCHA
A palavra CAPTCHA um acnimo da expresso Completely Automated Public Turing test to tell Computers and Humans Apart (Teste de Turing pblico completamente automatizado para diferenciar entre computadores e humanos).
85
Apesar do nome complicado, o uso de CAPTCHA bem comum na Web. Desde grandes portais at blogs pessoais, este recurso utilizado com bastante freqncia.
Figura 10. Exemplos de CAPTCHA
A motivao para o uso de CAPTCHA`s est na necessidade de segurana contra invases de robs. Por exemplo, empresas que oferecem e-mail gratuito na Web como o Google ou Yahoo, precisam garantir que quem est criando uma conta de e-mail realmente um ser humano, e no um programa de computador. Esta distino entre seres humanos e robs feita atravs do teste de Turing, um teste capaz de distinguir entre homens e mquinas, baseado na capacidade cognitiva do ser humano. A gura 10 mostra exemplos de um tipo comum de CAPTCHA, onde o usurio deve identicar as letras que so distorcidas em uma imagem. Apesar de todos os esforos para se criar algoritmos de CAPTCHA cada vez mais difceis de quebrar, j existem muitos casos de robs que conseguiram responder o teste com sucesso. Este o caso do algoritmo do CAPTCHA utilizado pelo Yahoo, o Gimpy, que foi quebrado por um grupo
86
de cientistas atravs de um mtodo denominado por eles de EZ-Gimpy2. Do ponto de vista da acessibilidade, a utilizao do CAPTCHA causa uma srie de problemas. Como a tcnica baseada em reconhecimento visual e, pela sua prpria natureza, no permite que softwares leitores de tela interpretem seu contedo, o uso de CAPTCHA impossibilita o acesso de pessoas com decincia visual ou visibilidade reduzida. O CAPTCHA cria tambm barreiras para outros grupos de pessoas que podem possuir inabilidades na aprendizagem que envolve interpretao de texto. Dependendo do projeto do CAPTCHA aplicado, as falhas podem ser to catastrcas que podem impedir o acesso mesmo de pessoas que no possuem nenhum tipo de decincia. Por exemplo, o uso de 0 (zero) e o (letra o) podem confundir o usurio. Atualmente existe muita discusso sobre este assunto e h uma preocupao por parte de rgos como o W3C, que procuram solucionar este problema. Alguns dispositivos de acessibilidade foram implementados como um recurso auxiliar. O prprio W3C publicou um documento3 com propostas de soluo, porm, at agora nenhuma delas completamente satisfatrias: Uso de testes lgicos do tipo Quanto 1 + 1?
2. Veja em: http://www.cs.sfu.ca/~mori/research/gimpy 3 http://www.w3.org/TR/turingtest/#solutions
87
ou Qual a cor do cu? - esta soluo exige a criao manual destes testes, o que viola um dos princpios do CAPTCHA, a automatizao. Alm disso, algumas pessoas com decincia cognitiva poderiam ter diculdades em responder estes testes. Uso de dados prprios do usurio, como nmero de carto de crdito - A maioria das pessoas no se sentiriam a vontade em fornecer dados pessoais para poder ingressar em um site desconhecido. Trabalhar com operadores humanos - eciente, mas tem um custo muito alto. Alm disso, nem todos os sites podem, por diversas razes, dispor deste tipo de servio. Conrmao atravs de senha enviada por SMS para o celular do usurio - Esta uma idia interessante utilizada pelo Google em alguns casos. Contudo, entram aqui outras complicaes relacionadas a acessibilidade de dispositivos mveis. Sada sonora - esta a alternativa mais bem aceita atualmente. So arquivos de som gerados automaticamente e geralmente possuem distores para dicultar a compreenso da mensagem por robs. Mas existem algumas situaes onde o uso deste dispositivo inecaz. Por exemplo, em ambientes de muito barulho, em computadores sem caixas de som ou sem plugins para seu correto funcionamento, ou utilizao por pessoas surdas. Uma maneira de reduzir as decincias deste mtodo disponibilizar o CAPTCHA por udio junto com o CAPTCHA visual.
88
5.
Breadcrumbs Trail
E l vo eles, Joo e sua irm Maria, sendo levados pela madrasta malvada para serem abandonados dentro da oresta. Mas Joo tinha um plano: para no perder o caminho de volta ele foi deixando pra trs migalhas de po. Se voc conhece esta estria, ento provavelmente voc j sabe o que so breadcrumbs trail. Alis, este dispositivo recebeu este nome justamente por causa deste conto de fadas. Breadcrumbs trail (trilha de migalhas de po) o nome em ingls de uma tcnica que permite ao usurio se localizar dentro de um site, mesmo se ele tenha ido parar em uma pgina interna deste site atravs de um sistema de busca, por exemplo. O formato convencional de um breadcrumb uma linha contendo links separados pelo smbolo >. Cada link indica um local por onde o usurio j passou ou tambm pode indicar uma pgina de um nvel acima, como podemos ver na gura 11.
Figura 11. Exemplo de breadcrumbs
Todo breadcrumb montado de forma a fornecer ao
89
usurio um caminho pelo qual ele pode voltar sem problemas, alm de informar onde o usurio est. Existem trs tipos de breadcrumbs: Breadcrumb de localizao Breadcrumb de caminho Breadcrumb de atributo
Nos breadcrumbs de localizao, as migalhas so organizadas por hierarquia. Algo do tipo: Pgina inicial > Seo > Subseo > pgina atual A gura 12 um exemplo de breadcrumb de localizao aplicado em um site. Breadcrumbs de caminho organizam as migalhas de acordo com o caminho tomado pelo usurio para chegar onde est. Como breadcrumbs de caminho depende da escolha de rota do usurio, essas migalhas so geradas dinamicamente atravs de scripts de programao.
Figura 12. Breadcrumb de localizao
Breadcrumbs de atributo so muito comuns em sites de e-commerce, onde a maioria das pginas so geradas dinamicamente. Sua principal caracterstica que eles no representam toda a pgina, mas atributos dela. Eles mos-
90
tram informaes de caminhos que podem ser seguidos para alcanar um determinado recurso do site.
Figura 13. Breadcrumb de atributo
6.
Menu de Acessibilidade
O menu de acessibilidade uma forma de aglomerar os demais dispositivos de acessibilidade em um nico dispositivo. Funciona como um painel ou barra de acessibilidade. Pensando somente na acessibilidade do site, este no um tem essencial, mas pode ajudar, dependendo do usurio que visita o site. Sua funo simplesmente organizar esteticamente recursos de acessibilidade, tais como: skip links, controle de tamanhos de letra, breadcrumbs, esquemas de cores, etc. O site Acessibilidade Brasil4 nos d um exemplo de um menu de acessibilidade bastante simples, porm funcional. Ele aparece no topo de cada pgina como um painel de links, conforme voc pode ver na gura 14. Um recurso interessante deste painel que ele reconhece automticamente o navegador utilizado pelo visitante e modica a orientao de utilizao das teclas de acesso.
4 http://www.acessobrasil.org.br/
91
Figura 14. Exemplo de menu de acessibilidade
J o site do Instituto Benjamim Constant5 trabalha com um menu de atalhos de navegao estrategicamente localizado logo abaixo da identicao do site. Alm do menu, no topo do site, ainda existem outros recursos importantes, como um campo de busca e um link para a pgina principal. Esses elemento so importantes no s para a acessibilidade, mas para a usabilidade do site em geral. Ainda no site do instituto, um destaque especial para os botes de controle de acessibilidade. Eles servem para controlar o tamanho das letras e o esquema de cor e contraste.
Figura 15. Menu de acessibilidade usando botes
http://www.ibc.gov.br/
92
Alguns projetistas preferem criar um menu de acessibilidade com um pouco mais de complexidade, incluindo a opo de exibir ou ocultar o menu, dependendo da escolha do usurio. Um exemplo o menu de acessibilidade do site do Instituto Ethos6. A princpio, o menu ca oculto, mas quando o usurio clica na guia menu de acessibilidade, ele aparece no topo da pgina, deixando mostra todos os atalhos e botes de acessibilidade.
Figura 16. Menu de acessibilidade do Instituto Ethos
http://www.ethos.org.br/
93
5
Cinto de Utilidades!
Este livro est longe de esgotar completamente toda esta discusso sobre acessibilidade a Web. Com certeza, este um assunto que est amadurecendo e cada vez mais pessoas esto descobrindo o quanto a acessibilidade importante, no s para decientes fsicos, mas para todo tipo de usurio que acessa a Web a partir dos mais variados dispositivos. Este captulo foi escrito especialmente para voc, que tem realmente interesse em por em prtica tudo que foi exposto at este momento. Aqui voc encontrar listas de ferramentas para testar, validar e avaliar seus cdigos HTML e CSS. Encontrar tambm uma lista de artigos importantssimos, escritos por pessoas que realmente sabem do que esto falando. Aproveite e bom estudo!
Captulo 5 - Cinto de Utilidades!
1. Ferramentas de avaliao/validao de acessibilidade

Avaliadores de acessibilidade so ferramentas semiautomticas que analisam se o cdigo HTML est de acordo com as recomendaes de acessibilidade. Examinator - alm de avaliar a acessibilidade do site, ele fornece uma nota, de forma que o desenvolvedor possa examinar como a acessibilidade do site se encontra. [www.acesso.umic.pt/webax/examinator.php] Cynthia Says [http://www.cynthiasays.com/] Wave [http://wave.webaim.org/] A-prompt [http://aprompt.snow.utoronto.ca/] DaSilva - Este um examinador brasileiro, mantido pelo grupo Acessibilidade Brasil. No DaSilva a anlise feita usando as regras de acessibilidade do WCAG e E-MAG [http://www.dasilva.org.br/]
2.
Softwares para avaliao de acessibilidade

TAW3 - Software que analisa a pgina de acordo com a WCAG. o TAW gera um relatrio que mostra os problemas encontrados com sua respectiva descrio, o nmero da linha onde foi detectado o problema de acessibilidade, link para uma pgina que contm a explicao do problema e formas de resolv-lo. [www.tawdis.net/taw3/cms/en]
95
ASES - um software brasileiro, criado pelo eGov para avaliar, simular e corrigir a acessibilidade de sites. Entre outras coisas, avalia acessibilidade, HTML e CSS. [www.governoeletronico.gov.br/acoese-projetos/e-MAG/ases-avaliador-e-simulador-deacessibilidade-sitios] Barra de acessibilidade AIS - mantida pela Vision Australia, uma barra para ser instalada no Internet Explorer e pode fazer validaes de acessibilidade, HTML e CSS e realiza outras tarefas. [www.visionaustralia.org.au/info.aspx?page=614]
3.
Ferramentas validadoras de HTML/CSS
As ferramentas de validao de HTML e CSS avaliam a sintaxe do cdigo HTML e CSS. Existem vrias opes de validadores, que a vontade para escolher o que mais se adequar as suas necessidades.
- Validadores de sintaxe HTML/XHTML

W3C Markup Validation Service - validador ocial do W3C para HTML e XHTML [http://validator. w3.org/] WDG HTML Validator [www.htmlhelp.com/tools/ validator/]
-Validadores de CSS
W3C CSS Validation Service - validador ocial do W3C para CSS. [http://jigsaw.w3.org/css-validator/
96
4.

Softwares leitores de tela

Jaws [www.freedomscientic.com/fs_downloads/ jaws.asp] Virtual Vision - Nacional, fabricado pela Micropower. [www.micropower.com.br/v3/pt/acessibilidade/ index.php] DosVox - Gratuito e em portugus. Produzido pela UFRJ [intervox.nce.ufrj.br/dosvox/] NVDA - Leitor de telas gratuito e de cdigo aberto para Windows. Uma excelente opo para uso e testes. [www.nvda-project.org] Orca - Leitor de tela para linux [live.gnome.org/ Orca].
5.
Complementos de acessibilidade para Firefox

Fangs Screen Reader Emulator - renderiza o contedo de uma pgina simulando um leitor de tela. [addons.mozilla.org/pt-BR/refox/addon/402] TAW3 with a click - Permite vericar rapidamente como anda a acessibilidade do site. [addons.mozilla. org/pt-BR/refox/addon/1158] Web Developer - No uma ferramenta especca de acessibilidade, mas faz validao pela ferramenta CinthiaSays. muito para desenvolvimento Web em geral. [addons.mozilla.org/pt-BR/refox/addon/60]
97
6. Ferramentas que teis para teste e desenvolvimento

Lynx Viewer - simulador de um navegador em modo texto. [www.delorie.com/web/lynxview.html] Google Acessible Search - uma busca do google que prioriza os sites acessveis no resultado da busca. [http://labs.google.com/accessible]
7.
tens de leitura Obrigatria

WCAG 1.0 - No uma leitura fcil, mas importantssima se voc quiser conhecer a fundo este assunto. Voc pode ler, direto do W3C, a verso original em ingls [www.w3.org/TR/WCAG10/], ou pode ler a traduo de Cludia Dias [www.geocities.com/claudiaad/acessibilidade_web.html]. E-MAG - Acessibilidade do Governo Eletrnico, uma cartilha tcnica [www.inclusaodigital.gov.br/inclusao/arquivos/outros/documentos-gerais-referncias/ emag-acessibilidade-de-governo-eletronico-cartilhatecnica-v20.pdf] Cartilha de codicao E-GOV - uma cartilha de boas prticas em codicao XHTML, CSS e JavaScript [www.governoeletronico.gov.br/biblioteca/arquivos/padroes-brasil-e-gov] WCAG Samurai - Traduo de Maurcio Samy Silva [www.maujor.com/wcagsamurai/]
8.
98
tens de leitura recomendada
Acessibilidade web, Usabilidade, Teclado e Leitores de Tela - Marcos Antnio de Queiroz [www.bengalalegal.com/nocoes.php] Como testar a acessibilidade em Websites (parte 1) - Horcio Soares [internativa.com.br/artigo_ acessibilidade_03_06.html] Acessibilidade web: 7 mitos e um equvoco - Lda Spelta [acessodigital.net/art_acessibilidade-web-7mitos-e-um-equivoco.html] O selo no garante acessibilidade - Horcio Soares [internativa.com.br/artigo_acessibilidade_06.html] Seu menu dropdown funciona com o teclado? - Bruno Torres [brunotorres.net/seu-menu-dropdownfunciona-com-o-teclado] Formulrios acessveis prova de spam - traduo de Maurcio Samy Silva [www.maujor.com/tutorial/spam-em-formularios.php] Navegao Via Teclado - Teclas de Atalho (Jaws, IE e FF) - Marcos Antonio de Queiroz [www.acessibilidadelegal.com/13-atalhos.php] Usabilidade de Interfaces e Arquitetura da Informao: Navegao Estrutural - Felipe Memria (o artigo trata sobre breadcrumbs trail) [www.fmemoria. com.br/artigos/nav_estr.pdf] Desenvolvendo AJAX acessvel aos leitores de tela traduo de Maurcio Samy Silva [www.maujor. com/tutorial/ajax-screen-readers.php]
99

Tc3a9cnicas de Acessibilidade Web Jalves Nicc3a1cio

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tc3a9cnicas de Acessibilidade Web Jalves Nicc3a1cio

Enviado por

Direitos autorais:

Formatos disponíveis

Tcnicas de Acessibilidade

Criando uma web para todos

Jalves Mendona Niccio

A Web acessvel como um caminho para auxiliar na Educao Inclusiva

Marben Montenegro Loureiro

INTRODUO Do que trata este livro?

Captulo INTRODUO - Do que trata este livro?

1. O problema da inacessibilidade pginas de Web

Captulo INTRODUO - Do que trata este livro?

Captulo INTRODUO - Do que trata este livro?

Quem deveria ler este livro?

Captulo INTRODUO - Do que trata este livro?

O mnimo que voc deve saber...

Captulo 1 - O mnimo que voc deve saber...

1. Anal, o que Web Acessvel?

Captulo 1 - O mnimo que voc deve saber...

Captulo 1 - O mnimo que voc deve saber...

O que quer dizer acessvel?

Captulo 1 - O mnimo que voc deve saber...

O que quer dizer Web acessvel?

Captulo 1 - O mnimo que voc deve saber...

Sobre a Web e seus componentes.

Captulo 1 - O mnimo que voc deve saber...

Captulo 1 - O mnimo que voc deve saber...

Figura 1. Componentes da Web e seus relacionamentos

exatamente a, entre o usurio e o contedo, que 1 http://www.w3c.org/WAI

Captulo 1 - O mnimo que voc deve saber...

Captulo 1 - O mnimo que voc deve saber...

Diretrizes para construo de contedo acessvel

Captulo 2 - Diretrizes para construo de contedo acessvel

Captulo 2 - Diretrizes para construo de contedo acessvel

Captulo 2 - Diretrizes para construo de contedo acessvel

Diretrizes Brasileiras: E-MAG

Captulo 2 - Diretrizes para construo de contedo acessvel

Diretrizes WCAG Samurai

Captulo 2 - Diretrizes para construo de contedo acessvel

Regras simples, timos resultados!

Captulo 3 - Regras simples, timos resultados!

sponvel em: http://acessodigital.net/art_acessibilidade-web-7-mitos-e-um-equivoco.html

Captulo 3 - Regras simples, timos resultados!

Captulo 3 - Regras simples, timos resultados!

Identicando a linguagem utilizada

Captulo 3 - Regras simples, timos resultados!

Tipo de Documento HTML XHTML (transitional)

XML e XHTML (strict)

Trabalhando com texto alternativo

<img src=/imagem/imagem1.jpg />

Captulo 3 - Regras simples, timos resultados!

<img src=/imagem/imagem1.jpg alt=capa do livro: O silncio da alma/>

<img src=/imagem/bullet.gif alt= />

Captulo 3 - Regras simples, timos resultados!

Trabalhando com CSS

Captulo 3 - Regras simples, timos resultados!

Captulo 3 - Regras simples, timos resultados!

Captulo 3 - Regras simples, timos resultados!

Captulo 3 - Regras simples, timos resultados!

Figura 2. Exemplo de layout com 3 colunas

Captulo 3 - Regras simples, timos resultados!

Captulo 3 - Regras simples, timos resultados!

Figura 3. Pgina HTML sem a formatao de folha de estilos

Captulo 3 - Regras simples, timos resultados!

<head> ... <link href=estilo.css rel=stylesheet type=text/css media=screen /> </head>

Captulo 3 - Regras simples, timos resultados!

Captulo 3 - Regras simples, timos resultados!