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.
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 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, retornava resultados semelhantes ao ilustrado abaixo há anos (o resultado se manteve até fevereiro de 2007), o que era 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.
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.
Pesquisa global sobre os hábitos de usuários de programas leitores de tela por pessoas com deficiência visual mostra que 56% consideram a hierarquia dos textos para ordenar a leitura e 24% o fazem frequentemente. (1)
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.
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.
Por exemplo, em uma página com diversas <divs>, as marcações <h2> podem ser assinaladas para cada uma, para indicar 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>
(Atualizado em 20.2.2009)
Referências
1) Survey of preferences of screen readers users (acesso em 20.2.2009)
→ 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 a interfaces web por pessoas com deficiência
→ Cartilha de acessibilidade – regras básicas sobre acessibilidade em websites
→ The cherry tomato chalenge, Tim Bray – texto sobre a indexação de imagens por ferramentas de busca
→ Quit Commit – site desenvolvido para servir de referência em acessibilidade