SIEP / RENAPI

Dicas HTML e CSS para Desenvolvimento

de um Site/Portal Acessvel

Setembro de 2009
Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessvel

Cuidados em geral
Separar Uma das premissas mais importantes pensadas ao desenhar mediante o uso de
adequadamente as padres a separao de camadas lgicas, ou seja, temos a linguagem (X)HTML, as
camadas lgicas folhas de estilo (CSS) e o DOM (Document Object Model)
Como o leitor de telas l todo o contedo HTML da pgina, deve haver a separao
entre contedo (programado em linguagem (X)HTML) e elementos de estilizao
(programados em CSS) evitando assim, a poluio sonora (leitura de itens
desnecessrios).
Se h eventos JavaScript junto com (X)HTML (JavaScript intrusivo), o leitor de telas,
alm de no conseguir fazer a leitura desse elemento, poder perder o seu foco
dentro da pgina. Por isso, utiliza-se a camada DOM, que onde colocamos todos os
eventos JavaScript, atribuindo o evento atravs da id dos elementos no (X)HTML.
Colocar a div Isso serve para que os deficientes visuais (DVs) no precisem navegar por todos os
contedo antes da itens de menu antes do contedo, pois, apesar de os atalhos auxiliarem nesse sentido,
div menu ainda existem dois problemas:
o Alguns DVs no sabem utilizar atalhos
o As ncoras (atalhos) no funcionam em Interfaces Especializadas como o
DosVox
Deixar a estrutura Um site deve conter uma estrutura uniforme em todas as suas pginas, pois a
uniforme existncia de um padro entre as pginas facilita muito a navegao.
Usar ncoras As ncoras so utilizadas atravs do atributo id. Ex.:
corretamente 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>
necessrio o uso do atributo href para ele mesmo no link, pois se for colocado
apenas # o foco ir para a barra de endereos quando pressionada a tecla Enter.
Tambm no funcionar se deixar o href em branco, pois o link perde seu foco.
Usar Atalhos Para que os atalhos funcionem corretamente com os leitores de tela, precisa ter o
atributo accesskey no link onde se inicia a informao do atalho, pois o atributo que
far com que o foco de leitura encontre a informao.
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 nmeros para os atalhos para no entrar em conflito com os
leitores de tela, pois esses programas utilizam letras nos atalhos para suas
ferramentas.
Para padronizar os atalhos recomendado o uso de javaScript, pois o uso apenas do
atributo accesskey comporta-se diferente nos navegadores. Por exemplo, no Internet
Explorer (IE) precisa-se de alt+atalho, enquanto que no Firefox precisa-se de
alt+shift+atalho.
O ideal usar as dicas de atalhos no topo de todas as pginas e colocar as dicas juntas
para facilitar a compreenso do DV. Nas dicas devem conter ncoras para seus atalhos,
assim o DV poder tambm usar a tecla Enter para chegar ao elemento desejado.
Para ocultar os links de atalhos de maneira que no prejudique na leitura dos leitores
de tela, procede-se da seguinte maneira:
HTML
<a href=#inicioMenu class=oculto>Inicio do Menu [Alt +
1]</a>
CSS
a.oculto{
 text-indent:-20000px;//fazer o texto sumir
display:block;//para funcionar no ie
outline:0;//arrumar a borda no Firefox
}
Como sequncia sugerimos usar em ordem de importncia:
o Alt+1 para menu
o Alt+2 para contedo
o Alt+3 pgina inicial
o Alt+4 Pesquisar
Colocar opo de Para DV com baixa viso muito importante ter uma alternativa de cor para o site.
Alto contraste aconselhvel que o site tenha ao menos uma opo de cor, que a padro: Fundo
preto, fonte Branca, links amarelos, ... Se forem acrescentadas outras opes de
contraste, necessrio ter cuidado para no colocar muitas 3 a 4 opes seria o
ideal.
O alto contraste escolhido em uma pgina deve ser guardado em cache, assim quando
forem acessadas outras pginas do site elas j abriro com a opo escolhida.
Colocar opo de Para DV de baixa viso muito importante que haja alternativa para aumentar a fonte
Aumentar e diminuir do site.
a fonte O ideal colocar um link que, ao ser pressionado, aumente ou diminua
gradativamente, assim o DV pode ajustar o tamanho de acordo com a sua
necessidade.
Sempre que tiver a opo de aumentar e diminuir fonte deve ser colocado um link
tambm para tamanho normal, para poder voltar ao tamanho normal quando for
necessrio.
O tamanho escolhido em uma pgina deve ser guardado em cache, assim quando
forem acessadas outras pginas do site elas j abriro com a opo escolhida.
Fazer Mapa do Site Para melhorar a navegao, o site deve conter uma pgina com o Mapa do Site.
O mapa deve estar, de preferncia, em forma de lista, assim como um sumrio. Alm
disso, deve conter os principais links de contedos, usando quantos nveis forem
necessrios.
Oferecer um Em todas as pginas do site, com exceo da pgina inicial, deve ser usada uma
feedback localizao para o usurio, normalmente antes do incio do contedo. Isso, alm de dar
segurana para o DV, tambm oferece a opo de retorno a nveis anteriores.
Os nveis anteriores pgina que ele se encontra, devem estar linkados.
Ex.: Voc est em: Pgina inicial > Downloads
Colocar bookmark Quando em uma pgina h um contedo muito extenso com vrios ttulos,
ou sumrio para importante o uso de um sumrio com esses ttulos antes do contedo, para facilitar a
contedos longos navegao.
Esse sumrio deve estar em forma de ncoras e, ao trmino de cada parte, dever ter
um link para voltar ao sumrio.
Cuidados especficos para cada elemento
Imagens A imagem deve ser etiquetada. Esta etiqueta deve ser uma descrio clara e simples
referente ao contedo da imagem.
Para etiquetar uma imagem basta usar o atributo alt na tag img.
Exemplo:
<img src=cavalinho.jpg alt=cavalo recm nascido deitado na
terra, sendo acariciado
pela me />
Listas Listas so muito utilizadas na programao Web por seu bom nvel de acessibilidade.
No necessitam de descries ou tags adicionais.
Tabelas Tabelas so elementos difceis para a navegao com leitores de tela e especialmente
para a compreenso do Deficiente Visual, por isso aconselhamos a utilizao apenas
quando muito necessria.
Cuidados necessrios:
o Utilizao do atributo summary, pois ele um resumo da tabela. Coloque
em tabelas que valham a pena ter um resumo.
o Usar o elemento caption para ttulo da tabela. Esse elemento o ttulo
principal da mesma.
o Para tabelas simples, o uso apropriado do elemento th essencial para torn-
las acessveis. Contudo, com um pouco mais de esforo, podemos incrementar
a acessibilidade aos dados da tabela. thead e tfoot so usados para agrupar
uma linha de cabealhos no topo e outra no final da tabela. Se thead e tfoot
forem usados, voc dever usar tambm tbody para definir o corpo da tabela,
que a parte da tabela que contm as clulas de dados. Na verdade, uma
tabela poder conter mais de um tbody.
o Em tabelas de dados com dois ou mais nveis lgicos de cabealhos de linha ou
de coluna, utilizar marcaes para associar as clulas de dados s clulas de
cabealho. [Prioridade 1] Por exemplo, em HTML, utilizar thead, tfoot e tbody
para agrupar linhas, col e colgroup para agrupar colunas, e os atributos "axis",
"scope" e "headers" para descrever relaes mais complexas entre os dados."
o Colocar o atributo abbr para abreviar um cabealho longo, de modo que ele
no seja lido por inteiro toda vez que o leitor de telas passe por ele.
o Em alguns casos os desenvolvedores utilizam colunas vazias em cabealhos ou
dados, para obter um espaamento entre as colunas de uma tabela. O JAWS,
por exemplo, l "blank" toda vez que encontra uma clula vazia e isto pode
reduzir a usabilidade e a acessibilidade das tabelas de dados para usurios de
leitores de tela. O CSS deve ser usado no lugar de clulas vazias para fins de
controlar a apresentao de uma tabela de dados.
Ttulos Para melhor compreender como utilizar os nveis de ttulos, comparamos um site com
um livro: O nome do livro o h1, os captulos so h2, os sub-captulos so h3, e assim
sucessivamente.
Cada pgina dever ter apenas uma tag h1, j que se pressupe que cada pgina tenha
um nico ttulo principal.
O ttulo h1 da pgina frequentemente usado com o nome da empresa/instituio.
Normalmente, o ttulo h1 substitudo por uma imagem (logo), mas dever
permanecer com seu contedo, mesmo que no visivelmente, para que o leitor de
telas possa ler.
No necessrio fazer o uso de todos os 6 nveis, exceto quando o texto for
classificado em muitas sees, exigindo assim uma documentao muito rgida.
Os nveis do h2 ao h6 podero ser usados mais de uma vez na pgina, mas sem
excesso, e com lgica textual.
Quando for usado o atributo title nos ttulos, usar no title o mesmo contedo que no
ttulo, seguido de informaes adicionais, caso desejar. Isso porque quando h um title
no elemento, alguns leitores de tela do preferncia ao title e no leem o contedo.
 Exemplo:
<h1>
<a href="http://portal.mec.gov.br" title= Educao -
Ministrio da Educao Clique para acessar o site>
Educao - Ministrio da Educao
</a>
</h1>
Formulrios O primeiro passo para tornar o formulrio acessvel organiz-lo de forma a ser
compreensvel, tanto na sua formatao quanto visualmente.
Cuidados necessrios:
o Form: Sempre usar as tags form, mesmo que o formulrio tenha apenas um
elemento dentro, como comum nos sites haver uma caixa para pesquisa.
o Imput, select, textarea: Sempre colocar ligado a um label, podendo ser feito de
duas maneiras:
Usado dentro do label:
<label>Seu nome:
<input type="text " name="nome" />
</label>
Usado fora do label: usar o atributo for no label e id no input, select ou
textarea para identificar qual label pertence a qual elemento.
<label for=ano>Seu nome:</label>
<select id=ano name=ano>
<option value=2008>2008</option>
<option value=2009>2009</option>
</select>
o input submit, reset, button: esses atributos transformam o elemento
input em botes. Para eles no usamos o elemento label, como nos demais.
o Select: Sempre que for usado select sozinho em um formulrio, usar
obrigatoriamente um boto para submeter a escolha. Ao usar eventos
JavaScript para abrir automaticamente a opo, quando selecionada, no
funciona 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 compreenso,
podendo inserir quantos achar necessrio dentro de um formulrio.
o legend: Indica o ttulo para o grupo de elemento dentro do fieldset.
o Tabindex: No aconselhado usar atributo tabindex, para que a navegao
siga a ordem na qual o formulrio foi programado. Caso seja necessria a
utilizao desse comando, deve-se cuidar para que todos os elementos
tenham esse atributo e mantenham a ordem de tabulao, assim como
aparecem visualmente.
Links Devem ter sua descrio curta e objetiva, para facilitar o entendimento do usurio.
Identificar claramente o destino do link, ou seja, que ele realmente descreva o item ao
qual remete.
Servem como focalizadores para os leitores de telas.
obrigatrio o uso do elemento href para que o leitor proceda a leitura como um
link. Se o link no possuir um destino, colocar o valor #.
<a href="#" id="voltar">Voltar a pgina anterior</a>

Arquivos para Dar preferncia a arquivos em formato PDF, os quais so lidos pela maioria dos leitores
download de tela.
No bloquear o arquivo, pois normalmente arquivos bloqueados no conseguem ser
lidos pelos leitores.
Sugere-se colocar a extenso junto ao nome do arquivo, para que o DV tenha
conhecimento do tipo de arquivo que est sendo disponibilizado.
Flash Quando h flash em uma pgina, necessrio inserir uma descrio, inclusive nos
botes e controles internos.