e-mag Checklist de Acessibilidade Manual para o Desenvolvedor

Documentos relacionados
SIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível

Anexo I. Recomendações para construção de páginas acessíveis para o EAD da Universidade Caixa.

Você pode ter um site bonito, com um bom layout e facilmente navegável... Mas, isso não significa que todos estejam divertindo-se com ele.

Recursos Complementares (Tabelas e Formulários)

e-mag Checklist de Acessibilidade Manual para Deficientes Visuais

Desenvolvimento Web. HTML 5 Parte I. Prof. Vicente Paulo de Camargo

DICAS PARA DESENVOLVER SITE ACESSÍVEL

HTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto

Adicionando mais tags HTML

MANUAL DO ADMINISTRATOR

Acessibilidade na WEB. Euder Flávio Fernando Iran Giovanne Librelon Victor Hugo

O que faz um servidor/navegador web? 14/03/2016 Rômulo da Silva Lima Slid e 2

TAGS. O HTML trabalha com o sistema de tags (etiquetas). Esse sistema funciona da seguinte maneira. <tag>conteúdo da tag</tag>

Web Design Aula 10: Formulários - Parte2

Introdução a Web Standards. Reinaldo Ferraz e Clécio Bachini

Guia acessibilidade. Pode encontrar as Directivas para a acessibilidade do conteúdo da Web no endereço <

A diferença entre um site que implementa CSS e outro que não o usa é gigantesca e notável.

Sumário. Página 2 de 22

ENGENHARIA DE USABILIDADE Unidade V Acessibilidade à Web. Luiz Leão

ANEXO III. Requisitos de Usabilidade

Prof. Fernando Gonçalves Abadia. Sistemas Multimídias

Acessibilidade de materiais digitais

ConstruMED Metodologia para a Construção de Materiais Educacionais Digitais Baseados no Design Pedagógico. Acessibilidade

Programação para web HTML: Formulários

DreamweaverCC Plano de Aula - 24 Aulas (Aulas de 1 Hora).

Plano de Aula - DreamWeaver CC - cód Horas/Aula

Manual para atualização do portal do CNPq - versão 1.0 Popularização da Ciência

Manual para atualização do portal do CNPq - versão 1.0 Parcerias

Gestão Unificada de Recursos Institucionais GURI

Professores: Jeferson Bogo & Renato Mafra Informática. Navegadores

CSS Organizado e simples. Cercomp Equipe Web Nícolas Lazarte -

IFSC/Florianópolis - Programação para a web Prof. Herval Daminelli

MANUAL DO USUÁRIO PORTAL DA IMPRENSA NACIONAL PESQUISA NOS DIÁRIOS OFICIAIS

Roteiro 01. Professor: Prof. M.Sc. Odilon Corrêa da Silva. Curso: Engenharia de Computação. Disciplina: Programação para WEB

Aula 17 Introdução ao jquery

INFORMÁTICA (PC-SP / ESCRIVÃO / VUNESP / 2014)

Hiperlinks. Hiperlinks. Hiperlinks. Tag <a></a> Hiperlinks 07/05/2011

Manual para atualização do portal do CNPq - versão 1.0 Bolas e Auxílios

Explorando a Internet

MINISTÉRIO DA EDUCAÇÃO Universidade Federal do Amapá UNIFAP Núcleo De Tecnologia Da Informação NTI WORDPRESS INSTITUCIONAL UNIFAP MANUAL DE USO

Maurício Samy Silva. Novatec

MECDAISY PARA LEITURA DE LIVROS DIGITAIS BENTO GONÇALVES

Gestão Unificada de Recursos Institucionais GURI

MANUAL DO ALUNO PORTAL UNIVERSITÁRIO - UniMB Sanmia Shunn de Oliveira Jesus Costa 1 Walex Milto Martins dos Santos 2

Um esquema de nomes para localização de fontes de informação na Web, esse esquema chama-se URI.

INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END COM HTML, CSS E JAVASCRIPT

Gestão Unificada de Recursos Institucionais GURI

Tabelas. Tabelas. Iniciando a construção... Atributos <table> Tag <table></table> 05/06/2011

INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 2

TABELAS EM HTML. Prof: André Aparecido da Silva Disponível em:

Esta primeira parte do manual do Moodle está destinada para orientações em como acessar o curso, atualizar o perfil e realizar as atividades.

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Elementos da Seção do Corpo Resumo

ANÁLISE DE ACESSIBILIDADE WEB DO PROTÓTIPO DA BIBLIOTECA VIRTUAL ALEXANDRIA

Uma Abordagem para Testes de Acessibilidade dos Sistemas Desenvolvidos no CPD-UFRGS

MANUAL DE PUBLICAÇÃO NO PORTAL CAMPUS MATÃO

HTML 5 TAGS BÁSICAS E ESTRUTURAIS. Prof. Rosemary Melo

Manual do InCD Reader

Instituto de Ensino Superior de Rio Verde - IESRIVER SEMIPRESENCIAL MANUAL DO ALUNO SEMIPRESENCIAL MANUAL DO ALUNO MOODLE

Bem-vindo ao Word. Para praticar o uso dos recursos do Word, procure o texto Experimente em vermelho ao longo do documento.

#Aula Nº 2 Marcação XHTML webstandards.samus.com.br webstandards.samus.com.br/aulas/aula2.pdf Vinicius Fiorio Custódio

Tutorial de Acesso ao AVA - Ambiente Virtual de Aprendizagem e-learning Consinco. Agosto 2015, versão 1

Autoria Web. Formulários Aula 5. Cleverton Hentz

Introdução à linguagem HTML. Volnys Borges Bernal

Gestão Unificada de Recursos Institucionais GURI

Programação para Web HTML - Parte 2

Na seqüência, será aberta uma página de login de acesso ao ambiente de gerenciamento do portal, conforme ilustrado na figura 01, abaixo: Figura 01

Gestão Unificada de Recursos Institucionais GURI

Prezado Aluno, Preparamos este guia rápido, contendo orientações para você explorar e praticar as funções básicas disponíveis.

Logótipos de nível de conformidade Level-A

Volnys Bernal. Introdução à linguagem HTML. Introdução à linguagem HTML. Visão geral. Visão geral. Visão geral. Visão geral.

Descrição de imagens em editores de texto e apresentação de slides

Dreamweaver CS5 Plano de Aula - 24 Aulas (Aulas de 1 Hora).

COM222 DESENVOLVIMENTO DE SISTEMAS WEB. Aula 01: HTML e CSS

Dreamweaver CS6 Plano de Aula - 24 Aulas (Aulas de 1 Hora).

TUTORIAL DO PORTAL DO ALUNO. Equipe da Diretoria de Tecnologia da Informação e Comunicação 30/08/2012

UNICALDAS Faculdade de Caldas Novas Núcleo de Educação à Distância - NEaD. MANUAL DO ALUNO (UnicaldasVIRTUAL) Versão 1.0

Microsoft Word 2010 NORMA ABNT para Trabalhos Acadêmicos Conceitos Básicos

Plano de Aula - Dreamweaver CS5 - cód Horas/Aula

Design: estrutura e estética

Guia prático do. Passo a passo

Coleção - Análises de marketing em clientes de

Aula 01 Microsoft Excel 2016

Tabelas. Tabelas. Iniciando a construção... Atributos <table> Tag <table></table> 05/04/2011

SGCD 2.0 Sistema Gerenciador de Conteúdo Dinâmico

Programação Web - HTML

Especificação do Caso de Uso Metodologia de Desenvolvimento de Sistemas Fase Especificação ASES-Web

Unidade 2: Navegação e Edição Básica

Gestão Unificada de Recursos Institucionais GURI

Programação Web Aula 2 XHTML/CSS/XML

Aula 3. Imagens. <img src="foto.jpg" />

Aula 11 Introdução ao Java Script

SISTEMA ATENA INSTITUIÇÕES DE ENSINO

Vejamos agora as ferramentas mais utilizadas para criação de imagens:

Links, Imagens e Tabelas

Relatório da acessibilidade da plataforma Big Blue Button v0.81

REDES DE COMUNICAÇÃO. 11º - ANO Professor: Rafael Henriques

HyperText Markup Language HTML. Formulário

Transcrição:

Ministério do Planejamento, Orçamento e Gestão Secretaria de Logística e Tecnologia da Informação Departamento de Governo Eletrônico Ministério da Educação Secretaria de Educação Profissional e Tecnológica Rede Nacional de Pesquisa e Inovação Projeto de Acessibilidade Virtual e-mag Checklist de Acessibilidade Manual para o Desenvolvedor Junho de 2010

Ministério do Planejamento, Orçamento e Gestão Secretaria de Logística e Tecnologia da Informação Departamento de Governo Eletrônico Ministério da Educação Secretaria de Educação Profissional e Tecnológica Rede Nacional de Pesquisa e Inovação em Tecnologias Digitais Projeto de Acessibilidade Virtual Checklist de Acessibilidade Manual para o Desenvolvedor e MAG Modelo de Acessibilidade em Governo Eletrônico Junho de 2010

Checklist de Acessibilidade Manual para o Desenvolvedor Acordo de Cooperação que entre si celebram o Ministério do Planejamento, Orçamento e Gestão (MP), representado pela Subsecretaria de Planejamento, Orçamento e Administração e o Ministério da Educação, representado pela Secretaria de Educação Profissional e Tecnológica (SETEC). Desenvolvido por: Núcleo de Acessibilidade Virtual do IFRS Campus Bento Gonçalves Núcleo de Acessibilidade Virtual do IFCE Campus Fortaleza Núcleo de Acessibilidade Virtual do IFBaiano Campus Catu e Campus Guanambi Contato: acessibilidade@renapi.org A presente obra encontra se licenciada sob a licença Creative Commons Atribuição Uso nãocomercial Compartilhamento pela mesma licença 3.0 Brasil. Para visualizar uma cópia da licença, visite http://creativecommons.org/licenses/by nc sa/3.0/br/ ou mande uma carta para: Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.

HISTÓRICO Data Versão Descrição Papel Autor 30/10/2009 0.1 Levantamento de dados Bolsista Jucélia Almeida 06/11/2009 0.2 Revisão ortográfica Bolsista Bruna Salton 06/11/2009 0.3 Revisão do documento Professor Orientador Andréa Sonza 09/12/2009 0.4 Finalização do documento Bolsista Jucélia Almeida 11/12/2009 1.0 Revisão final Professor Orientador Andréa Sonza 19/02/2010 1.1 Alterações sugeridas pelo MPOGBolsista Jucélia Almeida 20/02/2010 1.2 Revisão após alterações sugeridas Professor Orientador Andréa Sonza 23/02/2010 1.3 Novas alterações sugeridas Bolsista Jucélia Almeida 26/02/2010 1.4 Revisão Parcial Professores Orientadores Andréa Sonza e Gleison Nascimento 20/05/2010 1.5 Alterações Bolsista Jucélia Almeida 02/06/2010 1.6 Alterações da formatação Bolsista Bruna Salton 02/06/2010 2.0 Revisão Final Professor Orientador Andréa Sonza Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 4

SUMÁRIO 1 INTRODUÇÃO...6 2 CHECKLIST...7 3 REFERÊNCIAS BIBLIOGRÁFICAS...23 Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 5

1 INTRODUÇÃO O checklist de acessibilidade para desenvolvedores contém pontos de verificação para serem seguidos na hora do desenvolvimento. Esses pontos são baseadas em experiências de testes com deficientes visuais, além do estudo dos padrões de desenvolvimento Web da W3C, diretrizes de acessibilidade da WCAG 1.0, 2.0 e Samurai, e MAG 1.0 e 2.0. É importante destacar que, com base nessas experiências estamos desenvolvendo o e MAG 3.0 1.1 Objetivo O objetivo deste documento é orientar o desenvolvedor para que, desde o início do desenvolvimento, já exista a preocupação com a acessibilidade, usabilidade e comunicabilidade, evitando retrabalho e facilitando o teste manual do deficiente visual. Também objetiva servir como guia ao desenvolvedor caso haja alguma dúvida relacionada aos três conceitos de qualidade de uso já mencionados no código do seu sítio. 1.2 Acrônimos e Abreviações DV deficiente visual W3C World Wide Web Consortium (Consórcio para a Rede Mundial de Computadores) WCAG Web Content Accessibility Guidelines (Guia de Acessibilidade para Conteúdos Web) e MAG Modelo de Acessibilidade do Governo Eletrônico. Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 6

2 CHECKLIST Site avaliado Avaliadores Leitores de Tela Navegadores Sistemas Operacionais Data Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 7

2.1 Links Item O que avaliar Sim Não N.A. Local onde não foi respeitado O site fornece a localização do usuário em um conjunto de páginas? Em todas as páginas do site, excetuando a página inicial, deve ser fornecidos links com o conjunto de páginas percorridas ao usuário, de preferência antes do início do conteúdo. Esta ação, além de dar segurança para o DV, também oferece a opção para ele retornar algum nível Os níveis anteriores da página já visitados devem estar linkados Exemplo: Você está em: Página inicial > Downloads As âncoras estão sendo usadas corretamente? As âncoras são utilizadas através do atributo id. TOPO: <h1> <a href="index.php" id= tituloh1 > Educação Ministério da Educação</a> </h1> RODAPÉ: <a href="#tituloh1">topo da página</a> Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 8

Quando o link que é ancorado não for vinculado a nenhuma ação, é necessário o uso do seu próprio id no atributo href, pois se for colocado apenas # o foco irá para a barra de endereços quando pressionada a tecla "Enter". Também não funcionará se o href for deixado em branco, pois o link perde seu foco. <a href= #fimmenu id= fimmenu >Final do Menu</a> Há links indicadores na página? Deve haver links indicativos em alguns pontos da página. Os mais comuns e essenciais são Início de Menu, Fim de Menu, Inicio de Conteúdo e Fim de conteúdo. Se houver dicas para usar atalhos em links indicadores, essas dicas devem estar ligadas por âncoras ao link indicador. Em caso de sites muito extensos a quantidade de links indicadores pode ser maior. Exemplo: Topo: <a href= #iniciomenu >Inicio do Menu [Alt + 1]</a> Inicio do menu: <a href= #iniciomenu id= iniciomenu accesskey= 1 class= oculto >Inicio do Menu</a> Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 9

Os links apresentam descrições curtas e objetivas? Eles identificam o destino ao qual remetem? Abrem o conteúdo na mesma página de navegação ou avisam que irão abrir em uma nova página? É preciso que os links apresentem uma descrição curta e objetiva para facilitar o entendimento do usuário É preciso identificar claramente o destino do link, ou seja, que ele realmente descreva o item ao qual remete Links servem como focalizadores para os leitores de telas O link deve abrir seu conteúdo preferencialmente na mesma página em que o usuário está navegando, caso seja necessário abrir em uma nova página, sugerimos o uso de comandos JavaScript do tipo não intrusivo ao invés do atributo target= _blanc. O JavaScript deve retornar uma mensagem ao usuário notificando o que o link abrirá em uma nova página. <a href= www.novapagina.com.br class= ComandojavaScript >NomeDoLink</a> É obrigatório o uso do elemento href para que o leitor proceda à leitura como um link. Se o link não possuir um destino é preciso colocar o valor # <a href="#" id="voltar">voltar a página anterior</a> Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 10

Há atalhos para facilitar a navegação pelo site? Esses atalhos funcionam corretamente? Para que os atalhos funcionem corretamente com os leitores de tela, é preciso ter o atributo accesskey no link onde se inicia a informação do atalho, pois é esse atributo que fará com que o foco encontre a informação Por exemplo: Topo: <a href= #iniciomenu >Inicio do Menu [Alt + 1]</a> Inicio do menu: <a href= #iniciomenu id= iniciomenu accesskey= 1 class= oculto >Inicio do Menu</a> É recomendado o uso de números para os atalhos para não entrar em conflito com os leitores de tela, pois estes utilizam letras para atalhos de suas ferramentas O ideal é utilizar as dicas de atalhos no topo de todas as páginas e posicioná las juntas para facilitar a compreensão do DV. As dicas devem ser âncoras para seus atalhos, assim o DV poderá também teclar "Enter" para chegar ao elemento desejado Para ocultar os links de atalhos de maneira que não prejudique a leitura pelos leitores de tela, é preciso proceder da seguinte maneira: HTML <a href= #iniciomenu class= oculto >Inicio do Menu [Alt + 1]</a> Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 11

CSS a.oculto{ text indent: 20000px;//fazer o texto sumir display:block;//para funcionar no ie outline:0;//arrumar a borda no Firefox } Como sequência dos atalhos sugerimos utilizá los em ordem de importância: o Alt+1 para menu o Alt+2 para conteúdo o Alt+3 página inicial o Alt+4 Pesquisar 2.2 Conteúdos As imagens estão devidamente etiquetadas? A imagem deve ser etiquetada, com uma descrição clara e simples do conteúdo que agrega A descrição da imagem deve iniciar com o seu tipo de conteúdo, por exemplo: gráfico, imagem, foto, banner, logo... Para etiquetar uma imagem basta usar o atributo alt na tag img Exemplo: <img src= cavalinho.jpg alt= cavalo recém nascido deitado na terra, sendo acariciado pela mãe /> Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 12

A leitura das palavras e frases está sendo compreendida? Os parágrafos estão com um tamanho razoável? As animações em Flash estão descritas? As palavras precisam estar devidamente acentuadas e, as frases, devidamente pontuadas Os parágrafos não devem ser muito extensos, pois isso dificulta a leitura pelos Leitores de Telas Quando há objeto flash em uma página é necessário inserir uma descrição, inclusive nos botões e controles internos Os arquivos para download apresentam a extensão a qual são disponibilizados? Eles estão em formato compatível com o leitor de telas? Dar preferência a arquivos em formato PDF ou RTF, os quais são lidos pela maioria dos leitores de tela. Sugerimos também a extensão.doc devido ao fato de ser lido por quaisquer leitores. Não bloquear o arquivo, pois normalmente arquivos bloqueados não conseguem ser lidos pelos leitores. Sugere se colocar a extensão junto com o nome do arquivo, para que o DV tenha conhecimento do tipo de arquivo que está sendo disponibilizado. Há verborragia na página? Verborragia corresponde a informações repetidas ou desnecessárias em um site. Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 13

As tabelas são disponibilizadas apenas quando necessárias? Seu conteúdo está mesclado? Existem conteúdos que poderiam estar em tabelas e não estão? Conforme os padrões de desenvolvimento web, tabelas devem ser usadas apenas para dados tabulares. Esse item visa verificar se há dados não tabulares em tabelas ou se há dados tabulares fora de tabelas. Tabelas, de um modo geral, são elementos de difícil navegação para leitores de tela e especialmente para a compreensão do deficiente visual, por isso aconselhamos a utilização apenas quando forem imprescindíveis. Cuidados importantes: o Utilização do atributo summary, pois ele é um resumo da tabela. Coloque apenas em tabelas que realmente necessitam de um resumo; o Usar o elemento caption para título da tabela; esse elemento é o título principal da mesma; o Para tabelas simples, o uso apropriado do elemento th é essencial para torná la acessível. Contudo com um pouco mais de esforço, podemos incrementar a acessibilidade aos dados da tabela. thead e tfoot são usados para agrupar uma linha de cabeçalhos no topo e outra no final da tabela. Se thead e tfoot forem usados, você deverá usar também tbody para definir o corpo da tabela, que é a parte que contém as células de dados. Na verdade uma tabela poderá conter mais de um tbody; o Em tabelas de dados com dois ou mais níveis lógicos de cabeçalhos de linha ou de coluna, Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 14

utilizar marcações para associar as células de dados às células de cabeçalho. Para associar dados das células, deve ser seguida uma das formas abaixo: Usar o atributo 'headers' para as células de tabelas <td> em conjunto com o atributo id na célula de cabeçalho <th>. Usar o atributo 'scope', associado a 'col' e 'colgroup'. o Colocar o atributo abbr para abreviar um cabeçalho longo de modo que ele não seja lido por inteiro toda vez que o leitor de tela passar por ele; o Em alguns casos os desenvolvedores utilizam colunas vazias em cabeçalhos ou dados para obter um espaçamento entre as colunas de uma tabela. O leitor de telas Jaws, por exemplo, lê "blank" toda vez que encontra uma célula vazia e isto pode reduzir a usabilidade e a acessibilidade das tabelas de dados. Nesse caso CSS deve ser usado no lugar de células vazias para controlar a apresentação de uma tabela de dados. Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 15

2.3 Formulários Os formulários funcionam corretamente? A ordem de tabulação está correta? As descrições dos elementos estão adequadas? No caso da utilização dos capcha's, há também uma alternativa em áudio? O primeiro passo para tornar o formulário acessível é organizá lo de forma a ser compreensível, tanto na sua formatação quanto visualmente, além de prover uma adequada descrição de seus campos. Se o formulário possuir capcha (um tipo de teste de desafio resposta usado em computação para garantir que a resposta não é gerada por um computador) é preciso disponibilizar, junto com esse recurso, uma descrição em áudio, possibilitando assim a autonomia de preenchimento ao usuário deficiente visual. Cuidados necessários: o Form: é recomendável sempre utilizar as tags form, mesmo que o formulário tenha apenas um elemento, como é o caso das caixas de edição para pesquisa em um site; o Imput type= text, select, textarea: devem estar associados com um label. Essa associação é feita usando o mesmo valor no atributo for do label e id do elemento input, select ou textarea. <label for= ano >Seu nome:</label> <select id= ano name= ano > <option value= 2008 >2008</option> <option value= 2009 >2009</option> </select> Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 16

oinput submit, reset, button : esses atributos transformam o elemento input em botões, para eles não usamos o elemento label como os demais; oselect: sempre que for utilizado select sozinho em um formulário, usar obrigatoriamente um botão para submeter a escolha. Ao usar eventos javascript para abrir automaticamente a opção, quando selecionada, não funcionará corretamente com o leitor de telas, pois será executado o comando cada vez que o leitor de telas focar um desses elementos; o fieldset: separa os elementos em grupos para melhorar a compreensão, podendo inserir quantos achar necessário dentro de um formulário; o legend: indica o título para o grupo de elemento dentro do fieldset; o tabindex: não é aconselhado usar atributo tabindex para que a navegação siga a ordem na qual o formulário foi programado. Se for preciso Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 17

utilizar esse comando, utilizá lo de forma que mantenha uma ordem de tabulação de acordo com a importância de preenchimento. As caixas combinadas e caixas de seleção possuem um botão para o envio ao invés de remeterem automaticamente quando escolhido um elemento? As caixas combinadas (input text com uma lista de sugestões de preenchimento) e caixas de seleção (selects) não podem remeter automaticamente ao ser escolhida uma opção. Elas devem ter um botão de envio para que o usuário de leitor de telas possa navegar pelas opções sem problemas. <form action="/ept/redirecionar.php" method="post"> <fieldset> <label for="destaques"> Destaques</label> <select name="destaques" id="destaques"> <option value="0" selected="selected"> Destaques do Governo </option> <option value="http://www.brasil.gov.br"> Portal de Serviços do Governo </option> <option Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 18

value="http://www.radiobras.gov.br/"> Portal da Agência de Notícias </option> <option value="http://www.fomezero.gov.br/"> Programa Fome Zero </option> </select><input type="button" value="ok" id="destgoverno" /> </fieldset> </form> Há um campo de busca no site? O resultado da busca é de fácil acesso? Os botões funcionam adequadamente? Eles estão devidamente descrito? Há muitos botões de opções (radio Button) no formulário? Esses botões podem ser No caso de sites extensos é importante o uso de um campo de busca. Esse campo, quando utilizado, deve remeter o seu foco no início do resultado da busca. Os botões devem remeter a um local ou uma mensagem que seja lida pelo leitor de tela. A descrição do botão é feita pelo atributo value e deve estar clara e objetiva. <input type="submit" value="buscar" name="buscar" /> A leitura dos botões de opção em um formulário por parte de usuários de leitores de tela pode ser dificultosa e muitas vezes não compreendida pelos deficientes Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 19

substituídos por caixa de seleção? visuais. Com isso sugere se a troca dos botões de opção pelas caixas de seleção (selects) sempre que possível. 2.4 Estrutura do site Os menus estão em forma de lista? Quando há submenus ocultos, é disponibilizado um aviso para mostrar/ocultar esses sub menus? As camadas lógicas estão Os menus devem estar em forma de lista/itens. Caso o menu apresente sub itens ocultos, o site deve informar ao usuário a existência dos mesmos, com mensagens para mostrar/ocultar sub itens. Quando o sub menu está fechado: <h3><a href # >A Instituição</a></h3><a href="#" class="oculto">expandir</a> <h3><a href # >Contatos</a></h3><a href="#" class="oculto">expandir</a> Quando o sub menu está aberto: <h3><a href="#">a Instituição</a></h3><a href="#" class="oculto">retrair</a> <ul class="sub_sessao"> <li><a>...</a></li> </ul> Uma das premissas mais importantes pensadas ao Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 20

separadas adequadamente? O site possui sumário para conteúdos longos? programar um site com o uso de padrões de desenvolvimento Web é a separação de camadas lógicas, ou seja, temos a linguagem (X)HTML, as folhas de estilo (CSS) e o DOM (Document Object Model) Como o leitor lê todo o conteúdo HTML da página, deve haver uma separação entre a linguagem (X)HTML e as folhas de estilo (CSS) da página, evitando assim a poluição sonora, ou seja, a leitura de itens desnecessários pelos leitores de tela. Quando houver eventos JavaScript junto com (X)HTML, (JavaScript intrusivo), o leitor de telas, além de não conseguir fazer a leitura desse elemento, poderá perder o seu foco dentro da página. Por isso utiliza se a camada DOM, que faz a separação entre (X)HTML, CSS e JavaScript. É preciso que os eventos JavaScript estejam em um arquivo separado e ligados ao (X)HTML por meio da id dos elementos Quando uma página possui um conteúdo muito extenso com vários títulos, é importante o uso de um sumário com esses títulos antes do conteúdo para Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 21

facilitar a navegação. Esse sumário deve estar em forma de âncoras e, ao término de cada parte, deverá haver um link para voltar ao sumário. A estrutura das páginas está uniforme? A div conteúdo encontra se antes da div menu? Os títulos apresentam uma As páginas devem ter uma estrutura lógica, ou seja, por blocos de fácil compreensão, e padrão para todas as páginas, exceto a página inicial, que normalmente possui uma estrutura diferenciada. Alguns deficientes visuais não sabem utilizar atalhos, além disso as âncoras (atalhos) não funcionam em Interfaces Especializadas como o Dosvox. Nesses casos, para os DV's não precisarem navegar por todos os itens de menu antes do conteúdo, sugerimos que o conteúdo seja lido antes que o menu. Visualmente menu e conteúdo continuam na mesma disposição, mas para usuários de leitores de tela, a ordem de leitura passa a ser: conteúdo e depois menu. Para melhor compreender como utilizar os níveis de Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 22

ordem lógica no texto? Eles estão descritos corretamente? títulos, comparamos um site com um livro: O nome do livro é o h1, os capítulos são h2, os sub capítulos são h3, e assim sucessivamente. Cada página deverá ter apenas uma tag h1, já que se pressupõe que cada página tenha um único título principal. O título h1 da página é frequentemente usado com o nome da empresa/instituição. Normalmente o título h1 é substituído por uma imagem (logo), mas deverá permanecer com seu conteúdo, mesmo que não visivelmente, para que o leitor de telas possa ler. Não é necessário fazer o uso de todos os 6 níveis, exceto quando o texto for classificado em muitas seções, exigindo assim uma documentação muito rígida. Os níveis do h2 ao h6 poderão ser usados mais de uma vez na página, mas sem excesso e com lógica textual Quando for usado o atributo title nos títulos, usar no title o mesmo conteúdo que no título, seguido de informações adicionais, caso desejar. Isso porque quando há um title no elemento alguns leitores de tela dão preferência ao title e não leem o conteúdo. Exemplo: <h1> <a href="http://portal.mec.gov.br" title= Educação Ministério da Educação Clique para acessar o site > Educação Ministério da Educação </a> Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 23

</h1> Existe o Mapa do Site? A tabulação segue a ordem visual da tela? Para melhorar a navegação o site deve conter uma página com o Mapa do Site O mapa deve ser apresentado, de preferência, em forma de lista, assim como um sumário, e deve conter os principais links de conteúdos. Sugerimos utilizar tantos níveis quantos forem necessários A tabulação (itens focáveis) na página deve manter uma ordem lógica, assim como aparece visualmente. 2.5 Acessibilidade O site possui a opção de alto contraste? Ela está funcionando corretamente? Para o DV com baixa visão é muito importante ter uma alternativa de alteração de cores para o site. É aconselhável que o site tenha ao menos uma opção para alteração de contraste, que é a padrão: fundo preto, fonte branca, links amarelos... Se o site contemplar mais de uma opção de alteração de cores é preciso ter cuidado para não colocar muitas; 3 a 4 opções seria o ideal. O alto contraste escolhido em uma página deve ser armazenado em cache, assim quando forem acessadas outras páginas do site elas já abrirão com a opção escolhida Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 24

O site possui uma página com dicas de navegação? Há alguma observação extra sobre 1 acessibilidade, 2 usabilidade e 3 comunicabilidade? O site possui opções para redimensionamento do texto? É importante que o site possua dicas de ferramentas específicas dele, inclusive para auxiliar a navegação. As dicas precisam estar descritas de forma compreensível. Não é necessário colocar dicas de ferramentas dos navegadores e leitores de tela. Descrever se houve alguma dificuldade de navegação, referente à distribuição do conteúdo, atalhos, indicadores, texto, etc. Descrever sugestões de melhorias, caso houver. Para o DV de baixa visão é muito importante que o site contemple a alternativa para redimensionamento do texto O ideal é que haja um link que, na medida em que o usuário acessa, a fonte aumente ou diminua gradativamente, assim o DV pode ajustar o tamanho de acordo com a sua necessidade Sempre que tiver a opção de aumentar e diminuir fonte deve ser colocado um link também para tamanho 1 Acessibilidade: possibilidade de leitura com o agente de usuário. O Agente de Usuário refere se ao software para ter acesso ao conteúdo web. Inclui navegadores gráficos, navegadores de texto, navegadores de voz, celulares, leitores de multimídia, suplementos para navegadores, como os leitores de tela e os programas de reconhecimento de voz. Se um Agente de Usuário, como, por exemplo, um navegador ou um leitor de telas, não detectar o tipo de codificação de caracteres usado no documento web, o usuário corre o risco de ter em seu site um texto ininteligível. 2 Usabilidade: produtividade, eficiência de uso e funcionalidade do ambiente facilidade de acesso para TODOS. 3 Comunicabilidade: processo de comunicação desenvolvedor usuário; mede o nível de compreensão do usuário. É preciso que o usuário compreenda cada evento contido na interface, que os dados/informações presentes na mesma sejam transmitidos com clareza. Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 25

normal. O tamanho escolhido em uma página deve ser armazenado em cache, assim quando forem acessadas outras páginas do site elas já abrirão com a opção escolhida Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 26

3 REFERÊNCIAS BIBLIOGRÁFICAS SONZA, Andréa Poletto. Ambientes Virtuais Acessíveis sob a perspectiva de usuários com limitação visual. Tese (Doutorado). Universidade Federal do Rio Grande do Sul, Programa de Pós Graduação em Informática na Educação, Porto Alegre, Maio de 2008. Disponível em <http://www.bento.ifrs.edu.br/ept/tese> Acesso em nov/09. Checklist de acessibilidade manual para desenvolvedores Versão (2.0) 27