Atualizado: 17.7.2008
 
Projetos web
Interface

Acessibilidade

 

Separação forma e conteúdo - permite a visualização de páginas em qualquer programa navegador e dispositivo, bem como facilita a indexação do conteúdo

◄

■ As páginas que separam forma e conteúdo são produzidas com base na estruturação dos textos e imagens via CSS e não na estrutura do layout. Isto não significa sacrifício da forma em detrimento do conteúdo: a separação entre conteúdo e aparência permite o uso da interface por usuários com deficiências físicas, sem que outros usuários percebam. ► Exemplo

A separação entre forma e conteúdo via CSS permite também a visualização em dispositivos digitais diferentes do computador.

■ Além disso, facilita a indexação pelas ferramentas de busca - as indicações de acessibilidade tornam o conteúdo do site mais fácil de achar.

O preparo do conteúdo para a indexação pelas ferramentas de busca melhora a sua "indexabilidade", ou facilidade de indexação pelas principais ferramentas de busca (o Google indexa imagens tanto pelo texto quanto pelas marcações "alt" contidas no código das imagens).

Por exemplo:

A busca pela palavra "quitcommit" (ver imagem abaixo, acesso em 16.6.2005), no Google, retorna resultados semelhantes ao ilustrado abaixo há anos (o resultado se mantém em fevereiro 2007), o que é uma indicação da sua boa adequação para indexação pelas ferramentas de busca.

O site QuitCommit foi desenvolvido para servir de referência de boa acessibilidade, tanto em relação ao design e ao desenvolvimento, quanto em relação à manutenção e soluções técnicas.


 

Ilustração do conceito: Google.com - resultado da busca por quitcommit

 

■ A ordem das marcações h1, h2, h3 nas páginas também é considerada pelos buscadores para criar relacionamentos entre os títulos e subtítulos dos textos. Os títulos publicados primeiro devem levar a marca h1, mesmo que não sejam os mais importante das páginas. Os títulos que se seguem devem manter as marcações em ordem ascendente h2, h3, h4, etc.

Como os programas leitores de tela permitem aos usuários navegarem pela estrutura de títulos das páginas, estas marcações podem ser independentes do resto das marcações de layout

Por exemplo, numa página com diversas <divs>, as marcações <h2> podem ser assinaladas para cada uma, de forma a indicar a sua relação com as demais:



<head>
<title>Receita de brigadeiro da Vovó</title>
<style type="text/css">
div.nav h2 { 	font-size: 80%;	}
div.texto h2 { 	font-size: 120%;	}
div.comentarios h2 { 	font-size: 100%;	}
</style>
</ head>
<body>
<h1>Nome do site</h1>

<div class="nav">
  <h2>Link1</h2>
</div>

<div class="texto">
  <h2>Título do texto</h2>
 ...
</div>

<div class="comentarios">
  <h2>Comentários dos leitores</h2>
 ...
</div>
</body>
</html>

Assuntos relacionados
► CSS
► Preparação das informações e da estrutura de informações para indexação desde a programação das páginas - Preparação de informações para indexação (preparo do código)
► Testes : Acessibilidade
► Javascript

Mais informação sobre o assunto (links externos)
► Formulários acessíveis e-gov (link direto para PDF, 160Kb) - recomendações para o desenvolvimento de formulários acessíveis
► Acesso Digital - Site dedicado à difusão e ao aperfeiçoamento do acesso à Tecnologia da Informação
► Cartilha de acessibilidade - regras básicas sobre acessibilidade em web sites
► The cherry tomato chalenge, de Tim Bray - texto sobre a indexação de imagens por ferramentas de busca
► Quit Commit - site desenvolvido para servir de referência em acessibilidade

 
 ▲  
Alto