Nmero da verso 00 01 02 03 04 05 06 07 08 09 10
Registro de modificaes
Sumrio
1 1.1 1.2 2 CONSIDERAES INICIAIS ............................................................................................ 4 CONCEITOS DE PGINAS ACESSVEIS ............................................................................... 4 DEFICINCIAS MAIS COMUNS ............................................................................................ 5 DIFICULDADES BSICAS DA UTILIZAO DA WEB .................................................. 6
2.1 PARA PESSOAS COM DEFICINCIA VISUAL ........................................................................ 6 2.2 PARA PESSOAS COM DEFICINCIA AUDITIVA ..................................................................... 6 2.3 PARA PESSOAS COM DEFICINCIA MOTORA ...................................................................... 7 2.4 PARA PESSOSA COM DEFICINCIA MENTAL OU COM DIFICULDADE DE APRENDIZADO E/OU ATENO .................................................................................................................................. 7 3 3.1 3.2 3.3 3.4 3.5 3.6 4 TCNICAS PARA FACILITAR A ACESSIBILIDADE EM PGINAS WEB ..................... 8 IMAGENS, GRFICOS E ANIMAES .................................................................................. 8 FORMULRIOS ............................................................................................................... 10 TABELAS ........................................................................................................................ 12 FOLHAS DE ESTILO......................................................................................................... 13 BARRAS DE NAVEGAO ................................................................................................ 13 DIVERSOS ...................................................................................................................... 14 CONTATO COM O DESENVOLVEDOR DO STIO........................................................ 17
BIBLIOGRAFIA ............................................................................................................... 19
1 Consideraes Iniciais
Este manual apresenta recomendaes de acessibilidade para os servios eletrnicos do Governo do Estado de So Paulo. O seu objetivo estabelecer um conjunto de requisitos mnimos para compor o padro e-poupatempo de acessibilidade em pginas Web. Este trabalho um esforo conjunto da Casa Civil, da FUNDAP Fundao do Desenvolvimento Administrativo, da PRODESP, atravs da Superintendncia Poupatempo e da Rede SACI CECAE / Universidade de So Paulo projeto que visa estimular a incluso social e digital, a melhoria da qualidade de vida e o exerccio da cidadania das pessoas com deficincia. Espera-se que estas recomendaes contribuam para estabelecer um padro comum de qualidade no que diz respeito acessibilidade Web para pessoas com deficincia ou com outras dificuldades. importante esclarecer que a simples aplicao destas recomendaes auxilia, porm no garante a acessibilidade do stio. Um processo visando acessibilidade deve ser empregado desde o momento da concepo do stio ou de sua reviso de projeto, incluindo prottipos e testes com usurios para que as metas de acessibilidade sejam de fato atingidas.
Da mesma forma que engenheiros e arquitetos devem construir edifcios com rampas para cadeira de rodas, entre outras coisas, desenvolvedores de software devem adaptar seus programas para este significativo segmento da populao: segundo o Censo Demogrfico do IBGE - Instituto Brasileiro de Geografia e Estatstica, cerca de 14,5% da populao brasileira tem algum tipo de incapacidade ou limitao. (*) Tecnologia Assistiva: Equipamento ou software usado para dar apoio s pessoas com deficincia, removendo ou reduzindo barreiras na sua vida diria. Tecnologias Assistivas incluem lentes de aumento, leitores de tela, dispositivos de apontamentos, teclados e impressoras especficos, etc.
Cada pessoa com deficincia pode encontrar uma ou mais barreiras na utilizao da Internet, que podem ser eliminadas ou minimizadas pelo desenvolvedor Web, pelo browser, pela tecnologia assistiva, pelo sistema operacional ou pela plataforma de hardware.
Pessoas desse grupo necessitam de um texto equivalente para toda imagem apresentada na pgina Web. Os leitores de tela usam o texto equivalente para descreverem a imagem. A pessoa com deficincia visual, na maior parte das vezes, utiliza o teclado ao invs do mouse portanto o recurso da navegao atravs do teclado deve estar garantido. Exemplo 1: a tecla TAB usada para mudar o foco para um novo item a ser selecionado, e ento o leitor de tela faz a dublagem do item focalizado. Exemplo 2: a tecla ENTER usada no lugar do clique duplo do mouse. Para quem tem baixa viso necessrio a utilizao de hardware ou software para ampliar o texto ou os recursos do prprio browser. Pessoas com dificuldade de visualizar cores perdem as informaes de textos que utilizam cores para dar destaque. O mesmo acontece com pessoas de baixa viso se o destaque das letras for feito atravs de seu tamanho, contraste ou localizao.
2.4 Para Pessosa com Deficincia Mental ou com Dificuldade de Aprendizado e/ou Ateno
Esto includas neste grupo pessoas com dislexia e dficit de memria. Elas necessitam de uma linguagem simplificada. Uma alternativa pode ser utilizar a sua habilidade auditiva e visual simultaneamente, fornecendo para um mesmo texto o seu correspondente em udio, e com suporte visual como ilustraes.
Descrio do Grfico O contedo do arquivo graficopizza_desc.html poderia ser: <p>Descrio do Grfico Pizza</p> <p>Esta pizza mostra a porcentagem de carros e caminhes em um total de veculos que passam em um pedgio por hora. Os carros so representados pela maior poro vermelha e os caminhes pela menor parte em azul. 75% so carros e 25% so caminhes.</p> O cdigo em HTML seria: <img src="pizzagraf.gif" alt="75% carros e 25% caminhes" width="154" height="142"/> <a href="graficopizza_desc.html">Descrio do grfico</a> c) Inserindo um Texto Alternativo para uma Animao (Script) Ao incluir um SCRIPT (como JavaScript) para a produo de uma animao, fornea um texto alternativo que descreva inteiramente a ao. Se o browser do usurio no permitir a execuo de scripts, o trecho do programa descrito no elemento NOSCRIPT o que ser executado. Portanto, utilize NOSCRIPT para descrever a ao ou substituir a funcionalidade de qualquer SCRIPT. Exemplo: <script type="text/javascript">...script</script> <noscript>No primeiro painel temos No segundo painel E assim sucessivamente... </noscript>
3.2 Formulrios
a) Rtulos Associe rtulos (LABEL) aos campos dos formulrios. Estes rtulos servem como marcadores para os leitores de tela que utilizam este atributo para indicar o propsito do campo. Rtulos podem ser usados para qualquer tipo de campo: texto, menu, checkboxes, etc. Exemplo: Nome: Endereo:
Submit
<form method="post" action=http://www.saci.org.br/form.php> <label for="nome1">Nome</label> <input name="nome" id="nome1" size="30" /> <label for="endereco">Endereo</label> <input name="address" id="endereco" size="45" /> <input type="submit" value="Submit" /> </form> Nota: os atributos FOR e ID devem ter o mesmo valor, desta forma o campo associado com o rtulo. b) Agrupando Campos Correlacionados No suficiente, para quem no v, associar campos correlatos (com vrias opes) simplesmente pela proximidade dos rtulos. Campos correlatos podem ser agrupados atravs do atributo FIELDSET. Cada FIELDSET contm uma legenda, um texto que descreve o grupo de itens associados. Os itens ficam agrupados por uma borda. especialmente importante agrupar campos do tipo check boxes ou radio buttons. O leitor de tela l a legenda e, em seguida, l os campos informando se eles esto checked ou no.
10
Exemplo:
* Sexo
masculino feminino
<fieldset> <legend>* Sexo</legend><br> <input id="s_masculino" type="radio" name="sexo" value="masculino"> <label for="s_masculino">Masculino</label> <input id="s_feminino" type="radio" name="sexo" value="feminino"> <label for="s_feminino">Feminino</label> </fieldset> c) Tcnicas para Indicar Campos Obrigatrios De nada adianta incluir um * para indicar que o campo obrigatrio pois no serve de marcao para os leitores de tela e a indicao de cor no vista por pessoas daltnicas. Inclua o * no rtulo do campo. Se tabelas forem usadas para alinhar campos de formulrio coloque, se possvel, a indicao de campo obrigatrio (*) junto com o rtulo do campo, na mesma clula. Exemplo: <label for="cidade">* Cidade:</label> <input id="cidade" type="text" name="cidade" value="" size="30">
* Cidade:
d) Adicionando Informaes para o Preenchimento dos Campos O atributo TITLE fornece uma informao adicional para um item do formulrio. Quando o dispositivo de entrada posicionado sobre o campo que contm um TITLE, o texto definido ser ativado. O TITLE tambm falado pelo leitor de tela. Exemplo: <input type="text" name="num2" id=fone2 title="Entre com 3 digitos para o cdigo da cidade" />
11
3.3 Tabelas
Tabelas so muito usadas em pginas Web, tanto para apresentao de dados em forma ordenada quanto para auxiliar na formatao da pgina. A descrio de tabelas de dados pode ser um grande empecilho para os leitores de tela se no forem bem programadas. Ao definir uma tabela de dados, utilize o atributo <TH> para criar cabealhos nas colunas e linhas, desta forma os leitores de tela, ao lerem qualquer clula da tabela especificam antes os cabealhos das linhas e colunas. Utilize o atributo SUMMARY para adicionar informao tabela de dados descrevendo brevemente o propsito e a organizao da mesma. Este texto no ser apresentado na tela, mas se o usurio desejar ele ser lido pelo leitor de tela. Exemplo: <table summary = Tabela que informa as notas do aluno na disciplina de ingls. So fornecidas as notas da prova escrita, exerccios e teste oral.></table> Notas do aluno Nome Maria Joo Prova 6 5 Exerccios 10 7 Oral 9 3
Utilizando o atributo <TH> e associando cada campo a este cabealho, um leitor de tela poder ser capaz de ler o contedo de cada clula da seguinte forma: Nome Jose, Prova 5, Exerccios 7, Oral 3 Note, no cdigo, a associao dos cabealhos nos respectivos campos: <tr> <th id="t1">Nome</th> <th id="t2">Prova</th> <th id="t3" >Exercicios</th> <th id="t4">Oral</th> <td headers="t1">Maria</td> <td headers="t2">6</td> <td headers="t3">10</td> <td headers="t4">9</td>
12
</tr> <tr>
</tr>
</tr>
Uma tcnica para evitar este desconforto fazer um link ncora no comeo da pgina, com o intuito de enviar o usurio para o contedo principal da mesma. Este link deve estar bem no topo da pgina. Exemplo 1: Incluindo o link na pgina <a href="#main">Passar para o contedo principal da pgina </a> ...links da barra de nevegao... <a name="main"></a> ...comeo do contedo principal da pgina... Exemplo 2: Incluindo o link na pgina para os leitores de tela, mas escondendo-o visualmente. A tcnica, neste caso, associar uma imagem vazia ao link. <a href="#main"><img src="spacer.gif" width="1" height="1" alt=Passar para o contedo principal da pgina"></a>
3.6 Diversos
a) Definies de Fontes Pessoas de baixa viso lem melhor fontes do tipo Arial do que Times New Roman, maiscula e minsculas do que somente maisculas, e preferem entrelinhas maiores do que o padro. Para definir as fontes em folhas de estilo, use os atributos do CSS 'FONT', 'FONT-FAMILY', 'FONT-SIZE', 'FONT-SIZE-ADJUST', 'FONT-STRETCH', 'FONT-STYLE', 'FONT-VARIANT', e 'FONT-WEIGHT'. Especifique mais de uma fonte, para o caso de alguma no estar disponvel. Especifique tambm uma fonte genrica (sans-serif) que funcionar em qualquer caso. Exemplo: h1, h2 {font-family: Arial Black , Helvetica Bold, sans-serif} Ao invs de escrever palavras com espaos para destac-las (ex: H E L L O ), prefira definir o tamanho da fonte na folha de estilo (ex: font-size=120%) pois ser mais compreensvel leitura dos leitores de tela. Ampliadores podem reformatar o texto e objetos distorcendo o tamanho e as fontes em uma pgina Web. Para resolver este problema o melhor usar mltiplos atributos. Exemplo 1: em grficos utilizar tanto cores quanto padres diferentes para indicar as barras ou reas de dados distintas.
14
Exemplo 2: ao invs de utilizar atributos de tamanho de fonte para indicar o cabealho de um texto, utilize marcadores de cabealho (H1, H2, H3, etc.) pois so eles que sero usados pelas tecnologias assistivas para indicar a ocorrncia de um cabealho. b) Definies de Cores Garanta que os textos e os grficos mantenham a legibilidade e significado quando observados sem cores. As pessoas com problemas visuais ou daltnicas podero ter dificuldade em distinguir diferenas cromticas, de contraste ou de profundidade. Lembre-se de que ainda existem pessoas que utilizam monitores monocromticos e com baixa resoluo. Assegure-se que exista suficiente contraste na combinao da cor de fundo e da cor das letras. Isto ser importante para pessoas daltnicas e para usurios que utilizam monitores branco e preto. Para testar se o contraste suficiente, imprima a pgina em branco e preto ou teste em um monitor monocromtico. Na declarao de cores, utilize nmeros ao invs do nome da cor. No utilize somente cores para dar nfase a textos, use tambm (ou preferencialmente) tamanho de fontes diferentes. Exemplo: Use: h1 {color: #808000} e no use: h1 {color: red} Nota: O nome da cor ser retirado da linguagem nas prximas verses. Use os atributos do CSS para especificar cores para texto (COLOR), para cores de fundo (BACKGROUND-COLOR), para cores de borda (BORDER-COLOR) e para link visitado e ativo. Permita que as cores do texto, links e fundo possam ser alteradas. c) Identificar o Idioma em um Pargrafo, Texto Alternativo ou Legendas. Exemplo: <p>Ele disse,<SPAN lang="en">"Hi, fellows. Lets go!"</SPAN></p>
15
d) Janelas Sobrepostas ou do Tipo Pop-up Evite abrir novas janelas ou sobrep-las na tela atual, ou mover o foco para um outro frame. Se isto tiver que acontecer, avise o usurio e preferencialmente oferea um recurso para fech-las. e) Pontuao em Textos Use pontuao sempre que possvel, como por exemplo, no final de sentenas em listas ordenadas, no final do texto do atributo ALT, etc. Ao encontrar pontuao (vrgulas, pontos, etc.) os leitores de tela fazem uma pausa, o que deixa o texto mais compreensvel. f) Uso de Listas Prefira o uso de listas numeradas pois a pessoa com deficincia visual no tem o benefcio de ver a separao dos itens de uma lista se eles forem separados por pontos, traos, etc. Com o uso de um leitor de tela a lista ficar mais compreensvel se for ordenada com nmeros. g) Uso de Links Textos usados como links devem ser palavras ou expresses compreensveis fora do contexto. (ex: No use clique aqui, e sim saiba mais sobre o trnsito na cidade) Links embutidos em objetos devem ter textos equivalentes. Coloque os links em uma ordem lgica que permita uma navegao clara e compreensvel atravs do teclado, permitindo a ativao dos elementos da pgina por meio do mesmo. Fornea, em todas as pginas, um link para a pgina de entrada do stio. h) Abreviaturas e Siglas Fornea uma verso por extenso de qualquer abreviatura ou sigla, pois podem se tornar indecifrveis quando utilizadas por leitores de tela ou sistema Braille. i) Textos em Movimento Pessoas com deficincia de aprendizado, com deficincia fsica e mesmo os leitores de tela no conseguem ler textos em movimento. No caso de uso deste recurso fornea um mecanismo para imobiliz-lo ou desativ-lo.
16
17
18
6 Bibliografia
Maximum Accessibility John M. Slatin and Sharon Rush Addison Wesley, 2003 IBM Accessibility Center http://www.ibm.com/able/index.html CSS Techniques for Web Content Accessibility Guidelines 1.0 http://www.w3.org/TR/WCAG10-CSS-TECHS/ Web Acessibility Tutorial from Jim Thatcher http://www.jimthatcher.com/webcourseb.htm Recomendaes para a acessibilidade do contedo da Web - 1.0 Guia do W3C, de 5 de Maio de 1999 http://www.geocities.com/claudiaad/acessibilidade_web.html Avaliador de acessibilidade em lngua portuguesa, da Silva http://www1.acessobrasil.org.br/dasilva/dasilva.html HTML for the World Wide WEB, %th Edition Elizabeth Castro Peachpit Press, 2003 Canal Acessibilidade Rede SACI http://www.saci.org.br
19
Para desenvolver suas atividades a Rede SACI conta com parceiros, apoiadores e colaboradores, no Brasil e no exterior. esta malha que, ao funcionar em mo dupla, recebendo e transmitindo informaes, torna o trabalho vivo, sintonizado com a real necessidade das pessoas e com o momento atual.
20
Governador do Estado Geraldo Alckmin Secretrio da Casa Civil Arnaldo Madeira Secretrio de Estado de Comunicao Roger Ferreira Secretaria de Estado de Comunicao Emerson Figueiredo Patricia Ribas Reis Guedes Sistema Estratgico de Informaes Roberto Meizi Agune Prodesp Paulo Srgio Varella Imprensa Oficial Hubert Alqures Fernando Henrique Guarnieri Fundap Neide Hahn Ncleo de Servios Eletrnicos Sergio Bolliger e-Poupatempo lvaro Gregrio Amrico C. Santos Neto Carlos Torres
21
Este manual foi desenvolvido por Lucy Gruenwald com a colaborao de Ana Maria Barbosa e Marta Gil, da Rede SACI, com direitos cedidos ao Governo do Estado de So Paulo Este manual est disponvel em verso eletrnica: www.cqgp.sp.gov.br
22