acessib webdesigners

Introdução à Acessibilidade Web27 de novembro de 2006

Sumário

I Sobre essa apostila 3

II Informações Básicas 5

III Acessibilidade para WebDesigners 10

1 O que é o curso de Acessibilidade para WebDesigners 11

2 Plano de ensino 122.1 Objetivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.2 Público Alvo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.3 Pré-requisitos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.4 Descrição . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.5 Metodologia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.6 Cronograma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132.7 Programa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132.8 Avaliação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132.9 Bibliografia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

3 Introdução à Acessibilidade Web 153.1 Lição 1 - Introdução . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

3.1.1 Diversidade no público-alvo . . . . . . . . . . . . . . . . . . . . . . . . . . . 153.1.2 Acessibilidade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163.1.3 Inclusão Digital . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173.1.4 Usabilidade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173.1.5 Projeto Universal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183.1.6 Bases Legais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

4 Projetando e testando uma página acessível 204.1 Lição 2 - Projeto inicial de uma página acessível . . . . . . . . . . . . . . . . . . . . 20

4.1.1 Análise do domínio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204.1.2 Regras de ouro da usabilidade . . . . . . . . . . . . . . . . . . . . . . . . . . 214.1.3 Usando a linguagem acessível . . . . . . . . . . . . . . . . . . . . . . . . . . 234.1.4 Elaboração de textos acessíveis . . . . . . . . . . . . . . . . . . . . . . . . . 234.1.5 Informações básicas para a construção de sites acessíveis . . . . . . . . . . 24

4.2 Lição 3 - Testando a sua página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284.2.1 Inspecção por heurística . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

1

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

4.2.2 Simulando a deficiência de cores . . . . . . . . . . . . . . . . . . . . . . . . . 304.2.3 Usando o avaliador brasileiro Da Silva . . . . . . . . . . . . . . . . . . . . . . 32

5 Acessibilidade em softwares no mercado 355.1 Lição 4 - Acessibilidade em softwares existentes . . . . . . . . . . . . . . . . . . . . 35

5.1.1 Acessibilidade em alguns softwares livres . . . . . . . . . . . . . . . . . . . . 355.1.2 Acessibilidade em alguns softwares proprietários . . . . . . . . . . . . . . . . 38

6 Técnicas para um WebDesign acessível 416.1 Lição 5 - Técnicas, parte 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

6.1.1 Fornecer alternativas ao conteúdo sonoro e visual . . . . . . . . . . . . . . . 416.1.2 Fornecer uma descrição sonora das informações importantes veiculadas

em trechos visuais das apresentações multimídia. . . . . . . . . . . . . . . . 526.1.3 Não recorrer apenas à cor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546.1.4 Utilizar folhas de estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566.1.5 Indicar claramente qual o idioma utilizado . . . . . . . . . . . . . . . . . . . . 626.1.6 Criar tabelas flexíveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

6.2 Lição 6 - Técnicas, parte 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 716.2.1 Garantir flexibilidade em novas tecnologias . . . . . . . . . . . . . . . . . . . 716.2.2 Garantir o controle do usuário sobre as alterações do conteúdo . . . . . . . . 776.2.3 Usar o recurso de acessibilidade integrado ao objeto . . . . . . . . . . . . . . 806.2.4 Garantir independência de dispositivos . . . . . . . . . . . . . . . . . . . . . 826.2.5 Soluções de transição . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

6.3 Lição 6 - Técnicas, parte 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 926.3.1 Utilizar as diretivas do W3C . . . . . . . . . . . . . . . . . . . . . . . . . . . . 926.3.2 Fornecer orientações de uso e informações de acordo com o contexto . . . . 946.3.3 Identificar claramente os mecanismos de navegação . . . . . . . . . . . . . . 996.3.4 Priorizar a clareza e a simplicidade dos documentos . . . . . . . . . . . . . . 106

2

Parte I

Sobre essa apostila

3


Conteúdo

O conteúdo dessa apostila é fruto da compilação de diversos materiais livres publicados na in-ternet, disponíveis em diversos sites ou originalmente produzido no CDTC em http://www.cdtc.org.br.

O formato original deste material bem como sua atualização está disponível dentro da licençaGNU Free Documentation License, cujo teor integral encontra-se aqui reproduzido na seção demesmo nome, tendo inclusive uma versão traduzida (não oficial).

A revisão e alteração vem sendo realizada pelo CDTC ([email protected]), desde outubrode 2006. Criticas e sugestões construtivas são bem-vindas a qualquer tempo.

Autores

A autoria deste conteúdo, atividades e avaliações é de responsabilidade de Shou Matsumoto([email protected]).

O texto original faz parte do projeto Centro de Difusão de Tecnolgia e Conhecimento, que vemsendo realizado pelo ITI em conjunto com outros parceiros institucionais, atuando em conjuntocom as universidades federais brasileiras que tem produzido e utilizado Software Livre, apoiandoinclusive a comunidade Free Software junto a outras entidades no país.

Informações adicionais podem ser obtidas atráves do email [email protected], ou dahome page da entidade, atráves da URL http://www.cdtc.org.br.

Garantias

O material contido nesta apostila é isento de garantias e o seu uso é de inteira responsabi-lidade do usuário/leitor. Os autores, bem como o ITI e seus parceiros, não se responsabilizamdireta ou indiretamente por qualquer prejuízo oriundo da utilização do material aqui contido.

Licença

Copyright ©2006,Shou Matsumoto ([email protected]).

Permission is granted to copy, distribute and/or modify this document under the termsof the GNU Free Documentation License, Version 1.1 or any later version published bythe Free Software Foundation; with the Invariant Chapter being SOBRE ESSA APOS-TILA. A copy of the license is included in the section entitled GNU Free DocumentationLicense.

4

Parte II

Informações Básicas

5


Sobre o CDTC

Objetivo Geral

O Projeto CDTC visa a promoção e o desenvolvimento de ações que incentivem a dissemina-ção de soluções que utilizem padrões abertos e não proprietários de tecnologia, em proveito dodesenvolvimento social, cultural, político, tecnológico e econômico da sociedade brasileira.

Objetivo Específico

Auxiliar o Governo Federal na implantação do plano nacional de software não-proprietário ede código fonte aberto, identificando e mobilizando grupos de formadores de opinião dentre osservidores públicos e agentes políticos da União Federal, estimulando e incentivando o mercadonacional a adotar novos modelos de negócio da tecnologia da informação e de novos negóciosde comunicação com base em software não-proprietário e de código fonte aberto, oferecendotreinamento específico para técnicos, profissionais de suporte e funcionários públicos usuários,criando grupos de funcionários públicos que irão treinar outros funcionários públicos e atuar comoincentivadores e defensores de produtos de software não proprietários e código fonte aberto, ofe-recendo conteúdo técnico on-line para serviços de suporte, ferramentas para desenvolvimento deprodutos de software não proprietários e de seu código fonte livre, articulando redes de terceiros(dentro e fora do governo) fornecedoras de educação, pesquisa, desenvolvimento e teste de pro-dutos de software livre.

Guia do aluno

Neste guia, você terá reunidas uma série de informações importantes para que você comeceseu curso. São elas:

• Licenças para cópia de material disponível

• Os 10 mandamentos do aluno de Educação a Distância

• Como participar dos foruns e da wikipédia

• Primeiros passos

É muito importante que você entre em contato com TODAS estas informações, seguindo oroteiro acima.

Licença

Copyright ©2006, Shou Matsumoto ([email protected]).

É dada permissão para copiar, distribuir e/ou modificar este documento sob os termosda Licença de Documentação Livre GNU, Versão 1.1 ou qualquer versão posterior

6


públicada pela Free Software Foundation; com o Capitulo Invariante SOBRE ESSAAPOSTILA. Uma cópia da licença está inclusa na seção entitulada "Licença de Docu-mentação Livre GNU".

Os 10 mandamentos do aluno de educação online

• 1. Acesso à Internet: ter endereço eletrônico, um provedor e um equipamento adequado épré-requisito para a participação nos cursos a distância.

• 2. Habilidade e disposição para operar programas: ter conhecimentos básicos de Informá-tica é necessário para poder executar as tarefas.

• 3. Vontade para aprender colaborativamente: interagir, ser participativo no ensino a distân-cia conta muitos pontos, pois irá colaborar para o processo ensino-aprendizagem pessoal,dos colegas e dos professores.

• 4. Comportamentos compatíveis com a etiqueta: mostrar-se interessado em conhecer seuscolegas de turma respeitando-os e fazendo ser respeitado pelo mesmo.

• 5. Organização pessoal: planejar e organizar tudo é fundamental para facilitar a sua revisãoe a sua recuperação de materiais.

• 6. Vontade para realizar as atividades no tempo correto: anotar todas as suas obrigações erealizá-las em tempo real.

• 7. Curiosidade e abertura para inovações: aceitar novas idéias e inovar sempre.

• 8. Flexibilidade e adaptação: requisitos necessário à mudança tecnológica, aprendizagense descobertas.

• 9. Objetividade em sua comunicação: comunicar-se de forma clara, breve e transparente éponto - chave na comunicação pela Internet.

• 10. Responsabilidade: ser responsável por seu próprio aprendizado. O ambiente virtual nãocontrola a sua dedicação, mas reflete os resultados do seu esforço e da sua colaboração.

Como participar dos fóruns e Wikipédia

Você tem um problema e precisa de ajuda?

Podemos te ajudar de 2 formas:

A primeira é o uso dos fóruns de notícias e de dúvidas gerais que se distinguem pelo uso:

. O fórum de notícias tem por objetivo disponibilizar um meio de acesso rápido a informaçõesque sejam pertinentes ao curso (avisos, notícias). As mensagens postadas nele são enviadas atodos participantes. Assim, se o monitor ou algum outro participante tiver uma informação queinteresse ao grupo, favor postá-la aqui.Porém, se o que você deseja é resolver alguma dúvida ou discutir algum tópico específico docurso. É recomendado que você faça uso do Forum de dúvidas gerais que lhe dá recursos mais

7


efetivos para esta prática.

. O fórum de dúvidas gerais tem por objetivo disponibilizar um meio fácil, rápido e interativopara solucionar suas dúvidas e trocar experiências. As mensagens postadas nele são enviadasa todos participantes do curso. Assim, fica muito mais fácil obter respostas, já que todos podemajudar.Se você receber uma mensagem com algum tópico que saiba responder, não se preocupe com aformalização ou a gramática. Responda! E não se esqueça de que antes de abrir um novo tópicoé recomendável ver se a sua pergunta já foi feita por outro participante.

A segunda forma se dá pelas Wikis:

. Uma wiki é uma página web que pode ser editada colaborativamente, ou seja, qualquer par-ticipante pode inserir, editar, apagar textos. As versões antigas vão sendo arquivadas e podemser recuperadas a qualquer momento que um dos participantes o desejar. Assim, ela oferece umótimo suporte a processos de aprendizagem colaborativa. A maior wiki na web é o site "Wikipé-dia", uma experiência grandiosa de construção de uma enciclopédia de forma colaborativa, porpessoas de todas as partes do mundo. Acesse-a em português pelos links:

• Página principal da Wiki - http://pt.wikipedia.org/wiki/

Agradecemos antecipadamente a sua colaboração com a aprendizagem do grupo!

Primeiros Passos

Para uma melhor aprendizagem é recomendável que você siga os seguintes passos:

• Ler o Plano de Ensino e entender a que seu curso se dispõe a ensinar;

• Ler a Ambientação do Moodle para aprender a navegar neste ambiente e se utilizar dasferramentas básicas do mesmo;

• Entrar nas lições seguindo a seqüência descrita no Plano de Ensino;

• Qualquer dúvida, reporte ao Fórum de Dúvidas Gerais.

Perfil do Tutor

Segue-se uma descrição do tutor ideal, baseada no feedback de alunos e de tutores.

O tutor ideal é um modelo de excelência: é consistente, justo e profissional nos respectivosvalores e atitudes, incentiva mas é honesto, imparcial, amável, positivo, respeitador, aceita asidéias dos estudantes, é paciente, pessoal, tolerante, apreciativo, compreensivo e pronto a ajudar.A classificação por um tutor desta natureza proporciona o melhor feedback possível, é crucial, e,para a maior parte dos alunos, constitui o ponto central do processo de aprendizagem.’ Este tutorou instrutor:

• fornece explicações claras acerca do que ele espera, e do estilo de classificação que iráutilizar;

8


• gosta que lhe façam perguntas adicionais;

• identifica as nossas falhas, mas corrige-as amavelmente’, diz um estudante, ’e explica por-que motivo a classificação foi ou não foi atribuída’;

• tece comentários completos e construtivos, mas de forma agradável (em contraste com umreparo de um estudante: ’os comentários deixam-nos com uma sensação de crítica, deameaça e de nervossismo’)

• dá uma ajuda complementar para encorajar um estudante em dificuldade;

• esclarece pontos que não foram entendidos, ou corretamente aprendidos anteriormente;

• ajuda o estudante a alcançar os seus objetivos;

• é flexível quando necessário;

• mostra um interesse genuíno em motivar os alunos (mesmo os principiantes e, por isso,talvez numa fase menos interessante para o tutor);

• escreve todas as correções de forma legível e com um nível de pormenorização adequado;

• acima de tudo, devolve os trabalhos rapidamente;

9

Parte III

Acessibilidade para WebDesigners

10

Capítulo 1

O que é o curso de Acessibilidade paraWebDesigners

Garantir que sua página Web seja acessível já não é somente uma questão de justiça social.O conceito de acessibilidade pode ser simultaneamente:

• estratégia de negócio;

• necessidade;

• adequação às leis;

• adequação às diretrizes internacionais.

Este curso explicará o porquê disso e ensinará alguns cuidados que devem ser tomados paramanter sua página acessível, levando já em consideração algumas diretivas para a web semân-tica. O curso possui duas semanas, começando na Segunda-Feira e terminando no Domingo.Todo o conteúdo estará disponível a partir da data de início. Para começar o curso, você deve lero Guia do Aluno e o Plano de Ensino.

11

Capítulo 2

Plano de ensino

2.1 Objetivo

Capacitar o usuário para o desenvolvimento de páginas Web considerando as diretrizes básicasde acessibilidade.

2.2 Público Alvo

Webdesignes ou programadores que desejam produzir um conteúdo Web acessível.

2.3 Pré-requisitos

Os usuários deverão ser, necessariamente, funcionários públicos e ter conhecimentos básicospara operar um computador. Conhecimento inicial de HTML e CSS também são requeridos.

2.4 Descrição

O curso será realizado na modalidade Educação a Distância e utilizará a Plataforma Moodlecomo ferramenta de aprendizagem. O curso tem duração de uma semana e possui um conjuntode atividades (lições, fóruns, glossários, questionários e outros) que deverão ser executadas deacordo com as instruções fornecidas. O material didático está disponível on-line de acordo comas datas pré-estabelecidas em cada tópico. O avaliador adotado é o "da Silva", disponível napágina <http://www.dasilva.org.br/>.

2.5 Metodologia

O curso está dividido da seguinte maneira:

12


2.6 Cronograma

Cronograma Descrição das atividadesLição 1 - Introdução;

Primeira semana Lição 2 - Projeto inicial de uma página acessível;Lição 3 - Testando a sua página;

Lição 4 - acessibilidade em softwares existentes.Lição 5 - Técnicas, parte 1;

Segunda semana Lição 6 - Técnicas, parte 2;Lição 7 - Técnicas, parte 3;

Segunda semana, Quinta-Feira a Domingo Avaliação finalAvaliação do curso

As lições contém o contéudo principal. Elas poderão ser acessadas quantas vezes forem ne-cessárias, desde que esteja dentro da semana programada. Ao final de uma lição, você receberáuma nota de acordo com o seu desempenho. Responda com atenção às perguntas de cada lição,pois elas serão consideradas na sua nota final. Caso sua nota numa determinada lição for menordo que 6.0, sugerimos que você faça novamente esta lição.

Ao final do curso será disponibilizada a avaliação referente ao curso. Tanto as notas das liçõesquanto a da avaliação serão consideradas para a nota final. Todos os módulos ficarão visíveispara que possam ser consultados durante a avaliação final.

Aconselhamos a leitura da "Ambientação do Moodle"para que você conheça a plataforma deEnsino a Distância, evitando dificuldades advindas do "desconhecimento"sobre a mesma.

Os instrutores estarão a sua disposição ao longo de todo curso. Qualquer dúvida deverá serenviada no fórum. Diariamente os monitores darão respostas e esclarecimentos.

2.7 Programa

O curso Acessibilidade oferecerá o seguinte conteúdo:

• Introdução à Acessibilidade Web;

• Projetando e testando uma página acessível;

• Acessibilidade em softwares no mercado;

• Técnicas para um WebDesign acessível.

2.8 Avaliação

Toda a avaliação será feita on-line.Aspectos a serem considerados na avaliação:

• Iniciativa e autonomia no processo de aprendizagem e de produção de conhecimento;

13


• Capacidade de pesquisa e abordagem criativa na solução dos problemas apresentados.

Instrumentos de avaliação:

• Participação ativa nas atividades programadas.

• Avaliação ao final do curso.

• O participante fará várias avaliações referente ao conteúdo do curso. Para a aprovaçãoe obtenção do certificado o participante deverá obter nota final maior ou igual a 6.0 deacordo com a fórmula abaixo:

• Nota Final = ((ML x 7) + (AF x 3)) / 10 = Média aritmética das lições

• AF = Avaliações

2.9 Bibliografia

• Página oficial do Acessibilidade Brasil: http://www.acessobrasil.org.br/

• Página oficial do WAI: http://www.w3.org/WAI/

• Apostila do Curso Estuda Silva, Acessibilidade Brasil.

• Símbolo de Acessibilidade à Web: http://ncam.wgbh.org/webaccess/symbolwinner.html

• Curso de Acessibilidade, CDTC: http://www.cursos.cdtc.org.br

14

Capítulo 3

Introdução à Acessibilidade Web

Nesta seção, abordaremos as idéias gerais sobre a acessibilidade. Conceitos como a inclusãodigital, usabilidade, legislação e Projeto Universal (Universal Design) serão abordados aqui.

3.1 Lição 1 - Introdução

3.1.1 Diversidade no público-alvo

Existe uma grande diversidade nos usuários da Internet. De acordo com a IBGE, no Brasil exis-tem aproximadamente:

• 20 milhões de pessoas com alguma ocupação, mas com menos de 4 anos de escolaridade;

• 54 milhões de analfabetos funcionais;

• 15 milhões de pessoas com mais de 65 anos, cujo 5,4 milhões já possuem alguma defici-ência;

• 24,3 milhões de pessoas portadoras de deficiência, cujo 1,4 milhões possuem deficiênciafísica permanente;

• 16,5 milhões de pessoas com algum tipo de dificudade visual;

• 5,7 milhões de pessoas com algum tipo de dificuldade auditiva.

Com o sucessivo avanço da tecnologia na Internet, muitos dos citados acima obteram con-dições favoráveis para o acesso à Internet, viabilizando assim a inclusão destas pessoas comopúblico-alvo. Excluir esta massa populacional seria uma falha grave para um bom Web Designer,já que seu trabalho é maximizar o acesso à página!

Viabilizar o acesso desta variedade de pessoas à sua página terá um forte impacto no seu índicede aceitação. É por isso que a acessibilidade pode ser dita como uma questão estratégica denegócio.

15


3.1.2 Acessibilidade

O termo "acessibilidade"diz respeito à disponibilidade de um local, informação, produtoou serviço ao maior número (e variedade) possível de pessoas.

Esse fato requer a eliminação de barreiras arquitetônicas, a disponibilidade de comunicação,de acesso físico, de equipamentos e programas adequados, de conteúdo e apresentação da in-formação em formatos alternativos. Para as pessoas que possuem opções limitadas de acesso àinformação, garantir a acessibilidade pode ser uma necessidade.

É importante que você, como um projetista de sítios Web, tenha conhecimento destes concei-tos. Ao construir páginas, fique atento se ele é acessível ao maior número possível de pessoas.Isso requer a análise de diversas situações em que um usuário pode se encontrar.

Algumas organizações internacionais são responsáveis pela criação de padrões e guias sobrea acessibilidade na web. Abaixo, apresentamos dois mais conhecidos:

• W3C - World Wide Web Consortium: responsável pelo desenvolvimento de tecnologias(especificação, guias, softwares e ferramentas) que maximizam o potencial da Web.

• WAI - Web Accessibility Initiative: desenvolve guias, documentos e recursos relacionados àacessibilidade na Web.

Em particular, a W3C prevê as seguintes situações especiais para os usuários da Internet:

1. Incapacidade de ver, ouvir ou deslocar-se; ou grande dificuldade - quando não a impossibi-lidade - de interpretar certos tipos de informação;

2. Dificuldade visual para ler ou compreender textos;

3. Incapacidade para usar o teclado ou o mouse, ou não dispor deles;

4. Insuficiência de quadros, apresentando apenas texto ou dimensões reduzidas, ou uma liga-ção muito lenta à Internet;

5. Dificuldade para falar ou compreender, fluentemente, a língua em que o documento foiescrito;

6. Ocupação dos olhos, ouvidos ou mãos, por exemplo, ao volante do automóvel a caminhodo emprego, ou no trabalho em ambiente barulhento;

7. Desatualização, pelo uso de navegador com versão muito antiga, ou navegador completa-mente diferente dos habituais, ou por voz ou sistema operacional menos difundido.

O ideal é que a sua página seja fácil de navegar para as pessoas que correspondem a estassituações também.

16


3.1.3 Inclusão Digital

O termo "Inclusão Digital"diz respeito ao acesso à informação digitalizada e aos produtose serviços com interface digital para o maior número e variedade possível de pessoas.Esse acesso deve, na medida do possível, ser em iguais condições.

Outra definição para "Inclusão Digital"seria: gerar igualdade de oportunidades na sociedadeda informação. Então, a "Inclusão Digital"é uma questão de justiça social.

O conceito parte da afirmação de que o acesso à Internet (e os demais modernos meios decomunicação) gera um diferencial no aprendizado e na capacidade de ascensão financeira parao indivíduo.

Como muitos brasileiros não teriam condições de adquirir a infra-estrutura para o acesso à In-ternet, o reconhecimento e o empenho governamental, social, técnico e econômico para garantiro tal acesso são cada vez maiores.

Com o acesso à Internet, pretende-se gerar um avanço na capacitação e na qualidade de vida dapopulação, preparando o país para as necessidades futuras.

3.1.4 Usabilidade

A usabilidade é a capacidade de um produto ser usado por usuários específicos para atin-gir objetivos específicos com satisfação, em um determinado contexto de uso.

Como alternativas, temos também as seguintes definições para a usabilidade:

• Esforço mental ou atitude do usuário frente ao produto;

• Facilidade de uso e grau de aceitação do produto;

• Contexto de tarefas específicas realizadas em um determinado trabalho;

• Atributo de qualidade dos sistemas interativos, relacionado à facilidade e eficiência deaprendizado e uso satisfatório pelo usuário.

Originalmente, a Web foi desenvolvida como um ambiente para troca de informações atravésde hipertextos. Porém, com o avanço tecnológico, passou a ser usado como uma interface re-mota de software também.

Esse fato leva-nos à confusão, pois os profissionais tentam adaptar tecnologias para casos queestão fora do escopo da aplicação inicial. Portanto, para minimizar a confusão, devemos tomarmuito cuidado em manter claro a estrutura geral da página Web. Para isso, é fundamental enten-der o domínio em que a página é utilizada.

Conhecer o usuário e seu contexto é fundamental para se fazer o design de um sistema

17


com alta usabilidade.

Ao cuidar da usabilidade do conteúdo, você possibilita que a Internet seja usada por usuáriosnovatos, aqueles sem muita instrução escolar, sem muita motivação frente a um computador, cri-anças e pessoas idosas.

A usabilidade possui forte potencial comercial, já que terá impacto diretamente na acei-tação da sua página Web.

3.1.5 Projeto Universal

Também conhecido como o Universal Design (Desenho Universal, ou Arquitetura Universal), oProjeto Universal é um consenso mundial de boa prática no desenvolvimento de sítios Web.O seu uso é uma adequação às diretrizes internacionais.

São conceitos do Projeto Universal:

• Igualdade na possibilidade de uso: o design é útil para pessoas com diferentes habilida-des;

• Flexibilidade: atende uma ampla gama de preferências e habilidades;

• Simples e intuitivo: fácil compreenção, independentemente de experiência, formação, idi-oma ou concentração do usuário;

• Captação eficaz da informação: o design possibilita que a informação seja obtida inde-pendentemente da capacidade sensorial ou condições ambientais;

• Tolerante a falhas: minimiza o risco (e possíveis efeitos) de ações indesejadas;

• Esforço físico minimizado: conforto e eficiência na utilização;

• Dimensão apropriada para conteúdo interativo: design oferece espaço apropriado paraalcance, manipulação e uso, independentemente de tamanho, postura ou mobilidade dousuário.

As técnicas abordadas neste curso também se baseia no Projeto Universal.

3.1.6 Bases Legais

Os primeiros países a idealizar parâmetros de acessibilidade na Internet foram o Canadá, Esta-dos Unidos e Austrália, em 1997.

Em 1999, o WAI (Web Accessibility Initiative - Iniciativa para Acessibilidade Web), criado pelo

18


W3C (World Wide Web Consortium - Consórcio Web), lançou 3 diretrizes para a acessibilidadedo conteúdo Web. Hoje, é a principal referência mundial. São eles:

• Web Content Accessibility Guidelines: diretrizes para informações contidas na página, in-cluindo textos, formulários, imagens, sons e outros;

• Authoring Tool Accessibility Guidelines: diretrizes para softwares que criam conteúdo Web;

• User Agent Accessibility Guidelines: diretrizes para navegadores, media players e tecnolo-gias de assistência.

Desde 2000, o Brasil vem desenvolvendo legislações, normas e critérios voltados para a aces-sibilidade das pessoas portadoras de deficiência ou com mobilidade reduzida, atendendo as ba-ses do Projeto Universal. Dentre eles, podemos destacar:

1. LEI No. 10.098/2000, que estabelece normas gerais e critérios básicos voltados para aacessibilidade das pessoas portadoras de deficiência ou com mobilidade reduzida.

2. Comitê CB-40 da ABNT, que se dedica à normalização no campo de acessibilidade.

3. Diversas leis estaduais e municipais sobre o assunto.

Como podemos ver, a acessibilidade é uma questão de adequação às leis brasileiras e dire-trizes internacionais.

19

Capítulo 4

Projetando e testando uma páginaacessível

Nesta seção, formaremos uma base para projetar páginas acessíveis. Detalhes serão esclareci-dos na semana seguinte. Adicionalmente, são apresentadas algumas técnicas para validações.

4.1 Lição 2 - Projeto inicial de uma página acessível

4.1.1 Análise do domínio

Para desenvolver sítios Web, é necessário realizar uma análise do domínio de aplicação (contextoem que será usado). Nesta análise, é importante levantar os seguintes pontos:

1. Características dos usuários:

• Dados Pessoais:

– Faixa etária;– Limitações físicas/mentais;– Habilidades intelectuais;– Motivações;– Atitude em relação às tecnologias novas.

• Habilidades técnicas:

– Escolaridade;– Experiência com computação;– Experiência com interfaces;– Experiência profissional;– Experiência com a atividade.

2. Tipos de tarefas desenvolvidas:

• Detalhes;

• Objetivo;

• Freqüência;

20


• Objetivos institucionais;

• Dependência de outras tarefas;

• Riscos e erros associados;

• Flexibilidade.

3. Ambiente:

• Organizacional:

– Objetivos;– Horas de trabalho;– Cargo profissional;– Estrutura gerencial;– Flexibilidade do trabalho;– Atividades individuais;– Atividades em equipe.

• Físico:

– Espaço;– Condição audio-visual;– Localidade;– Segurança.

4. Equipamentos:

• Configurações de softwares e hardwares;

• Materiais necessários.

5. Produto:

• Estratégia de Marketing;

• Público-alvo;

• Retorno dos investimentos.

Essas informações poderão ser importantes para o levantamento dos requisitos que o sítioWeb deve satisfazer.

4.1.2 Regras de ouro da usabilidade

Existem algumas regras recomendadas para redigir bons documentos. Abaixo, apresentaremosalguns princípios que devem estar em mente ao projetar inicialmente um sistema para Web.

Regras iniciais:

• Clareza na arquitetura da informação: organizar a informação de forma que o usuáriopossa distinguir o que é prioritário e o que não é.

21


• Facilidade de navegação: organizar a informação de forma que esteja disponível em pou-cos cliques.

• Simplicidade: Facilitar que o usuário encontre o conteúdo desejado rapidamente.

• Relevância do conteúdo: Formatar textos de forma concisa e objetiva. O estilo deve serotimizado tanto para leitura em tela quanto para impressão.

• Consistência: Adotar procedimentos padrões de cores e layouts; para que os usuáriospossam ter a noção do que irá acontecer, baseado em experiências anteriores.

• Tempo suportável: Projetar páginas que carreguem com pouco tempo. O tempo máximoque o usuário esperaria sem perder o interesse seria de 15 segundos.

• Foco nos usuários: Focar na atividade dos usuários. Os usuários se interessam nas infor-mações e serviços disponíveis. Poucos estarão interessados na tecnologia.

A seguir, apresentaremos regras mais elaboradas para projetos mais detalhados.

Regras de projeto:

• Consistência: usar seqüência de ações similares para situações similares. Mesma termo-logia em menus e ajudas, utilizar cores, layouts e fontes padões, etc.

• Atalhos para usuários freqüentes: usar teclas especiais, macros e mecanismos simplifi-cados de navegação para eliminar telas e passos desnecessários. Isso facilita a interaçãodos usuários mais experientes que usam o sistema com freqüência.

• Feedback informativo: toda a ação do usuário deve resultar em uma resposta do sistema.Dependendo do tipo de ação executada, o nível de detalhe das informações retornadaspode variar.

• Existência de Diálogo de Fim de Ação: a seqüência de respostas do sistema deve ser or-ganizada de tal maneira que o usuário possa identificar o momento em que um determinadogrupo de ações terminou.

• Prevenção e tratamento de erros: o sistema não deve permitir que o usuário possa come-ter um erro severo, comprometendo o sistema. Adicionalmente, em caso de erro o sistemadeve fornecer ao usuário instruções para seu tratamento.

• Reversibilidade: se possível, as ações devem ser reversíveis. Isso alivia a ansiedade dosusuários e os encorajam a explorar os sistema.

• Controle: usuários preferem que o sistema responda às suas ações, não o contrário. Issocria uma sensação de que o usuário detém o controle sobre o processamento.

• Baixa carga cognitiva: a capacidade humana de memorização requer que a tela do sis-tema seja simples, consistente às outras telas do conjunto e que a freqüência de movimen-tos em cada tela seja reduzida.

22


As regras acima evitarão projetos com problemas de usabilidade.

4.1.3 Usando a linguagem acessível

Em muitos casos, a linguagem utilizada na Internet é complexa, impessoal, tecnicista e formal.Esse tipo de linguagem dificulta a compreensão por parte dos usuários que não dominam a lei-tura, o conteúdo ou o uso do computador. Isso pode ocorrer muito em analfabetos funcionais,idosos e portadores de deficiências.

Usar linguagem acessível, claro e objetivo facilita o acesso e a compreenção do conteúdo dasmensagens. Isso pode ser importante até para usuários sem dificuldades especiais, mas quedesejam ganhar tempo, qualidade e satisfação na comunicação.

A linguagem acessível é aquela utilizada corretamente e que é simples, clara e coerentecom o que o autor deseja expressar. Para isso, precisamos usar as regras gramaticais e orto-gráficas da língua oficial do país.

OBS. A sua página, porém, não deve desprezar a linguagem coloquial, que promove a identi-ficação entre o emissor e o receptor da mensagem.

4.1.4 Elaboração de textos acessíveis

Para elaborar um texto que comunique exatamente o que se deseja comunicar, é necessário:

• saber o que cada palavra significa e como é escrita;

• selecionar adequadamente as palavras, evitando o uso de expressões na moda, termostécnicos ou estrangeirismos, que nem sempre são dominados por todas as pessoas.

• evitar palavras repetidas ou de duplo sentido, expressões viciadas que prejudicam a clarezada mensagem.

• colocar-se no lugar do receptor para avaliar a qualidade e o estilo da mensagem transmitida;

• observar o tamanho das frases utilizadas. Frases longas dificultam a compreensão, mas asmuito resumidas também produzem o mesmo efeito. De modo geral, recomenda-se usarem torno de vinte palavras sem que ultrapasse três linhas.

Elementos indispensáveis à elaboração de textos

• Organização: evite improvisar. Com a organização, ganhamos tempo, qualidade e confiabi-lidade. Certifique-se do que vai informar e defina o modo como a mensagem será dada. Emcaso de dúvidas, procure esclarecê-las com a equipe, leia e busque referências. A Internetpermite a construção simultânea de formato e conteúdo da informação.

23


• Confiabilidade: não se baseie em boatos ou suposições. Passar a informação com funda-mento é mais importante do que ser o primeiro a passá-lo. Pesquise, e se utilizar trabalhosde outros autores, inclua créditos para essas fontes.

• Imparcialidade: evite adjetivos, pois eles aumentam inutilmente o texto e indicam a ten-dência de quem as informam. A mensagem não deve refletir a opinião pessoal de quem aenvia, a não ser que o espaço seja reservado para essa finalidade.

• Apresentação: use textos limpos e bem apresentados para estimular e facilitar a leitura.Divida a informação em pequenos blocos e use espaços entre eles. Prefira uniformizara estrutura dos textos e das imagens. Imagens devem ter legendas curtas e descritivaspara que os usuários que não as enxergam possam compreendê-los. Use títulos sintéticosrelacionados ao conteúdo, para despertar a atenção para a leitura.

• Correção: tome cuidado com pontuações: pontuações erradas podem alterar o sentido damensagem. Leia o texto sempre antes de publicá-lo. Um usuário raramente voltará para asua página para ler as correções.

Tendo isso em mente, reorganize os seus textos. Isso melhorará significativamente a quali-dade da sua página Web.

4.1.5 Informações básicas para a construção de sites acessíveis

Abaixo, apresentaremos algumas informações adicionais que servirão de base para as lições se-guintes. Cada tópico será mais detalhado futuramente.

1. Apresentação da Informação: associe cada elemento não textual com um texto de des-crição. No geral, o atributo "alt"em conjunto com o atributo "title"é suficiente. Essa regraaplica-se a:

• imagens;

• símbolos e gráficos representando texto;

• regiões de mapa de imagem;

• animações;

• applets e outros programas;

• arte ASCII ("desenhos"compostos por "letras");

• frames;

• programas interpretáveis ou scripts;

• ícones usados em enumerações;

• espaçadores;

• botões gráficos;

• sons, reproduzidos com ou sem interação do usuário;

• arquivos independentes de áudio;

• faixas de áudio em vídeos;

24


• trechos de vídeo.

2. Contatos: fornecer uma forma simples e óbvia para contatar a(s) pessoa(s) da organização,responsável(is) pela informação e administração do site.

3. Navegação

• Garantir que as ligações (links) textuais sejam palavras ou expressões compreensíveisfora do contexto. Teste a navegação usando a tecla TAB e leia em voz alta o respectivotexto para simular o funcionamento de um leitor de tela. Evite usar links do tipo "Cliqueaqui", pois elas não esclarecem a informação dos links. Evite também usar textosiguais para links diferentes, pois isso gera ambiguidade.

• Permitir a ativação dos elementos através do teclado. Nem todas as pessoas utilizamo mouse.

4. Conformidade

• Implementar a página Web considerando as recomendações de acessibilidade, apre-sentadas neste curso.

• Testar a página Web. Use avaliadores on-line ou técnicas de inspecções. Ambos sãoapresentados durante este curso.

• Colocar o Símbolo de Acessibilidade Web na página de entrada do sítio. O símbolointernacional se encontra em<http://ncam.wgbh.org/webaccess/symbolwinner.html>; mas dê preferência à versãobrasileira, que se encontra na página da Acessibilidade Brasil<http://www.acessobrasil.org.br>.

5. Verificação

• Use o avaliador "Da Silva", apresentado neste curso, para verificar se a página estádentro das normas de acessibilidade. Outros avaliadores on-line podem ser usadoscomo alternativa.

• Verifique a sua página em diversos navegadores. Dê preferência àqueles que estejamdentro das normas do W3C, como Netscape/Mozilla, Opera, Internet Explorer, etc.

6. Noções de HTML

• Nunca deixe aberto uma tag. Sempre associe um comando de fechamento a um co-mando (Ex. <p> </p>), pois isso garante compatibilidade com XML/XHTML, que po-derá se tornar padrão na futura Web Semântica. Em caso de comando de uma únicalinha, como o <br>, use a construção do tipo <br />.

• Conheça a estrutura geral dos documentos HTML que usaremos neste curso.

– <!DOCTYPE HTML PUBLIC -//W3C//DTD/HTML 4.0 Transitional//EN"><html lang="pt"><head>

<title>Título da Página</title>

<link href="estilos.css"type="text/css"rel="stylesheet">

25


</head>

<body>

Corpo da página

</body>

</html>

• Conheça os elementos HTML para diagramação. Exemplos são:

– Títulos - <h1></h1>;– Parágrafos - <p></p>;– Quebra de linha - <br />;– etc.

• Conheça o padrão para codificação de tabelas que usaremos neste curso. Um exemplose encontra abaixo:

– <table width="50%"border="0"cellspacing="0"cellpadding="5"align="CENTER"><thead><tr><th> linha 1-célula1</th><th> linha 1-célula2 </th></tr></thead><tbody><tr><th> linha 2-célula1</th><th> linha 2-célula2 </th></tr></tbody>

</table>

7. Noções de CSS - Cascading Style Sheets (Folhas de Estilos em Cascata): tenha co-nhecimento da CSS, pois isso ajuda na criação de páginas mais flexíveis, leves e dão maisprecisão no aspecto gráfico; melhorando assim a velocidade de produção, consistência e afacilidade de manutenção.Legibilidade de cores. Exemplos que ilustram sua sintaxe básicaestão abaixo:

• A estrutura geral das linhas de configuração é: nome_do_seletor propriedades:valores;. O "nome_do_seletor"pode ser uma tag existente no HTML ou um nome qualquer(nesse caso, o nome deve ser precedido de "."). Exemplos se encontram abaixo:

– p color: black;

bodycolor: bluefont-family: cursive;

26


font-size: 16px;

.minhaconf color: green;

• Recomenda-se salvar as configurações de estilo em um arquivo texto à parte, comomeucss.css. Isso facilitará na organização e alterações.

• No arquivo HTML onde será utilizado as configurações de estilo, insira no <head> ovínculo com o arquivo CSS.

– Ex:<head><title>Meu título</title><link href="meucss.css"type="text/css"rel="stylesheet"/>

</head>• Aplique a configuração no HTML usando o nome_do_seletor definido no arquivo CSS

de configuração.– <body>

<p><span class="minhaconf">Meu texto</span></p></body>

8. Noções de cores legíveis: use cores que facilitem a identificação, discriminação e absor-ção do texto com sucesso. A cor é uma propriedade estética, sensitiva e informativa. Coresusadas indiscriminadamente podem ter efeitos negativos e podem dificultar na compreen-ção. Verifique os seguintes aspectos de legibilidade:

• Fontes: prefira usar fontes sem serifas. Apesar de facilitar na leitura para pessoascom visões normais, pessoas com baixa visão perceberão um embaralhamento entreo final de uma letra com o começo da seguinte. Por exemplo, as letras "IVI"("i", "v"e"i"em maiúscula) podem ser confundidos com a letra "M".

• Espaçamentos: cuide das entrelinhas, espaçamento entre caracteres e espaçamentoentre palavras. Frases escritas com a primeira letra de cada palavra em maiúsculapodem ser lidas com mais facilidade (Ex. Web Content Acessibility Guidelines). Oalinhamento de textos à esquerda favorece a leitura e cria espaços uniformes entrepalavras.

• Contraste: verifique se há contraste favorável entre o texto e o fundo. Usuários daltô-nicos podem ter dificuldade na distinção da gama de cores. Verifique também se otexto pode ser lido em monitores monocromáticos. Verifique o círculo cromático (figura4.1.5) abaixo para ter uma idéia sobre cores com contraste. De forma geral, as coresque se situam no lado oposto do círculo são complementares. Apesar de geralmenteas cores complementares ajudarem na legibilidade, algumas combinações de corespodem causar mal-estar aos usuários. Por exemplo, as combinações vermelho/verde,azul/vermelho e amarelo/roxo não são recomendadas.

27


Figura 4.1: Círculo cromático.

4.2 Lição 3 - Testando a sua página

4.2.1 Inspecção por heurística

Depois de construído, o sistema estará pronto para a publicação. Antes de sua publicação, preci-samos avaliar a usabilidade da sua interface. Aqui, apresentaremos um método conhecido comoinspecção por heurística.

Heurísticas são regras gerais que descrevem propriedades que ocorrem em comum emuma determinada entidade. No nosso caso, usaremos as heurísticas conhecidas como Heurís-ticas de Nielsen, que descrevem propriedades que devem ocorrer em um sistema Web de altausabilidade.

Heurísticas de Nielsen:

• Visibilidade do estado do sistema: o sistema precisa usar feedbacks para manter o usuá-rio informado sobre o que está acontecendo. Tópicos que devem ser abordados são:

– Onde estou?

– O que este portal faz?

– Para onde posso ir?

– Você está aqui.

– Mapa de navegação.

• Compatibilidade do sistema com o mundo real: o sistema precisa falar a linguagem dousuário com palavras, expressões e conceitos familiares.

• Controle e liberdade do usuário: usuários fazem ações indesejadas e precisam encontrarrapidamente uma forma de sair do estado indesejado. Cuidados que devem ser tomadossão:

28


– Possibilitar retorno à página anterior.– Possibilitar a interrupção ou cancelamento do processo.

• Consistência e padrões: usuários não precisam adivinhar que diferentes palavras ouações significam o mesmo em diferentes contextos. Tópicos que devem ser abordadossão:

– Denominação;– Localização;– Formato;– Cor;– Linguagem;– Contextos e situações semelhantes devem ter tratamentos e apresentações semelhan-

tes.

• Prevenção de erros: design que faz a prevenção de erros é melhor do que mensagens deerro. Cuidados que devem ser tomados são:

– Não usar páginas com a expressão "em construção".– Atualizar periodicamente os conteúdos das páginas, principalmente se eles acompa-

nham algum evento.– Oferecer páginas de ajuda para usuários inexperientes.– Não utilizar mapas de imagem que exijam precisão no clique.

• Reconhecimento ao invés de lembrança: o usuário não deve ter a necessidade de lem-brar de uma informação durante o percurso pelo sistema.

• Flexibilidade e eficiência de uso: usuários experientes podem ter uma forma de "cortar ocaminho"em ações freqüentes. Cuidados que devem ser tomados são:

– Não usar páginas sem conteúdo útil.– Utilizar termos que exprimam o conteúdo das páginas correspondentes.– Usar tamanhos relativos (porcentagem) em vez de tamanhos fixos, por exemplo, para

fontes ou monitores.

• Estética e design minimalista: diálogos não devem conter informações irrelevantes ouraramente necessárias. As seguintes propriedades devem ser satisfeitos são:

– Ocupar menos de 50% com conteúdo.– Ocupar menos de 20% com navegação.– Evitar frames e cores berrantes.– Evitar textos animados, imagens tridimensionais e caracteres piscando.

• Ajudar os usuários a reconhecer, diagnosticar e corrigir erros: o usuário deve ter infor-mações suficientes para identificar e saber como se recuperar de um erro.

• Ajudas (Help) e documentação: o usuário deve encontrar, de maneira fácil e focalizada,ajuda e documentação online.

Se o seu sistema não mostra as propriedades acima, então existem problemas de usabili-dade. Recomendamos reavaliar sua interface.

29


4.2.2 Simulando a deficiência de cores

Verificar se seu conteúdo é visível por pessoas com deficiência de cores é crucial para mantersua página web acessível. Para se ter uma idéia, 1 a cada 12 pessoas possui algum tipo deinconsistência na percepção da cor.

Algumas ferramentas on-line podem ajudar a ter uma idéia de como pessoas com deficiênciade visualização de cores vêem a sua página. Abaixo, apresentamos dois exemplos:

Color Vision

Disponível em <http://www.iamcal.com/toys/colors/>

Esta ferramenta ajuda a verificar como as diferentes gamas de cores seriam vistas por pes-soas portadoras de deficiência visual de cor. Apesar da página ser em inglês (restringindo entãoa acessibilidade), ele é bem útil para a verificação.

Para usá-lo, selecione as cores de fundo e texto usando as paletas de cores na esquerda. Pos-teriormente, teste as diversas opções de anomalia de cor (recomendamos principalmente testaras opções "monochromat") e verifique alterações na gama de cores presente na paleta da es-querda. Essas alterações de cores serão visíveis na área de texto "Sample Text"na direita;

30


assim, pode-se analisar quais combinações de cores de fundo e texto são visíveis por pessoasportadoras de tais anomalias.

Vischeck

Disponível em <http://www.vischeck.com/vischeck/vischeckURL.php> para verificação de pá-ginas web e<http://www.vischeck.com/vischeck/vischeckImage.php> para verificação de imagens.

Essa página pode ser especialmente útil para pessoas que precisam verificar imagens ou pá-ginas completas. Basicamente, você envia uma imagem ou a URL da página que deseja testare ele retorna a imagem/URL com as cores que simulam a visão das pessoas com deficiência napercepção de cor.

A versão que simula as cores para páginas ainda não possui suporte para algumas tecnolo-gias. Por exemplo, páginas com flash ou applets podem retornar erros.

Veja o exemplo abaixo para verificar como a página do GOOGLE apareceria para pessoas comdéficit em cores verde/amarelo:

31


4.2.3 Usando o avaliador brasileiro Da Silva

O "Da Silva"é um software avaliador que detecta um código HTML e faz uma análise do seuconteúdo, verificando se está ou não dentro de um conjunto de regras.

Para uma avaliação automatizada da acessibilidade de sua página web, podemos usar a fer-ramenta "da Silva", que está disponível on-line pela página da Acessibilidade Brasil. Para usar aferramenta, acesse "Serviços>Avaliador da Silva". Você pode acessá-lo diretamente pelo ende-reço<http://www.dasilva.org.br>.

Veja abaixo o aspecto visual dessa ferramenta Web.

32


Para usá-lo, simplesmente digite o endereço da sua página WEB no campo de texto situadona parte superior, onde se pede o endereço (URL) da página, e pressione o botão ao lado. Emalguns segundos (dependendo da velocidade de sua conexão), o seu código HTML será avaliadoe um relatório será gerado.

O relatório conterá recomendações e técnicas para que a sua página fique de acordo com asdiretivas internacionais de acessibilidade. A ferramenta permite que você selecione entre duasdiretivas: o WCAG (Web Content Acessibility Guidelines) da W3C e a E-GOV, uma diretiva espe-cializada para o governo eletrônico.

O relatório é dividido em 3 partes de acordo com a prioridade. As prioridades consideram ospontos abaixo:

1. Pontos que os criadores de conteúdo Web devem satisfazer inteiramente. Se não o fize-rem, um ou mais grupos de usuários ficarão impossibilitados de acessar as informaçõescontidas no documento. A satisfação desse tipo de pontos é um requisito básico para quedeterminados grupos possam acessar documentos disponíveis na Web.

2. Pontos que os criadores de conteúdos na Web deveriam satisfazer. Se não o fizerem, umou mais grupos de usuários terão dificuldades em acessar as informações contidas no do-cumento. A satisfação desse tipo de pontos promoverá a remoção de barreiras significativasao acesso a documentos disponíveis na Web.

33


3. Pontos que os criadores de conteúdos na Web podem satisfazer. Se não o fizerem, um oumais grupos poderão se deparar com algumas dificuldades em acessar informações conti-das nos documentos. A satisfação deste tipo de pontos irá melhorar o acesso a documentosarmazenados na Web.

Essas prioridades foram definidas pela W3C como padrões de acessibilidade WEB.

O "da Silva"permite que alguns desses relatórios sejam desabilitados. Para isso, simplesmentedesmarque os respectivos campos onde se pede as "prioridades a serem avaliadas em seu site".

Infelizmente, a versão atual (verificado em Setembro de 2006) só permite a avaliação de ape-nas 1 (uma) página por vez.

34

Capítulo 5

Acessibilidade em softwares nomercado

Aqui, mostraremos algumas informações breves sobre recursos de acessibilidade em algunssoftwares proprietários ou livres.

5.1 Lição 4 - Acessibilidade em softwares existentes

5.1.1 Acessibilidade em alguns softwares livres

Apresentaremos aqui alguns programas que estão relacionados à acessibilidade e, adicional-mente, apresentaremos alguns atalhos de teclado comuns em navegadores em ambiente Linux.

Como o conteúdo abordado nesta lição não é o foco do nosso curso, somente apresentaremosinformações superficiais. Todavia, essas informações podem ser importantes para a análise dodomínio de uso do seu sistema.

Leitores de tela

São programas que "leêm"os dados contidos na tela. Podem também traduzir gráficos quandoexistem textos alternativos ligados à imagem. São normalmente usados em conjunto com sin-tetizadores de voz, que são programas que emitem voz.

Selecionamos aqui dois exemplos. São eles:

Emacspeak:

35


É uma ótima ferramenta para os derivados do UNIX. Já está na versão 24.0 (verificado em se-tembro de 2006). Maiores informações podem ser acessadas na página <http://emacspeak.sourceforge.net/>.É um software grátis, mas não é livre. Informações sobre os seus direitos estão em<http://emacspeak.sourceforge.net/COPYRIGHT>

Gnopernicus:

É um leitor de tela para o ambiente gráfico Gnome e faz parte do Gnome Acessibility Project edo Gnome Assistive Technology Project. Além de ser um leitor de tela, é uma lupa de ampliaçãode tela. Maiores informações podem ser acessadas na página<http://www.baum.ro/gnopernicus.html>.

Compreender a utilidade dos leitores de tela nos ajudam a projetar uma página mais acessí-vel, pois podemos criar páginas que são mais fáceis de compreender quando lidos nesses tiposde programa. Por exemplo, agora sabemos que não devemos usar links como

36


<Clique aqui!> ou usar imagens sem sua descrição, pois isso dificultaria MUITO a compreençãopelos usuários de leitores de tela. Evite também usar "símbolos"como:; - ) ;: P ou: - Dem situações desnecessárias.

Maiores detalhes sobre técnicas para criar códigos HTML que possam ser lidos por leitores detela são apresentadas mais adiante.

Teclados Virtuais

O teclado virtual é um software que permite a entrada de texto de maneira alternativa ao te-clado convencional. A maioria se baseia em cliques do mouse sobre uma imagem de um teclado.São também úteis quando necessitamos de segurança em informações textuais, pois são maisdifíceis de serem registrados por keyloggers (programas que registram entradas em teclado - sãomuito usados para roubar senhas).

Um exemplo de um teclado virtual muito usado no Gnome é o GOK (Gnome Onscreen Key-board). Maiores informações sobre o GOK pode ser encontrado na página<http://www.gok.ca/>.

Atalhos de teclado

Atalhos de teclado são muito úteis quando estamos usando um ambiente gráfico e não temosacesso ao mouse. Abaixo, apresentaremos alguns atalhos muito comuns em navegadores querodam em Linux.

Teclas FunçõesALT + Tecla Acessa a barra de menu da aplicação.Setas Navega no menu.ESC Sair do menu.ENTER / RETURN Executar a seleção.ALT + F4 Fechar a aplicação.TAB Selecionar o próximo controle/link.SHIFT + TAB Selecionar o controle/link anterior.ALT + TAB Alternar entre janelas abertas.SHIFT + Setas Selecionar.CTRL + C / CTRL + INSERT Copiar.CTRL + V / SHIFT + INSERT Colar.CTRL + X Cortar.ALT + Seta para Esquerda Voltar de página.ALT + Seta para Direita Avançar de página (desfaz a volta de página).

37


O conhecimento desses comandos de teclado são úteis para entender o padrão de navega-ção dos usuários.

5.1.2 Acessibilidade em alguns softwares proprietários

Apresentaremos aqui alguns aspectos de acessibilidade em softwares proprietários muito co-muns em conteúdos WEB. São eles o Flash e o Acrobat da Macromedia / Adobe.

Adicionalmente, apresentaremos alguns atalhos de teclado úteis para usuários de Windows eInternet Explorer. O estudo desses atalhos pode ser útil para analisar o padrão de comporta-mento dos usuários desses sistemas quando o mouse não é utilizado.

Acessibilidade no Flash

A Macromedia desenvolveu algumas opções de acessibilidade a partir da versão 6.0 do Flash.O arquivo exportado não pode ser lido por todos os tipos de leitores de tela. Para lê-lo, o arquivoexportado deverá ser lido por um leitor de tela recomendado pela Macromedia/Adobe, como o"Window-Eyes"(proprietário). Detalhes sobre o "Window-Eyes"pode ser encontrado na página<http://www.gwmicro.com/Window-Eyes/>.

Essas opções de acessibilidade somente podem ser aplicadas a "símbolos"(elementos que abiblioteca do Flash interpreta como uma entidade única e independente). Para que esses símbo-los sejam úteis, eles devem ser convertidos para "movie clips"(o principal objeto manuseado peloFlash), "botões"ou "objetos de formulário".

Para editar as opções de acessibilidade, acesse "windows > other panels > accessibility". Issoabrirá a janela de descrição de objeto, que também pode ser acessada através da tecla de atalho"ALT + F2". Nesta janela, informações como o nome do objeto, sua descrição, atalhos e a ordemde seleção (pela tecla TAB) poderão ser configuradas.

Acessibilidade com o Adobe Acrobat Reader

Em versões acima do 5.5, o Acrobat permite a geração documentos PDF com suporte a textosadicionais legíveis por leitores de tela. Para usar esse recurso, podemos passar pelas seguintesetapas:

1. Abrir o documento e acessar a opção "View > Navigation Tabs > Tags".

38


2. Com a ferramenta "TouchUp Text"(disponível na barrra de ferramentas de edição avançada),clique no texto com o botão da direita do mouse e vá até a opção "Create Artifacts". Isso irádividir seu texto em blocos.

3. Selecione o bloco de texto e, com o botão direito do mouse, selecione "Properties".

4. Aberto a janela de propriedades "TouchUp", selecione a aba "Tag". Como tipo de tag,selecione preferencialmente o "span"e complete as descrições exigidas pelo formulário.

5. Teste a acessibilidade do documento gerado. Para isso, acesse na barra de ferramentas o"Advanced > Accessibility > Full Check"e execute o teste com as opções desejadas.

Alguns comandos de atalho no Windows

Abaixo, apresentaremos algumas teclas de atalho que são bastante usados quando quere-mos acessar as funcionalidades do Windows sem o mouse.

Teclas FunçõesALT Acessar a barra de menu da aplicação.CTRL + ESC ou atecla WINDOWS

Abrir o menu de inicialização do Windows.

Setas Navegar no menu.ESC Sair do menu ou voltar um nível no menu.F1 Ajuda do Windows.ENTER Executar a aplicação selecionada.ALT + F4 Sair de uma aplicação.TAB Selecionar o próximo controle.SHIFT + TAB Selecionar o controle anterior.APPLICATIONSou SHIFT + F10

Exibir o menu de contexto (o que aparece com o cli-que do botão direito do mouse).

ALT + ENTER Exibir as propriedades do objeto.WINDOWS + M Minimizar todas as janelas.WINDOWS + E Abrir o Windows Explorer.ALT + TAB Alternar entre janelas abertas.SHIFT + Setas Selecionar.CTRL + C Copiar.CTRL + V Colar.CTRL + X Cortar.

Alguns comandos de atalho do Internet Explorer

Abaixo, apresentaremos algumas teclas de atalho que são bastante usados quando quere-mos acessar as funcionalidades do Internet Explorer sem o mouse.

39


Teclas FunçõesCTRL + O Ir para a barra de endereço.TAB Selecionar o próximo link.SHIFT + TAB Selecionar o link anterior.ENTER Ativar o link selecionado.ALT + Seta para a esquerda Voltar para a página anteriormente carregada.ALT + Seta para a direita Avançar para a próxima página, desfazendo a volta de página.

40

Capítulo 6

Técnicas para um WebDesign acessível

Aqui está o núcleo do curso. Nesta seção, apresentaremos técnicas importantes para criar emanter sua página Web acessível.

6.1 Lição 5 - Técnicas, parte 1

6.1.1 Fornecer alternativas ao conteúdo sonoro e visual

Forneça um equivalente textual a cada elemento não textual

Usar atributos como "alt", "title"ou "longdesc"em tags HTML ou incorporar a descrição no pró-prio conteúdo da página. Essa regra se aplica aos seguintes elementos:

Imagens e botões

Para uma imagem simples, decorativa ou acidental, fazer apenas uma breve descrição com oatributo "alt".

<img src="access2.0.gif"alt="Símbolo da acessibilidade web"title="Símbolo daacessibilidade web"/>

Se a imagem constituir um link, descrever o destino ou seu propósito.

41


<a href="http://ncam.wgbh.org /webaccess/symbolwinner.html">

<img src="access2.0.gif"alt="link para a página de símbolos daacessibilidade web."title="link para a páginade símbolos da acessibilidade web."/>

</a>

Se a imagem precisar de descrições longas, crie um arquivo HTML com as descrições e useo atributo "longdesc".

<img src="access2.0.gif" longdesc="http://ncam.wgbh.org/webaccess/symbolwinner.html"alt="Símbolo da acessibilidade web" title="Símbolo da acessibilidade web"/>

Se você utiliza a tag "object", inclua o texto alternativo no conteúdo da tag object.

<object data="access2.0.gif"type="image/gif"height=100 width=100 >

Coloque aqui uma descrição ou um link para o arquivo contendo a descrição.

</object>

Representações gráficas de texto

Para imagens que são simplesmente mapas de bits de texto, seja porque o objetivo é usartipos de letra especiais ou outro tipo de transformação difícil ou impossível de ser feito com folhasde estilo, forneça o respectivo texto equivalente. Por exemplo:

42


<img src="face_CDTC.jpg"alt="Logo CDTC"title="Logo CDTC">

Regiões da mapa de imagem

Uma página que utilize um mapa de imagens como único meio de suporte à navegação po-derá ser bastante inacessível para usuários que utilizem navegadores não gráficos ou alguémque não use um dispositivo tradicional como mouse ou tela touch-screen.

Você dispõe de um conjunto de técnicas que asseguram que o seu mapa de imagens seja aces-sível. Essas técnicas envolvem o fornecimento de um equivalente textual para as funcionalidadescríticas existentes no mapa como, por exemplo, nomear as áreas ativas que representam linkspara outra informação.

Animações

O exemplo acima possui a seguinte construção de código.

43


<img src="bouncing_pepper.gif" alt="Animação de um pimentão que quica." ti-tle="Animação de um pimentão que quica.">

Applets e objetos programáveis

O elemento applet está ultrapassado em HTML 4.0, embora continue a ser utilizado. Parasubstituí-lo, comece a usar o novo elemento object.

Se você está modificando um applet para torná-lo mais acessível, use o atributo alt para umabreve descrição da sua ação ou propósito. Caso queira ajudar o público a compreender o pro-pósito do applet, inclua uma descrição mais detalhada no conteúdo do elemento applet, porexemplo, entre as expressões <applet> e </applet>.

O código a seguir será produzido independentemente da versão ou da capacidade do seu na-vegador para mostrá-lo.

<appletcode="Blink.class"width"500"height="40" alt="Applet Java: texto dançante."title="Applet Java: texto dançante.">

Se estiver usando um navegador com suporte a Java, você poderá ver o texto"Ser ou não ser, eis a questão. Ou seria a questão ser ou não ser...",flutuando ao longo da tela, em vez deste parágrafo.

</applet>

Arte ASCII

Exemplo 1:Veja dois gráficos criados para o relatório explicativo de um processo de produção, nos quais

pode ser visualizada a relação existente entre custos e tempo.

O gráfico feito com caracteres ASCII tem maior significado para usuários com leitores de tela,principalmente para quem usa linha Braille. O segundo parágrafo mostra a mesma informação,em uma imagem do tipo bitmap criada a partir de simples programa de desenho. Apesar destaúltima imagem ser inacessível a usuários com leitores de tela, você pode adicionar equivalentetextual usando os atributos alt ou longdesc para obter o efeito.

Exemplos: gráfico arte ASCII (esquerda) e gráfico bitmap (direita):

44


Exemplo 2:

Se a imagem construída em arte ASCII não contiver informação de extrema relevância, utilizeuma simples descrição:

: - ) Sorriso

A imagem que se segue, feita em arte ASCII, é da silhueta de uma pessoa com um chapéu.(Saltara arte ASCII).Silhueta de uma pessoa com chapéu, desenhada com caracteres ASCII.

<a href="#salto"></a>

<a name="salto"></a>

Note que o link permite à pessoa que utiliza um leitor de tela passar por cima do ASCII e chegarlogo à legenda.

Frames

45


Use o "title"e se necessário, o atributo "longdesc"no elemento frame para descrever maisdetalhes sobre o frame ou as suas relações com outros frames. Veja mais detalhes na lição 7.

Exemplo:<frame src="principal.html" longdesc="descricao.html" title="Frame com o conteúdo principal">

Scripts

Use o elemento noscript para descrever a ação ou substituir a funcionalidade de qualquerscript que integre na página.

Por exemplo, para escrever um script que produza uma animação apresentando um novo pai-nel sempre que o usuário clicar numa dada região da tela ou pressionar um tecla, use o elementonoscript para fornecer uma alternativa textual que descreva inteiramente a ação:

<script type="text/javascript">

...script para mostrar e substituir painéis de acordo com a seleção do usuário...

</script>

<noscript>

No primeiro painel, Lucy segura em uma bola de futebol.No segundo painel, Charlie Brown está a ver futebol.

E assim sucessivamente...

</noscript>

Imagens usadas em substituição dos "bullets"das listas

Observe uma lista não ordenada que faz uso de gráficos em substituição das "bullets"de listacriados por efeito pelo elemento <ul>:

• Maneiro;

• Pensativo;

• Sonolento;

46


O exemplo em código apresenta três maneiras diferentes, mas apropriadas, de utilização doatributo alt como legenda para os marcadores:

<img src="cool.gif"alt="Item: "title="Item: "> Maneiro; <br /><img src="thoughtful.gif"alt="* "title="* "> Pensativo; <br /><img src="sleepy.gif"alt= title= > Sonolento; <br />

• Para salientar o item ou qualquer outro texto simples, deve ser usado "item", especialmentese não existirem muitas entradas na lista.

• Para fornecer uma alternativa textual idêntica ao bullet (marcador gráfico) deve ser usadoum asterisco "*"ou um hífen -".

• Para uma lista com grande número de itens, é mais apropriado colocar um espaço embranco entre aspas do atributo alt. Isto poupa o usuário de leitor de tela de ouvir, repetida-mente, a indicação "Item...".

Imagens usadas como espaçadores

A criação de um arquivo de imagem muito pequeno e transparente é um truque de layoututilizado por muitos autores. Isto força espaços em branco entre outros objetos, especificando aaltura e a largura, ou os atributos hspace e vspace do elemento img.

O equivalente textual apropriado para um espaçador(spacer) é simplesmente nada, ou seja, umespaço em branco:

<img src="spacer.gif"hspace="100"vspace="10"alt= title= >

ou

<img src="spacer.gif"width="5"height = "200"alt= title= >

Observe que existe um espaço em branco entre as marcas de aspas no atributo alt. É prefe-rível, contudo, que para definir seu layout, seja feito uso de notação para folhas de estilo.

Sons reproduzidos com ou sem interação do usuário

Se você produziu um script que faz com que um aviso sonoro toque caso o visitante da suapágina tente enviar um formulário antes dos campos requeridos estarem preenchidos, coloque noseu programa ( ou script ) a capacidade de escrever uma mensagem na tela que diga algo como:

"Você tentou submeter um formulário incompleto. Preencha, por favor, os campos necessários."

47


Arquivos de áudio

Exemplo 1:

Se o arquivo de áudio for pequeno, inclua o equivalente textual no atributo alt em uma imagemque acompanha o link para o arquivo de áudio.

<a href="work-e.wav>

<img src="audio.gif"alt="Arquivo de som: Venha trabalhar conosco na CDTC."title="Arquivo de som: Venha trabalhar conosco na CDTC."/>

Escute uma mensagem deixada pelo autor.

</a>

Exemplo 2:

Se o arquivo de áudio for muito grande, crie um link para um arquivo que contenha uma trans-crição integral do arquivo. Por exemplo, se um link referencia um arquivo de música "A Festa doSanto Reis"de Tim Maia, então deve existir um link para uma página que contenha o seguintetexto:

A Festa do Santo Reis, de Tim Maia

Hoje é dia de Santo Reis

Ainda meio esquecido

Mas é o dia da festa de Santo Reis

Eles chegam tocando sanfona e violão

Os pandeiros de fitas

Carregam sempre na mão

48


Eles vão levando

Levando o que pode

Sem deixar com eles

Eles levam até os bodes

Os bodes, mé

Hoje é dia de Santo Reis

Hoje é dia

Santo Reis

Faixas de áudio ou vídeo

Um equivalente textual para a faixa de áudio é similar à transcrição de um discurso gravadoem um arquivo de áudio. Pode ser um equivalente textual sincronizado, que é o método preferido,ou um simples arquivo de texto, como o exemplo a seguir.

spielfilm.de: Os aficionados dos seus filmes gostam de etiquetá-lo como poeta, filó-sofo e visionário. Saberia o que fazer com a etiqueta?

Werner: Pouco. Eu nunca olhei para mim mesmo. Nunca estive ligado a esse fenô-meno pouco sadio, um fenômeno da moda, ser obridado a analisar a mim mesmo. Eunão sei nem sequer a cor dos meus olhos. Até olho para o espelho toda manhã e ficoatento, mas só para não me cortar ao fazer a barba. Porém prefiro não me olhar nosolhos. Eu não sei, e Deus é minha testemunha, a cor dos meus olhos.

spielfilm.de: Azul-claro, como se constata.

Werner: Tudo bem. Você bem que poderia ter dito "verde", "castanho"ou "preto".(ri)Dequalquer modo, não acredito em nada do que você diz. Mas: Vou desta vez vou ficarcom o boato.

Trechos de vídeo

Trata-se da descrição das cenas e ações no vídeo-mas não dos diálogos. No exemplo a se-guir, a descrição do que se passa no vídeo é interligada com o equivalente textual dos diálogos.O método preferido é a integração sincronizada de equivalente textual do vídeo no próprio clip dofilme.

Description

49


A title: On-air Science and Math Fair. Math is Everywhere."

Caption :

Man: Go long, way out.

Description:

A man throws a football.

Caption:

Professor : Submitted for your consideration: the ball has been thrown, and you wantto catch it. But how do you know where it will go so you can be there when it comesdown? One way is to use this formula.

Description:

The professor scribbles numbers on a blackboard.

Caption:

It factors in velocity, acceleration and time to calculate the distance the ball will go.But then, you knew that. Your brain estimates all of these values in the first seconds ofthe ball’s flight to calculate where you have to go to catch the ball.

Description:

A beach ball bounces off his head. He tries to catch it.

Caption:

This math equation helps us understand the physical world and how we function init. Whether you do it on the board or on the field, they boot work. So, next time you goout for that long pass, remember: Math is everywhere.

Math is everywhere!

Description:

50


A title: "Math is Everywhere."

Fornecer links de texto redundantes relativos a cada região ativa de um mapa de imagemarmazenado no servidor.

Providencie links de texto redundantes para cada região ativa de um mapa de imagens "server-side".

Os mapas de imagem "server-side", ou seja, os que usam o atributo <ismap> em vez do ele-mento <img>, não fazem ou não podem habitualmente fornecer qualquer informação textual so-bre os links que se encontram codificados dentro do mapa.

Se o seu mapa de imagens "sever-side"possuir links para as seções A, B e C do seu site, forneçaum texto alternativo na página.

Por exemplo, o código "server-side":

<a href="img/imgmap1.map">

<img ismap src="mapa_imagem.jpg"alt="Use por favor os linksque se seguem em vez dos que se encontram neste mapa de imagens."title="Use por favor os linksque se seguem em vez dos que se encontram neste mapa de imagens."/>

</a>

<br />

[ <a href="pimentao.htm">Seção A</a> | <a href="vine.htm">Seção B</a>|<a href="explosao.htm">Seção C</a> ]

produz o seguinte mapa de imagens server-side e correspondente equivalente textual:

51


Observação: o texto "alt"que se encontra no elemento <img> informa ao usuário que existeum equivalente textual. Não descreve, no entanto, as imagens por si só. Se você deseja descrevero mapa de imagens em detalhe, use o "longdesc".

6.1.2 Fornecer uma descrição sonora das informações importantes veiculadasem trechos visuais das apresentações multimídia.

Os leitores usados pelo usuário devem ler, automaticamente e em voz alta, o equivalente textualdos seguintes trechos visuais.

Apresentações multimídia

Em apresentações multimídia baseadas em tempo-como filme ou animação-sincronizar,sempreque possível, os textos alternativos equivalente-como legendas ou descrições sonoras dos tre-chos visuais-e da apresentação.

Uma apresentação não estática pode incluir qualquer forma de multimídia (por exemplo, um filme,animação ou apresentação com ’slides’). As legendas devem fornecer acesso às faixas de áudio;as descrições em áudio que devem fornecer acesso às faixas visuais constituem as alternativasequivalentes a estes tipos de apresentação.

Para pessoas que não têm acesso aos dispositivos de reprodução multimídia, ou para pessoassurdas ou cegas, a transição do áudio e da áudio descrição são as melhores alternativas.

A faixa que contém a legenda é uma alternativa para espectadores surdos e com dificuldadesauditivas. A faixa de descrição em áudio é uma alternativa para pessoas cegas ou com baixavisão.

Sincronizar estas alternativas com a apresentação principal, isto é, com o vídeo ou áudio, sig-nifica que todos os usuários poderão usufruir de uma melhor experiência e retirar dela maisinformação.

Como garantir que os seus filmes ou apresentações multimídia estão de acordo com as reco-mendações?

52


• Muitas vezes os projetos multimídia são criados por estúdios profissionais, que já têm oudeveriam ter capacidade de produzir equivalentes acessíveis nos requisitos do seu projeto.

• Se você mesmo produzir os clips de filmes ou elementos multimídia, é preciso que disponhade ferramentas para construir as alternativas acessíveis. A maior parte dos padrões parasom, filmes, pacotes de animação-incluindo os provenientes da QuickTime da Apple ou oRealNetworks-pode ser usada para criar formatos acessíveis.

Atualmente existem três formatos ou linguagens que suportam a capacidade de sincronizarequivalentes alternativos. Você irá precisar de diferentes programas para executar os diversosformatos. São eles o QuickTime da Apple, o SMIL ( Synchronized Multimídia Integration Langua-gem - Linguagem de Integração Multimídia Sincronizada) do W3C e o SAMI da Microsoft.

Use links redundantes para assegurar a navegabilidade

Não é suficiente fornecer descrições textuais através do atributo "alt"dos links encontrados noelemento <area>, criado no mapa de imagens através de uma figura geométrica. Para assegurarque qualquer pessoa possa navegar no seu site, ainda é necessário colocar links redundantesem formato de texto.

Para um mapa de imagens "client-side- do lado do cliente - descreva o destino a que se en-contra ligada cada área ativa. Por exemplo:

No futuro, maior parte dos navegadores será capaz de mostrar o texto alternativo fornecido peloelemento <area>.

Veja o exemplo de mapa de imagem "client-side"e o seu texto alternativo.

<img src="img/imgmap1.gif"alt="Imagem mapeada: Por favoruse os links a seguir"title="Vários ícones relacionadoscom deficiências"usemap="#map1"border=0 / >

<map name="map1>

53


<area coords="0,0,39,39"href="a.htm"alt="Link paraa seção A."title="Link para a seção A.">

<area coords="40,0,79,39"href="b.htm"alt="Link paraa seção B."title="Link para a seção B.">

<area coords="80,0,120,39"href="c.htm"alt="Link paraa seção C."title="Link para a seção C.">

<area coords="121,0,160,39"href="d.htm"alt="Link paraa seção D."title="Link para a seção D.">

<area coords="314,0,393,79"href="e.htm"alt="Link paraa seção E."title="Link para a seção E.">

</map>

<map name="map2">

[<a href="a.htm">Seção A</a>

|<a href="a.htm">Seção B</a>

|<a href="a.htm">Seção C</a>

|<a href="a.htm">Seção D</a>

|<a href="a.htm">Seção E</a> ]

</map>

6.1.3 Não recorrer apenas à cor

Assegurar que todas as informações veiculadas com cor estejam também disponíveissem cor

Assegurar que todas as informações veiculadas com cor estejam também disponíveis semcor, por exemplo a partir do contexto ou descrições.

Somente use a cor para transmitir informação quando estiver claro do ponto de vista da nota-ção e/ou do texto, porque sem a cor a informação fica sem sentido.

54


Veja exemplos de utilização de cor:

Exemplo 1-correto:

Aqui existem duas maneiras de fazer as coisas. O segundo método, que se mostraem vermelho, é o preferido.

Este exemplo pode ser visto sem problemas em dispositivos que não possuem cores (poisreferencia a opção preferida por número).

Exemplo 2-errado: Por aqui existem duas maneiras de fazer as coisas. O método preferidoencontra-se em vermelho.

Este exemplo é incompreensível em monitor monocromático. A informação só pode ser loca-lizada se o usuário puder ver através de monitor colorido.

Assegurar que a combinação de cores entre o fundo e o primeiro plano sejasuficientemente contrastante

Assegurar que a combinação de cores entre o fundo e o primeiro plano seja suficientementecontrastante para ser vista por pessoas com cromodeficiências, bem com pelas que utilizam mo-nitores de vídeo monocromáticos.

Use, em suas páginas, uma combinação de cores que ofereça um bom contraste entre textoe o fundo, e que produza um conjunto de cores que possa ser vista tanto em monitores coloridoscomo em monitores monocromáticos.

Exemplo:

55


6.1.4 Utilizar folhas de estilo

Utilizar marcações em vez de imagens

Utilizar marcações em vez de imagens para transmitir informações, sempre que existir umalinguagem de marcação apropriada.

No caso de equações matemáticas; use, por exemplo, o "MathML"para sua construção e folhasde estilo para formatar o texto e controlar o layout. Evite também usar imagens para representartexto e prefira folhas de estilo. Para maiores informações, acesse:<http://www.w3.org/Math/>

Criar documentos válidos pelos padrões W3C

Criar documentos passíveis de validação pelos padrões formais, publicados pelo W3C.

Caso seja necessário desenvolver uma página com uma gramática em particular, use a instrução"DOCTYPE"na primeira linha do seu arquivo HTML.

Esse tipo de instrução informa aos servidores, navegadores e validadores que o código estádentro das regras da linguagem informada.

No exemplo a seguir, o código está dentro das regras do HTML 4.0 Transitional. O DTD cor-responde à gramática, "Document Type Description".

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN">

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 3.2 Final//EN">

Utilizar folhas de estilo para controlar a paginação

Utilizar folhas de estilo para controlar a paginação, isto é, a disposição em página e a apre-sentação.

Use folha de estilo para controlar o layout das páginas. Os elementos <font> e <basefont>

56


estão ultrapassados no HTML 4.0.

Use folha de estilo para diagramar e formatar cor, tamanho e tipo de fonte. Para criar efeitosvisuais nos parágrafos, use CSS ao invés de <blockquote>, <ul>, <dt>, <table> e outros ele-mentos.

Exemplo:

.para{font-size: 130%; color: #ff0000} .linetwo{font-size: 70%; font-style: italic; color: #0000ff}

"A arte é a assinatura da civilização."Beverly Sills

<style type="text/css">

.para{font-size: 130%; color: #ff0000}

.linetwo{font-size: 70%; font-style: italic; color: #0000ff}

</style>

<p class=para>"A arte é a assinatura da civilização."

<span class=linetwo>Beverly Sills</span></p>

Utilizar unidades relativas

Utilizar unidades relativas, e não absolutas, nos valores dos atributos da linguagem de mar-cação e nos valores das propriedades das folhas de estilo.

Em "css", não use valores absolutos como "pt", ou "cm"e, sim, valores relativos como o "em","ex"ou em porcentagem.

Exemplo:Ao invés de usar:

.Texto{font-size: 14pt;}

57


Passe a usar:

.Texto{font-size: 1em;}

Usar elementos de cabeçalho para veicular a lógica hierárquica

Usar elementos de cabeçalho para veicular a lógica hierárquica de estrutura de acordo comas especificalções. Utilize os cabeçalhos de forma ordenada.

Exemplo correto:

Exemplo errado:

Usar a notação para listas

Usar a notação para listas; usar os seus itens corretamente. Use corretamente a estrutura eos itens das listas. Evite o uso destes elementos para formatar parágrafos. Quando necessário,

58


use listas numeradas.

Exemplo correto:

1. Lista de instrumentos encontrados em uma banda de rock:

(a) Guitarra

(b) Baixo

(c) Bateria

E o código para este exemplo é:

<ol type=1>

<li> Lista de instrumentos encontrados em uma banda de rock: </li>

<ol type=a>

<li>Guitarra</li>

<li>Baixo</li>

<li>Bateria</li>

</ol>

</ol>

Exemplo errado:

• Lista de instrumentos encontrados em uma banda de rock:

Guitarra

Baixo

Bateria

E o código para este exemplo é:

<ul>

<li> Lista de instrumentos encontrados em uma banda de rock:

59


<dl>

<dt>Guitarra

<dt>Baixo

<dt>Bateria

</dl>

</ul>

Marcar as citações

Marcar as citações, mas não utilizar marcações de citações para efeitos de formatação, como,por exemplo, o avanço de texto.

Elemento<q>

Use o elemento <q> para marcar citações.

O elemento <q> ainda não é suportado por alguns navegadores como, por exemplo o InternetExplorer. Neste caso, coloque também a indicação de citação manualmente:

Exemplo:

"Vou para casa à meia-noite"

Código:

<q lang="pt">Vou para casa à meia-noite!</q>

Elemento<blockquote>

O elemento <blockquote> também é usado para citações. Como <blockquote> faz recuo dotexto, muitas vezes é usado como forma de tabular parágrafos. Para tabular textos, porém, vocêdeve usar folha de estilos.

60


Exemplo:

No capítulo 7, bob deixa as suas palavras mais importantes:

Vou para casa à meia-noite!

Código:

No capítulo 7, bob deixa as suas palavras mais importantes:

<blockquote>Vou para casa à meia-noite!</blockquote>

O exemplo a seguir é feito em CSS e faz o mesmo efeito que o comando blockquote:

<p style="margin-left: 10%; margin-right: 10%;>Bob foi para casa...</p>

"Bob foi para casa à meia-noite, porque o trem noturno tem uma frequênciabem inferior ao verificado no horário diurno. Ele estava preocupado para nãoadormecer, mas pelo menos queria arranjar um lugar sentado."

Ou, em uma declaração de estilo de seção:

p.insetmargin-left:10%; margin-right: 10%;

e depois no HTML:

<p class="insert">Bob foi para casa...</p>

61


6.1.5 Indicar claramente qual o idioma utilizado

Identificar claramente quaisquer mudanças de idioma

Identificar claramente quaisquer mudanças de idioma no texto de um documento, bem comonos equivalentes textuais como, por exemplo, legendas.

Use o atributo "lang"para identificar claramente as alterações do idioma no texto.

Exemplo:

Mãe me disse para ir.

Ele disse, "Allons, Madame plaisante!"

E o código deverá ser:

Mãe, ele me disse para ir.

Ele disse,<span lang="fr"> "Allons, Madame plaisante!«/span>

Especificar por extenso cada abreviatura

Especificar por extenso cada abreviatura ou sigla quando da sua primeira ocorrência em umdocumento.

Quando usar uma abreviatura ou uma sigla em uma frase, lembre-se de indicar no HTML usando<abbr> e <acronym>.

Exemplo:

Quando estiver em Boston, não se esqueça de visitar o MFA, o MIT e, claro, o W3C. Pode chegarfacilmente a estes destinos através da Av. Mass ou Men. Dr.

O código será idêntico ao seguinte:

62


Quando estiver em Boston, não se esqueça de visitar o<acronym title="Museum of Fine Arts">MFA</acronym>, o<acronym title="Massachusetts Institute ofTechnology">MIT</acronym>e, claro, o<acronym title="World Wibe Web Consortium">W3C</acronym>, Pode chegarfacilmente a estes destinos através da <abbr title="Avenida Massachusetts">Av.Mass.</abbr> ou <acronym title="Memorial Drive">Mem.Dr.</abbr>.

Identificar o principal idioma utilizado nos documentos

O idioma do documento deve ser especificado na expressão HTML.

Neste exemplo, o idioma principal do conteúdo é italiano.

<html lang ="it">

<head>Cappucino</head>

<body>

<p>Volete sapere I’origine della parola cappuccino, il popolare caffelatte all’italiana?</p>

</body>

</html>

6.1.6 Criar tabelas flexíveis

Crie tabelas passíveis de transformação harmoniosa.

Identificar os cabeçalhos de linha e de coluna.

Em tabelas de dados, identificar os cabeçalhos de linha e de coluna.

63


Se ao invés de CSS, você utilizar tabelas para formatar páginas, não use a notação existentepara tabelas de dados como, por exemplo, "th", "header", "scope"ou "colgroup", porque esteselementos devem ser usados por alguns agentes para identificar e manipular os dados.

Veja o código da tabela:

<table border=1>

<caption>Exemplo de uma tabela de dados simples criada com notação HTML.</caption>

<thead>

<tr>

<td></td>

<th>Cabeçalho Col.1</th>

<th>Cabeçalho Col.2</th>

</tr>

</thead>

<tbody>

<tr>

<th>Cabeçalho linha 1</th>

<td>C1L1</td>

<td>C1L2</td>

</tr>

<tr>

<th>Cabeçalho linha 2</th>

<td>C2L1</td>

<td>C2L2</td>

</tr>

</tbody>

64


</table>

Utilizar marcações para associar as células de dados às células de cabeçalho

Em tabelas de dados com dois ou mais níveis lógicos de cabeçalhos de linha ou de coluna,utilizar marcações para associar as células de dados às células de cabeçalho. Organize tabelascomplexas de forma que seja possível identificar suas divisões com facilidade.

Veja um exemplo de tabela com o respectivo código:

Os leitores de tela atuais poderão apresentar esta tabela de forma incompreensível com, porexemplo:

DESPESAS DE VIAGEM(custo atual, euros)

VIAGEM

Refeições Alojamento Trans Total

data

Lisboa

25 Ago 97 37.74 112.00 45.00

26 Ago 97 27.28 112.00 45.00

65


Subtotal 65.02 224.00 90.00 379.02

Porto

27 Ago 97.96.25 109.00 36.00

28 Ago 97 35.00 109.00 36.00

Subtotal 196.27 442.00 162.00 800.27

Os futuros navegadores inteligentes ou leitores de tela que fazem uso de notação adicionalde HTML 4.0 (<tbody>, <thead>, <scope>, <headers>, etc.) para decodificar tabelas de forma"inteligente"possibilitam sua leitura de seguinte forma:

DESPESAS DE VIAGEM(custo atual, euros)

Viagem: Lisboa, Data: 25 Aug 97, Refeições: 37.74, Alojamento: 112.00, Trans. 45.00

Viagem: Lisboa, Data: 26 Aug 97, Refeições: 27.28, Alojamento:112.00, Trans. 45.00

Viagem: Lisboa, Subtotal, Refeições: 65.02, Alojamento: 224.00, Trans. 90.00, To-tal: 379.02

Viagem: Porto, Data: 27 Aug 97, Refeições: 96.25, Alojamento: 109.00, Trans. 36.00

Viagem: Porto, Data: 28 Aug 97, Refeições: 35.00, Alojamento: 109.00, Trans. 36.00

Viagem: Porto, Subtotal, Refeições: 131.25, Alojamento: 218.00, Trans. 72.00, To-tal: 421.25

Viagem: Totais: Refeições: 196.27, Alojamento: 442.00, Trans: 162.00,

Total: 800.27

O código para escrever uma tabela de forma a permitir um acesso diferenciado é:

<table border="1"cellpadding=2 cellspacing=3>

66


<caption>DESPESAS DE VIAGEM(custo atual, euros)</caption>

<thead>

<tr>

<th><p><span id="t-l1">VIAGEM</span>,<br />

<span id="t-l2">data</span></p></th>

<th scope="column">Refeições</th>

<th scope="column">Alojamento</th>

<th scope="column"> <abbr title="Transporte">Trans.</abbr></th>

</tr>

</thead>

<tbody>

<tr>

<th scope="rowgroup"headers="t-l1">Lisboa</th>

</tr>

<tr>

<td scope="row"headers="t-l2">25 Ago 97</td>

<td>37.74</td>

<td>112.00</td>

<td>45.00</td>

</tr>

<tr>


<td>27.28</td>

<td>112.00</td>

67


<td>45.00</td>

</tr>

<tr>

<td scope="row">Subtotal</td>

<td>65.02</td>

<td>224.00</td>

<td>90.00</td>

<td>379.02</td>

</tr>

</tbody>

<tbody>

<tr>

<th scope="rowgroup"headers="t-l1">Porto</th>

</tr>

<tr>


<td>96.25</td>

<td>109.00</td>

<td>36.00</td>

</tr>

<tr>


<td>35.00</td>

<td>109.00</td>

68


<td>36.00</td>

</tr>

<tr>

<td scope="row">Subtotal</td>

<td>131.25</td>

<td>218.00</td>

<td>72.00</td>

<td>421.25</td>

</tr>

</tbody>

<tbody>

<tr>

<th scope="row">Totais</th>

<td>196.27</td>

<td>442.00</td>

<td>162.00</td>

<td>800.27</td>

</tr>

</tbody>

</table>

Não utilizar tabelas para efeitos de disposição em página

Não utilizar tabelas para efeitos de disposição em página, a não ser que a tabela continue afazer sentido depois de ser linearizada. Ser não for o caso, fornecer um equivalente alternativo,que pode ser uma versão linearizada.

69


Em tabelas para efeitos de disposição em página, não utilizar qualquer marcaçãoestrutural para efeitos de formatação

Se for utilizada uma tabela para efeitos de disposição em página, não utilizar qualquer marca-ção estrutural para efeitos de formatação visual. Não use comandos destinados a indicar cabe-çalhos de tabela como, por exemplo, o <th> para formatar parágrafos.

Ao invés de

<th>Dê-me texto em negrito<th>

use

<td><div style="font-weight:bold">Dê-me texto em negrito</div></td>

Fornecer resumos das tabelas

Utilize o atributo "summary"dentro das tabelas para descrever o conteúdo das tabelas.

Exemplo:

<table border="1"summary="Esta tabela contém os dados relativos ao número de xícaras de café consumidas por cada deputado, o tipo de café(expresso ou capuccino),e se o toma com ou sem açúcar." >

...código da tabela...

</table>

Fornecer abreviaturas para os rótulos de cabeçalho

Use o atributo "abbr"dentro do elemento <th> quando você tiver cabeçalhos muito longos.Quando os leitores de tela acharem o "abbr"lerão apenas o seu conteúdo e não texto de cabeça-lho na integra.

70


Exemplo:

<th abbr="Tipo">Tipo de coluna</th>


6.2.1 Garantir flexibilidade em novas tecnologias

Assegure que as páginas dotadas de novas tecnologias sejam transformadas harmoniosamente.

Organizar os documentos que podem ser lidos sem CSS

Organizar os documentos de tal forma que possam ser lidos sem recurso em folhas de estilo.Por exemplo, se um documento em HTML for reproduzido sem as folhas de estilo que lhe estãoassociadas, deve continuar a ser possível lê-lo.

Exemplo:

Este exemplo usa os atributos de estilo para especificar o posicionamento vertical e horizontal:

<style type="text/css"><!–

.parte 1/* Imaginação é mais */{ padding-left:0; margin-top: 10px; color: red;font-size: 18 pt;font-family:times new roman}

.parte 2 /* importante */{ padding-left: 100px; margin-top: 40px; color: black;font-size: 14 pt;font-family:times new roman}

.parte 3 /* que inteligência */{ padding-left: 200px; margin-top: 70px; color: blue;font-size: 20 pt;font-family:times new roman}

71


parte 4 /* Albert Einstein */{ padding-left: 350px; margin-top: 100px; color: green;font-size: 16 pt;font-family:times new roman}

–></style>

Ao deixar os comandos de estilo formatarem o seu texto na tela, você pode ordenar o con-teúdo HTML de forma lógica, como por exemplo:

<div class=parte 1>Imaginação é mais</div>

<div class=parte 2>importante</div>

<div class=parte 3>que inteligência</div>

<div class=parte 4>Albert Einstein</div>

Se as folhas de estilo estiverem desativadas ou não forem suportadas pelo navegador, vocêlerá o seguinte:

Imaginação é mais

importante

que inteligência

Albert Einstein

Assegurar que conteúdos dinâmicos sejam atualizados

Assegurar que os equivalentes do conteúdo dinâmico sejam atualizados sempre que esseconteúdo mudar. Construa o "frame"sempre baseado em um documento HTML

Exemplo de frames:

72


Para simular o exemplo de frame é mostrada uma simples tabela e uma imagem.

Menu Texto

A forma acessível de inserir conteúdo em um <frame> é fazer com que a criação do mesmose baseie em um arquivo HTML

Forma correta:

<frame name="frame_logo"src="cdtc.html">

em que "home.html"deve conter o seguinte:

<img src="cdtc.gif"alt="Logotipo do CDTC."title="Logotipo do CDTC.">

Forma errada:

Se fizer da fonte do frame o próprio arquivo de imagem, não vai ser possível dar um equiva-lente textual à imagem.

<frame name="frame_logo"src="CDTC.gif">

Seria mais apropriado usar o atributo "title"do elemento <frame> para legendar ou descrevero conteúdo do frame. Isso é dificultado quando o conteúdo é dinâmico e se modifica a cadapasso. O conteúdo pode ser alterado, mas não o atributo "title"do "frame", que permanece cons-tante. Utilize, então, o html fonte de cada nova imagem. Essa página pode conter todos osequivalentes textuais ou informação explicativa necessária à compreensão por parte do usuário.

Forma errada:

73


No exemplo acima, o frame da fotografia pode ser criado com o seguinte código:

<frame src="image-chanfer.html"title="Logotipo do CDTC">

Contudo, o atributo "title"igual à "Logotipo do CDTC"não é um título apropriado para o frame,uma vez que a imagem pode se alterar de uma casa para um telefone e vice-versa.

Forma correta:

Um título mais apropriado pode mudar com a alteração da imagem que se encontra no frame.

Assegurar que as páginas possam ser utilizadas mesmo desativados os programasinterpretáveis, os applets ou outros objetos

Assegurar que todas as páginas possam ser utilizadas mesmo que os programas interpretá-veis, os applets ou outros objetos programados tenham sido desativados ou não sejam supor-tados. Se isso não for possível, fornecer informações equivalentes em uma página alternativa,acessível.

Evite colocar scripts que executem no navegador do usuário. O navegador utilizado pode nãosuportar scripts.

Evite a criação de links que usem "javascript"tais como URL. Se um usuário não usar scripts,então não será capaz de encontrar os links, uma vez que o navegador não consegue criar o con-teúdo link.

Exemplo:

Não use

<a href="javascript: pop()">Cadastre-se agora!</a>

74


porque isto é um link considerado um beco sem saída para um navegador em que os scriptsnão suportados ou gravados.

Assegure que a resposta a eventos seja independente do dispositivo de entrada

Em programas interpretáveis e applets, assegurar que a resposta a eventos seja indepen-dente do dispositivo de entrada. Sempre que tiver script associe logo a seguir com o elemento<noscript>.

Veja um exemplo de código para criar um botão com script:

<a href="javascript: pop()">Ganhe um prêmio!</a>

E o código da função script:

<script Xlanguage="JavaScript"type="text/javascript">

function pop()alert("Cadastre-se agora!")

</script>

<noscript>

Ganhe um prêmio! Siga para a página de cadastro.

</noscript>

Assegurar a acessibilidade do conteúdo dinâmico

Assegurar a acessibilidade do conteúdo dinâmico ou fornecer apresentações ou páginas al-ternativas. Veja um exemplo de apresentação alternativa:

Exemplo 1:

75


Em HTML, use <noframes> no fim de cada <frameset>.

O código abaixo cria um layout com dois frames em navegadores que suportam frames, en-quanto que o elemento "noframes"gera uma única janela de conteúdo que é mostrada nos nave-gadores que não suportam frames.

<!doctype html public-//W3C//DTD HTML 4.0 Frameset//EN">

<html>

<head>

<title>Este é o top.html</title>

</head>

<frameset cols="50%, 50%"title="O nosso documento grande">

<frame src="main.html"title="Onde os assuntos do índice são visualizados"/ >

<frame src="table_of_contentes.html"title="Índice"/ >

</frameset>

<noframes>

<body>

<a href= "table_of_contentes.html">Índice.</a>

<!– os outros links de navegação que se encontram disponíveis emmain.html e encontram-se aqui também.–>

</body>

76


</noframes>

</html>

Exemplo 2

Em HTML, use <noscript> com o <script>. O código abaixo executa um script Tcl em nave-gadores que suportam linguagem script, enquanto que o conteúdo do elemento <noscript> serámostrada a navegadores que não suportem linguagem script.

<script type="text/tcl">

...algum script Tcl para mostrar um quadro de pontuaçãodesportiva...

</script>

<noscript>

<p>Resultados dos jogos de ontem:</p>

<dl>

<dt>Estrelas da Avenida 91, Amadora 80. </dt>

<dd>

<a href="bullsonic.html">Do jogo Estrelas da Avenidavs Amadora destaca-se</a>

</dd>

...mais resultados...

</dl>

</noscript>

6.2.2 Garantir o controle do usuário sobre as alterações do conteúdo

Assegure o controle do usuário sobre as alterações temporais do conteúdo.

77


Evitar concepções que possam provocar pulsos contínuos da tela

Evitar concepções que possam provocar intermitência da tela, até que o usuário possa aces-sar o controle para interromper a seqüência. Pessoas com epilepsia fotosensitiva podem desen-cadear um ataque epiléptico com o cintilar ou piscar em uma banda de 4 a 59 intermitênciaspor segundo(Hertz), com um pico nas 20 intermitências por segundo, bem como com alteraçõesrápidas do escuro para a luz, como sucede com as lâmpadas das discotecas.

Evitar situações que possam provocar o "pisque"

Evitar situações que possam provocar o piscar do conteúdo das páginas, isto é, alterar aapresentação a intervalos regulares, como ligar e desligar. Possibilitar que o software do usuáriopossa ter o controle desse efeito. Se um conteúdo "piscar"for utilizado, forneça um mecanismopara parar o efeito de piscar.

Se tiver que dar destaque a algum texto causando que o mesmo flash - ligue e desligue-, useo CSS, atributo "text-decoration: blink ".

Não use os elementos <blink> e <marquee>. Estes elementos não fazem parte de qualquerespecificação W3C para HTML, ou seja, não são elementos normalizados. Por exemplo, um ca-beçalho que aparece e desaparece em intervalos regulares.

Se usar CSS, o usuário poderá parar o efeito, desativando a folha de estilo, ou eliminar a re-gra em uma folha de estilo personalizada.

Evitar páginas contendo movimento

Evitar páginas contendo movimento, até que os softwares do usuário possibilitem a imobili-zação do conteúdo. Quando uma página incluir um conteúdo em movimento, forneça um me-canismo que acesse o script ou o applet e que permita aos usuários "congelar"o movimento ouatualizá-lo, quando desejar.

Ao usar folhas de estilo com "script"para criar movimentos, dê possibilidade ao usuário de desli-gar ou alterar os parâmetros com facilidade.

78


Não criar páginas de atualização automática periódica

Não criar páginas de atualização automática periódica, até que os agentes do usuário possi-bilitem parar essa atualização. Se a sua página está sendo continuamente atualizada, informe aousuário que ele deve "recarregar"a página várias vezes, ao invés da página fazer isto por ele.

Por exemplo: em HTML, não cause a atualização automática nas páginas com "httpequiv=refresh"enquanto não permitir que os usuários desativem esta característica.

O código abaixo provoca com que a página se atualize automaticamente ,ou seja, recarregada acada 60 segundos. Presumivelmente você faria isto para alterar o conteúdo da página freqüente-mente.

<meta http-equiv="refresh"content="60">

<body><p>...Informação...</p>

</body>

Não utilizar marcações para redirecionar as páginas

Não utilizar marcações para redirecionar as páginas automaticamente, até que os softwaresdo usuário possibilitem parar o redirecionamento automático. Ao invés de utilizar marcações,configurar o servidor para que execute os redirecionamentos.

Veja exemplo de redirecionamento automático e de alternativas para assegurar o controle dousuário:

O código abaixo deve automaticamente mostrar a nova página cinco segundos depois de car-regar a página corrente.

<head>

<title>NÃO USE ESTE EXEMPLO!!!!</title>

79


Se, por exemplo, um objeto criado com <object>, <flash> ou <applet> requerer a interaçãodo usuário que não possa ser duplicada em um formato alternativo ( por exemplo, requerer acapacidade de movimentação física), faça o applet acessível diretamente.

A acessibilidade de objetos com sua própria interface é independente da acessibilidade do agentede usuário. Por isso, a acessibilidade deve ser construída nos objetos ou ser fornecida como umaalternativa.

Se você é programador, fique atento aos recursos disponíveis para verificar se o seus progra-mas são acessíveis, inclusive quanto às últimas atualizações de suas linguagens preferidas comSDK (System Develpment Kit), pois provavelmente elas também estarão incluindo propriedadespara acessibilidade.

Veja abaixo um exemplo de como inserir elementos Flash (note que elementos flash não pos-suem informações de acessibilidade expressos no código HTML, por isso, deve ser feito no pró-prio Flash):

<object alt="Animação com o logo da Acessibilidade Brasil"title="Animação com o logo da Acessibilidade Brasil">

<param name=movie value="exemplo_flash.swf"/>

<embed src="exemplo_flash.swf"type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/go/getflashplayer">

</embed>

<noembed><img src="exemplo.jpg"alt="Animação com o logo da CDTC."title="Animação com o logo da CDTC.">

</noembed>

<script Xlanguage=javascript>

<!–EXEMPLO DE JAVA SCRIPT//–>

</script>

<noscript>

<img src="exemplo.jpg"alt="Animação com o logo da CDTC."title="Animação com o logo da CDTC.">

</noscript>

</object>

81


6.2.4 Garantir independência de dispositivos

Projete páginas considerando a independência de dispositivos.

Fornecer mapas de imagem armazenados no cliente ao invés de no servidor

Forneça mapas de imagem armazenados no cliente ao invés de no servidor, exceto quando asregiões não puderem ser definidas por forma geométrica disponível. Um método de criar ummapa de imagens "client side"é através de utilização dos elementos <object>, <map> e <a>,embora este método não seja ainda largamente suportado.

O código abaixo deve apresentar links padrão, caso o navegador do usuário não suporte o <ob-ject> ou o carregamento de imagens se encontre desligado.

<object data="imgmap4.gif"type="image/gif"usemap=#map1>

<map name="map1">

<p>Navegue no site</p>

<a herf="a.html"shape="rect"coords="0,0,39,39">[Seção A]</a>

<a herf="b.html"shape="rect"coords="40,0,79,39">[Seção B]</a>

<a herf="c.html"shape="rect"coords="80,0,120,39">[Seção C]</a>

<a herf="a.html"shape="rect"coords="121,0,160,39">[Seção D]</a>

</map>

</object>

82


Assegurar que qualquer elemento dotado de interface própria possa funcionar de modoindependemente de equipamentos, dispositivos ou qualquer hardware.

Nem todas as pessoas dispõem de mouse ou outros dispositivos parecidos.Alguns usuáriosdependem de teclado convencional, de teclados alternativos ou do microfone para utilizar o com-putador.

Forneça equivalentes textuais para áreas de mapas de imagem "client- side", ou forneça linkstexto redundantes para mapas de imagens "server-side".

O acesso via teclado a links e controles de formulários pode ser feito através de atalhos deteclado, de ordem dos "Tabs"ou embutindo controles independentes dos dispositivos nas interfa-ces.

Atalhos de teclado permitem aos usuários combinar teclas para navegar nos links e nos con-troles de formulário em uma página. As teclas de atalho podem ser diferentes de acordo com ossistemas operacionais, mudando apenas a seqüência de teclas a serem executadas para ativar oatalho. Nas máquinas Windowns, as teclas "alt"e "ctrl"geralmente são eleitas; no Macintosh, astelas "apple"ou "clover leaf ".

A ordem dos "tabs"descreve logicamente a ordem de navegação de link para link ou de um campode formulário para outro campo, usualmente pressionando a tecla "tab".

Teste o seu site navegando somente com a tecla "tab", para avançar de link em link. Para voltarna ordem dos links use "shift"+ "tab".

Embutir controle independente em objetos cujas interfaces não possam ser controladas por ne-nhuma linguagem de notação. Por exemplo, em HTML: applets, leitores de multimídia ou flash.Os usuários devem se certificar de que os objetos importados por si só forneçam interfaces aces-síveis ou que, pelo menos, exista uma alternativa que o faça.

Em scripts, associe mais de um evento caso este seja relacionado com dispositivos.

Em programas interpretáveis, especificar respostas e eventos, preferindo-as a rotina depen-dentes de dispositivos como o mouse.

83


• Use "onmousedown"com "onkeydown".

• Use "onmouseup"com "onkeyup".

• Use "onclik"com "onkeypress".

• Use "onfocus"com "onmouseover".

• Use "onblur"com "onmouseout".

• Note que não existe equivalente de teclado para duplo-click -"ondblclick- em HTML 4.0.

Veja abaixo exemplos de especificação de respostas a eventos:

Exemplo 1

Use um manipulador de evento independente do dispositivo que trabalhe com qualquer açãode entrada apropriada: neste caso, "onfocus"trabalha com o teclado e com o mouse e é, por isso,considerado um manipulador de eventos independente do dispositivo.

O exemplo abaixo é o "botão ativado com o script": ao usá-lo em uma página, experimente clicarem cima dele ou usar "tab". Uma pequena caixa de alerta surgirá contendo uma mensagem so-bre o prêmio. A caixa desaparecerá se você pressionar a tecla "escape".

<button Xonfocus="pop1()"> Cadastre-se!</button>

O script que faz o trabalho é:

<script Xlanguage="JavaScript"type="text/javascript">

function pop1(){ alert("Concorra à 10 prêmios!")}

</script>

84


Crie uma sequência lógica de tabulação

Crie uma sequência lógica de tabulação para percorrer links, controles de formulários e ob-jetos. A tecla "tab"é usada também dentro de navegador, para você se movimentar dentro daspáginas. Portanto, as páginas devem ser dispostas para que sejam navegadas de forma linear.

O comando "tabindex"permite que você estabeleça uma ordem lógica. O "tabindex"trabalha comos elementos <a>, <area>, <button>, <input>, <object>, <select> e <textarea>.

Apesar de poder controlar a ordem de tecla "tab", o ideal é que você crie os formulários deforma lógica.

Utilização de "tabindex":

A distribuição/disposição dos campos, no formulário de exemplo abaixo, está intencionalmenteembaralhada. No entanto, o código de "tabindex"coloca uma ordem lógica para os campos; aousar a tecla "tab"eles surgem na ordem "correta- para navegadores que suportam o atributo "tab-key". Este exemplo específico apenas funciona se estiver usando o Internet Explorer 4.0 ouposteiror.

<form method="post"action="home.htm">

<input type="submit"value="Enviar"tabindex=6"/><br />

Qual é a sua cor favorita?<br />

Vermelho <input type="CHECKBOX"name="CB1"value="CheckBox1"tabindex="3"/><br />

Verde <input type="CHECKBOX"name="CB2"value="CheckBox1"tabindex="4"/><br />

Azul <input type="CHECKBOX"name="CB3"value="CheckBox3"tabindex="5"/><br />

Nome da empresa<input type="text"name="Tboxin"tabindex="2"size="20"/><br />

86


<input type="reset"value="apagar"tabindex="7"/><br />

<a href="form-alt.htm"tabindex="1"> Salte esteformulário para ver se as alternativas acessíveis </a>

</form>

Forneça atalhos por teclado que apontem para links importantes

Fornecer atalhos por teclado que apontem para links importantes -incluindo os contidos emmapas de imagem armazenados no cliente-, controles de formulários, grupo de controles de for-mulários, menus e conteúdo.

Você pode permitir que o usuário possa saltar ou ir diretamente a campos do formulário atra-vés do comando "accesskey".

Exemplo:

<a href="#fim">vai para o fim: Alt + m</a>

<a name="fim"href="#"accesskey="m"> FIM </a>

6.2.5 Soluções de transição

Caso necessário, utilize soluções temporários de transição entre uma tecnologia anterior e anova.

Evite janelas de sobreposição

Não provoque o aparecimento de janelas de sobreposição ou outras quaisquer. Não fazercom que o conteúdo da janela atual seja modificado sem que o usuário seja informado disso, atéque os agentes do usuário tornem possível a desativação de janelas secundárias.

Não é recomendado que o usuário abra uma nova janela. Se ele usar um navegador com telacheia, não poderá voltar para a página anterior.

87


Caso você tenha uma real necessidade da sua página abrir outra janela, informe ao usuário.Veja um exemplo abaixo:

<a href="outroSite.htm"target="_blank"title="nova pagina">Link para um outro site em outra janela do navegador.

</a>

Assegure o correto posicionamento dos controles de formulários

Assegure o correto posicionamento de todos os controles de formulários que tenham rótulosimplicitamente associados, até que os agentes do usuário venham a suportar associações explí-citas entre rótulos e controles de formulários.

Associe legendas aos controles dos formulários de forma que a informação seja clara Veja osexemplos abaixo:

1. A legenda está imediatamente ao lado do controle, está posicionada na mesma linha eexiste um delimitador entre as opções. Uma construção desse tipo é recomendada.

Seu código é:

• [<input type="radio"id="verde"name="cor"/><label for="verde"> verde </label> |<input type="radio"id="amarelo"name="cor"/><label for="amarelo"> amarelo </label> |<input type="radio"id="azul"name="cor"/><label for="azul"> azul </label> |<input type="radio"id="branco"name="cor"/><label for="branco"> branco </label>]]

2. A legenda está em cada linha e o controle imediatamente a seguir. Essa construção podeser um pouco confusa. Prefira que o texto e o controle esteja na mesma linha.

88


Seu código se encontra a seguir:

• <label for="verde"> verde </label> <br /><input type="radio"id="verde"name="cor"/> <br /><label for="amarelo"> amarelo </label> <br /><input type="radio"id="amarelo"name="cor"/> <br /><label for="azul"> azul </label> <br /><input type="radio"id="azul"name="cor"/> <br /><label for="branco"> branco </label> <br /><input type="radio"id="branco"name="cor"/> <br />

3. A legenda e o controle estão separados. Não use esse tipo de construção!

Seu código se encontra a seguir:

• [ <label for="verde"> verde </label> |<label for="amarelo"> amarelo </label> |<label for="azul"> azul </label> |<label for="branco"> branco </label> ] <br /><input type="radio"id="verde"name="cor"/><input type="radio"id="amarelo"name="cor"/><input type="radio"id="azul"name="cor"/><input type="radio"id="branco"name="cor"/>

Proporcione alternativas de texto linear

Use alternativas que são textos lineares simples - na mesma página ou em outra - em rela-ção a todas as tabelas que apresentem o texto em colunas paralelas e translineação, até que osagentes do usuário - incluindo as tecnologias de apoio - reproduzam corretamente o texto referido.

89


Ofereça uma alternativa para as pessoas que disponham de leitores de tela que não interpre-tam tabelas corretamente. Veja o exemplo a seguir:

Os usuários de leitores de tela ouvirá a informação da tabela da maneira seguinte:

Lição 1 Lição 2 Lição 3 Lição 4, Nesta seção, abordaremos as idéias gerais sobrea acessibilidade. Conceitos como a inclusão digital, usabilidade, legislação e ProjetoUniversal (Universal Design) serão abordados aqui. Nesta seção, formaremos umabase para projetar páginas acessíveis. Detalhes serão esclarecidos na semana se-guinte. Adicionalmente, são apresentadas algumas técnicas para validações. Aqui,mostraremos algumas informações breves sobre recursos de acessibilidade em al-guns softwares proprietários ou livres.

Neste caso, crie um texto alternativo para que os usuários de leitores de tela possam ler ainformação da maneira seguinte:

Lição 1

Nesta seção, abordaremos as idéias gerais sobre a acessibilidade. Conceitos como a inclusãodigital, usabilidade, legislação e Projeto Universal (Universal Design) serão abordados aqui.

Lição 2

Nesta seção, formaremos uma base para projetar páginas acessíveis. Detalhes serão escla-recidos na semana seguinte.

Lição 3

Adicionalmente, são apresentadas algumas técnicas para validações.

90


Lição 4

Aqui, mostraremos algumas informações breves sobre recursos de acessibilidade em algunssoftwares proprietários ou livres.

Inclua caracteres predefinidos em campos de edição dos formulários

Inclua alguns caracteres (como o asterisco) nas caixas de edição e áreas de texto em formu-lários até que os agentes dos usuários tratem corretamente os campos vazios.

Alguns navegadores antigos não permitem que a tecla TAB seja usada para movimentação den-tro de formulários. Por isso, coloque um texto no campo do formulário para que o campo sejalocalizado de forma mais fácil.

Um exemplo de código que facilita a localização de um campo seria:

O seu nome: <input type="text"name="name"size="50"value="*"/ >

Comentário: <textarea name="textArea1"rows="4"cols="50">

Escreva seus comentários aqui: </textarea>

<input type="submit"value="Enviar este formulário"/>

Insira um delimitador entre links adjacentes

Inserir, entre links adjacentes, caracteres que não funcionam como link e sejam passíveis deimpressão, sempre colocando-os entre espaços em branco; até que os softwares do usuário, in-cluindo as tecnologias de apoio, reproduzam clara e distintamente os links adjacentes. Um bomexemplo de delimitador é a barra vertical ".

Se existirem muitos links na mesma linha, separe-os com caracteres de forma a criar mais espaçoentre eles. Isso criará uma pausa maior entre os links quando forem passados por um leitor detela.

Exemplo:

91


[ <a href="a.htm">Seção 1</a> | <a href="a.htm">Seção 2</a> |<a href="a.htm">Seção 3</a> | <a href="a.htm">Seção 4</a> ]

Desta maneira, quando for usado um leitor de tela, haverá um espaço de tempo entre os linksdevido aos caracteres (sem link) colocados entre um link e outro.


6.3.1 Utilizar as diretivas do W3C

Utilizar tecnologias W3C atualizadas e adequadas à sua tarefa

Se você mantiver suas páginas dentro dos padrões do W3C, isto significa que elas estarãosempre dentro dos padrões de acessibilidade propostos pelo WAI.

Muitos comandos das versões novas do HTML podem não estar amplamente suportados portodos os navegadores, mas você não deve deixar de usá-los, pois os desenvolvedores possuemuma grande preocupação em fazer com que estes navegadores estejam cada vez mais dentrodos padrões da W3C.

Não use funcionalidades desatualizadas de tecnologias W3C

Evite usar comandos que caíram em desuso pelo HTML 4.0, como:

• applet

• marquee

• blink

• basefont

• center

• dir

• font

• isindex

92


• neby

• strike

• u

Os comandos como listing, plaintext e xmp podem ser substituídos pelo comando pre.

Possibilite que usuários recebam documentos de acordo com suas preferências locais

Forneça informações que possibilite que usuários possam receber documentos que refletema preferência, como o idioma e tipo de conteúdo.

Em vez de incluir links como "Aqui está a versão do documento em Aborígene Canadense", usenegociação de conteúdos de forma que a versão em Aborígene Canadense seja apresentada deacordo com o requerido pelos clientes desta versão dos documentos.

Existem algumas técnicas para se determinar o idioma do usuário em versões novas do HTML(por exemplo, o 4.0). São eles:

• Utilização do atributo lang="MNEMÔNICO_DO_IDIOMA".

– Ex.: <html lang="pt">

• Se não for possível a negociação de conteúdos, use o atributohreflang="MNEMÔNICO_DO_IDIOMA" em tags de referência como <a> ou <link> paraidentificar o idioma dos documentos alvo.

– Ex.: <a href="index.htm"hreflang="fr">

Se não foi possível adotar páginas acessíveis como conteúdo principal do seu site,forneça links alternativos

É normal existir situações que te impossibilita o uso de páginas acessíveis no seu site. Nessasocasiões, forneça momentaneamente um link a uma página alternativa que utilize tecnologias doW3C, seja acessível e contenha informações de funcionalidade equivalente e seja atualizada tãofreqüentemente quanto a página principal, considerada inacessível.

Como exemplo, veja o código abaixo:

93


Bem vindo ao nosso site desorganizado!!

<hr />

Siga este link se pretende: <br />

<a href="path1/">ir para uma página inacessível</a>

<br />

<a href="path2/">ir para uma página acessível</a>

6.3.2 Fornecer orientações de uso e informações de acordo com o contexto

Forneça mensagens de orientações que sejam consistentes com a situação atual do usuário nosistema.

Dê títulos para cada frame

Dê para cada frame um título que facilite a identificação dos frames e sua navegação. Veja oexemplo abaixo:

<frameset rows="20%,*,30%">

<frame src="frame1.htm"title="Título e frame da barra principal de navegação">

<frameset cols="20%,*,">

<frame src="frame2.htm"title="Frame do indice">

<frame src="frame3.htm"title="Frame para visualizacao do conteudo">

</frameset>

<frame src="frame4.htm"title="Copyright, agradecimentos e frame de navegacaosecundaria">

</frameset>

94


Descreva a finalidade e relação dos frames

Descreva a finalidade dos frames e os modos como se relacionam entre si, caso isso não foróbvio a partir dos títulos.

Caso necessário explicar com mais detalhes a finalidade de cada frame, use o atributo "long-desc"para complementar a informação.

Exemplo de uso do atributo "longdesc":

<frame src="main.htm"longdesc="descmain.htm"title="frame do conteúdo principal.">

Divida grandes blocos em blocos menores

Divida grandes blocos de informação em grupos mais fáceis de gerenciar, sempre que for ocaso.

Por exemplo:

• use <optgroup> para agrupar os elementos <option> dentro de um elemento de lista <se-lect>;

• agrupe os controles de formulário com <fieldset> e <legend>;

• use listas sempre que seja apropriado;

• use cabeçalhos para estruturar documentos;

• etc.

Veja abaixo uma lista simples, desestruturada do tipo <select>, incluso em tags <form>:

<select name="Sistemas operacionais">

<optgroup label="Microsoft"><optgroup label="Windows">

<option label="NT"value="winnt"> Windows NT</option>

95


<option label="2000pro"value="win2000pro">Windows 2000 pro</option>

<option label="XP"value="winxp"> Windows XP</option>

</optgroup>

<optgroup label="DOS">

<option label="3_0"value="dos3_0"> DOS 3.0</option>

<option label="2_0"value="dos2_0"> DOS 2.0</option>

</optgroup>

</optgroup>

<optgroup label="Linux">

<optgroup label="Debian">

<option label="CD"value="debianCD"> Debian,distribuição </option>

<option label="DVD"value="debian"> Debian,distribuição em DVD</option>

</optgroup>

</optgroup>

</select>

Em navegadores que suportam formulários <form> com esses comandos, o exemplo acimaficará assim:

96


Agrupe controles de formulário usando os elementos <fieldset> e <legend>.

O elemento <fieldset> é utilizado para agrupar controles de formulário relacionados de ma-neira lógica. Um navegador gráfico deve sublinhar esta relação através do desenho de uma bordaem volta dos elementos relacionados. Os dispositivos de apoio futuros ou agentes devem ajudaro usuário, fornecendo sentido a formulários complexos através de navegação apropriada dentrodo grupo ou grupos.

Ao associar uma <legend> significante para cada grupo <fieldset>, o autor fornece uma legendaque explica claramente o propósito ou natureza dos agrupamentos. Os softwares do usuário quesuportem o <legend> serão capazes de tornar essa informação disponível para quem deseja.Alguns navegadores gráficos atuais mostram a legenda como texto que surge num espaço cir-cunscrito por uma borda pelo elemento <fieldset>.

Veja o exemplo abaxo:

<fieldset>

<legend>Selecione sua opção</legend>

<fieldset>

<legend>Curso disponível pela CDTC</legend> <br />

<input type="radio"name="HTML"value="htm"tabindex="4">HTML </input><br />

<input type="radio"name="WebDesign"value="wbd">Web Design </input><br />

<input type="radio"name="Acessibilidade"value="acw">Acessibilidade </input><br />

97


</fieldset>

</fieldset>

Veja como o exemplo fica abaixo:

Associe explicitamente os rótulos aos respectivos controles

Use o comando <label> para associar campos nos formulários. Fazendo isso, os leitores detela associarão os elementos dos formulários de forma correta.

Veja o exemplo abaixo:

<fieldset>

<legend align="top"> Selecione os pré-requisitos: </legend><br />

<input type="checkbox"name="opcao1"id="op1"value="html"/> <br />

<label for="op1"> Conhecimento de HTML </label><br />

<label for="op2"> Conhecimento de Java Script </label><br />

<input type="checkbox"name="opcao2"id="op2"value="jscr"/><br />

<input type="checkbox"name="opcao3"id="op3"value="php"/><br />

<label for="op3"> Conhecimento de PHP </label><br />

98


<label for="op4"> Conhecimento de MySQL </label><br />

<input type="checkbox"name="opcao4"id="op4"value="msql"/><br />

</fieldset>

O código abaixo resulta na checkbox abaixo:

O exemplo acima parece ser confuso, mas a utilização do comando <label> fará com que aspessoas que usam leitores de tela não tenham problemas ao ler o formulário.

6.3.3 Identificar claramente os mecanismos de navegação

Forneça mecanismos de navegação claros. Isso deixará seu site mais integrado e consistente.

Identifique claramente o destino de cada link

O texto do link deve ser facilmente compreensível e conciso, para que tenha sentido quandofor lido fora de dispositivos padrão, como em um leitor de tela.

Veja abaixo alguns exemplos para indicação de links:

• Exemplo correto: no exemplo abaixo está colocada de forma concisa. Desta maneira o linkserá compreensível até pelos usuários de leitores de tela.

99


– Ganhe um prêmio fornecido pelo nosso patrocinador.

• Exemplos errados: no primeiro exemplo, não é necessário ligar uma frase longa, pois issopode causar confusão ao usar leitores de tela. No segundo exemplo, a frase "Clique aqui"évaga demais.

– Ganhe um prêmio fornecido pelo nosso patrocinador.

– Clique aqui para ganhar um prêmio.

Um recurso melhor para a indicação é a inclusão do atributo "title"dentro do link para fornecermais informação ao usuário. Veja o exemplo abaixo:

<a href="index.html"title="página principal do site exemplo">Ir para a página principal</a>

Forneça metadados

Forneça informações adicionais para acrescentar semântica a páginas.

Disponibilize metadados para facilitar mais ainda a navegação e a procura de informações dentrode suas páginas. Elementos principais são:

• <meta>

• <address>

• title

• <link>

Veja o exemplo abaixo:

<head>

<meta name="keywords"content="acessibilidade, usabilidade,webdesign">

100


Sistema 2341

Sistema 3412

CPU

Casa/Escritório

Usuários profissionais

Monitores

Periféricos

Serviços

Sistema design

Sistema de análise

Gestão de informação

.

.

.

...E assim sucessivamente...

Quando necessário, crie esse mapa de forma a mostrar a hierarquia das páginas. Isso poderáser feito usando o atributo "title"dentro do comando <a>. Veja abaixo um exemplo:

<a href="boavinda.htm"title="nivel1"> Página de boas-vindas </a>

<a href="main.htm"title="nivel2"> Página de entrada (página principal) </a>

<a href="produtos.htm"title="nivel3"> Produtos </a>

<a href="sistemas.htm"title="nivel4"> Sistemas </a>

<a href="sis1234.htm"title="nivel5"> Sistema 1234 </a>

102


<a href="sis2341.htm"title="nivel5"> Sistema 2341 </a>

Utilize mecanismos sistemáticos de navegação

A navegação deve ser feita de forma coerente e controlada. Uma vez familiarizado com umlayout e um design consistente, torna-se extremamente fácil ao usuário navegar ao redor do con-junto de links.

Outro benefício é saber que links importantes se encontram agrupados, possibilitando saltá-losde forma rápida para encontrar conteúdos importantes da página.

Destacar mecanismos de navegação

Forneça barras de navegação para destacar e dar acesso ao mecanismo de navegação.

Indique ao usuário as etapas do caminho percorrido durante a navegação, oferecendo a opçãode voltar a qualquer parte. Isto permite que ele encontre facilmente os botões de navegação epossa procurar o conteúdo anterior em cada página.

Um bom exemplo é a barra de navegação do nosso moodle. Além de ordenar logicamente,essas indicações beneficiam pessoas com incapacidade de leitura e aprendizagem, pois tornamprevisível a localização da informação em cada uma das páginas.

Tente organizar sua barra de navegação da maneira semelhante ao abaixo. Destaque a pá-gina atual do usuário:

• Home > Serviços > Consultoria > Investimentos

Agrupe links relacionados entre si

Agrupe links relacionados entre si, identifique os grupos - em benefício dos agentes do usuá-rio - e, até que os softwares tenham essas funcionalidades, forneça mecanismos para contornardeterminados grupos.

Os usuários cegos saltam freqüentemente de link em link quando percorrem uma página ou visu-alizam informação. Quando fazem isto, o "link text"(texto do link; que se encontra, por exemplo,entre o <a> e </a>) é lido. A barra de navegação muitas vezes é a primeira a ser lida numa pá-gina. Isto significa que os sintetizadores de fala têm que ler um número grande de links similares

103


em todas as páginas antes de chegar ao conteúdo singular da página.

Quando links se encontram agrupados em conjuntos lógicos, tais como barras de navegação,os usuários conseguem manipular uma única peça ao invés de várias. Desta forma, podem saltaro conjunto de elementos agrupados por um link e posicionar-se de forma imediata no início docorpo principal da página. Esta ação se assemelha ao que fazem as pessoas que saltam a leiturados links quando vêem o mesmo conjunto de informação em cada uma das páginas.

Os links podem também ser agrupados através da utilização do comando <map>. Não é ne-cessário ter uma imagem associada ao comando para poder usá-lo. Veja abaixo um exemplo:

<map name="servicos"alt="Serviços de consultoria do site">

Serviços <br />

<a href="a.htm"> Serviço A </a> <br />

<a href="b.htm"> Serviço B </a> <br />

<a href="c.htm"> Serviço C </a> <br />

<a href="d.htm"> Serviço D </a> <br />

</map>

Ativar diversos tipos de pesquisa

Se forem oferecidas funções de pesquisa, ativar diferentes tipos de pesquisa de modo a cor-responderem a diferentes níveis de competência e às preferências dos usuários.

Isso não obriga que você coloque um mecanismo de pesquisa no site, mas ao colocá-lo, faça-ode maneira acessível.

Existem diferentes tipos de pesquisa, como:

• por palavra-chave;

– O usuário digita apenas uma palavra e o mecanismo de pesquisa procura em todo osite as páginas que contêm a palavra digitada.

• complexa.

– Além de digitar uma palavra, o usuário adiciona operadores Booleanos (como AND eOR). Caso a palavra não seja encontrada, ele sugere semelhantes.

104


Você pode dispor, também, de mecanismos de busca parecidos com o da Yahoo(<http://www.yahoo.com>) ou Google(<http://www.google.com>). Escolha aquele que mais se adequar ao seu projeto.

Coloque informações de identificação no início de cabeçalhos, parágrafos e listas

Reduza o esforço que o usuário necessita empreender para localizar informações importan-tes, colocando informação distintiva no início dos cabeçalhos, parágrafos, listas, etc.

Isto é conhecido vulgarmente como "front-loading"(à frente) e é especialmente útil para pes-soas que acedem à informação de forma seqüencial.

Veja abaixo outros exemplos de "front-loading". Em muitos casos, essa estrutura é mais in-formativo do que textos de suporte.

• Visite o maravilhoso mundo das ratazanas, se tiver um momento e estiver voltado para otema.

• O subsolo da minhoca gigante é outro site interessante sobre minhocas.

• Réptil Burger é sem dúvida o melhor site sobre hamburger de carne de cobras.

Veja abaixo exemplos que não usam o "front-loading":

• Se tiver um momento e estiver voltado para o tema, Visite o maravilhoso mundo das ratazanas.

• Um outro site interessante é o subsolo da minhoca gigante, que fala sobre minhocas.

• Réptil Burger é sem dúvida o melhor site sobre hamburger de carne de cobras.

Forneça informações sobre coleções de documentos

105


Informe o usuário sobre os documentos compostos por diversas páginas.

Use ferramentas de compactação de arquivo, tais como zip, tar e gz, para criar pacotes facil-mente descarregáveis de arquivos relacionados ou páginas. Informe sobre o tamanho do arquivoe o seu tempo estimado para download.

Esses tipos de documentos são indicados para páginas estáticas de navegação linear, comomanuais ou instruções passo-a-passo.

Como aconselhado em itens anteriores desta página do curso, utilize a tag <link> para referen-ciar as páginas relacionadas à página atual do documento (como próxima página, página anteriore o índice).

Forneça meios para ignorar arte ASCII com muitas linhas

Como visto na lição 5, crie meios para saltar as imagens feitas de caracteres (letras). As pes-soas que usam leitores de tela ficarão agradecidas por isso.

Exemplo:

<p>

<a href="#pos_arte"> Saltar a arte ASCII </a> criado pela CDTC

<!– Insira sua arte ASCII aqui –>

<a name="pos_arte"> Primeira linha do corpo do conteúdo principal </a>

</p>

6.3.4 Priorizar a clareza e a simplicidade dos documentos

Utilize linguagens mais claras o possível

A linguagem usada deve ser clara, consistente e adequada ao conteúdo do site.

106


Siga abaixo as instruções de redação:

• Tente encurtar os cabeçalhos e as descrições dos links. Reveja todos os cabeçalhos, notase menus para ver se as palavras cruciais significam exatamente o que se pretende, e seexistem mais palavras em comum que tenham o mesmo significado.

• Coloque o tópico da frase ou parágrafo no início de um desses elementos.

• Limite cada parágrafo a uma idéia principal.

• Evite linguagem idiomática, jargão técnico e outras expressões e vocabulários não familia-res.

• Evite o uso de linguagem especializada com vocabulário familiar, a não ser que seja forne-cida uma explicação mais extensa.

• Evite a voz passiva.

• Evite uma estrutura de frases complexa.

• Construa frases curtas para os links, mas com sufuciente significado, de forma que façasentido quando lido fora do contexto, isolado ou como parte de uma série de links.

Complemente o texto com outras representações

Tente usar gráficos ou sons como alternativas que complementem o texto, para que isso faci-lite a compreensão da página.

A inclusão de imagens, animações ou vídeos em apresentações facilitam e são especialmenteúteis para os analfabetos que podem visualisar apresentações visuais. Os surdos podem se be-neficiar de equivalentes de comunicação com as mãos (linguagem gestual). Os analfabetos porincapacidade ou não podem também se beneficiar muito de equivalentes gráficos.

Os equivalentes não visuais e não textuais são bastante diversos. Entre os mais comuns, encontra-se a pré-gravação do áudio das músicas, das línguas faladas ou dos efeitos sonoros. Estes equi-valentes serão especialmente importantes para analfabetos que podem perceber apresentaçõesem áudio. As apresentações em suporte de áudio produzidas por sitetizadores de fala e o su-porte tátil do braille são geralmente derivadas do texto ou de equivalentes textuais; por isso, nãonecessitam de trabalho adicional por parte dos desenvolvedores.

107


Criar estilo sistemático

Crie estilos sistemáticos de apresentação. Seja coerente ao longo das diferentes páginas.

A criação de um estilo sistemático de apresentação tem pontos positivos e pontos negativos.Veja a tabela abaixo para visualisá-los.

108