Há muito tempo que os designers profissionais tentam transpor a experiência dos utilizadores com objetos físicos para o mundo digital. O uso de separadores é um exemplo disso. Usar a metáfora do separador num ecrã de computador ajuda a apresentar a informação por partes, tornando a leitura mais focada, as páginas mais pequenas, mais ágeis e de leitura mais fácil. Páginas densas de informação, com necessidade de percorrer um imenso lençol de texto, dissuade rapidamente qualquer um de continuar a ler.

Curiosamente, esta lógica de apresentar a informação por partes, mantendo o utilizador focado num determinado conteúdo, perde-se com um simples clique - desativa-se a folha de estilo (CSS) criada pelo autor e eis que aparece todo o conteúdo. Da minha experiência, esta simples mudança de CSS faz, em muitos sítios Web, quintuplicar o conteúdo visível. Cinco vezes mais conteúdo! Conteúdo que é carregado de uma só vez no browser e que na maioria das vezes o utilizador nem sequer o chega a consultar. Mas está lá, foi descarregado e as operadoras de telecomunicações, de certo, agradecem.

Mas o problema maior é que as tecnologias de apoio, usadas por pessoas com deficiência para navegar na Web, fazem-no, frequentemente, sem folhas de estilo ou com folhas de estilo personalizadas, o que significa que os utilizadores com deficiência passam a ver cinco vezes mais conteúdo que um utilizador que não usa este tipo de tecnologia. Logo os utilizadores com limitações funcionais que beneficiariam em muito de uma navegação focada. No mínimo, igual à dos seus pares que não usam tecnologias de apoio, mas nem sequer desta podem usufruir. Antes pelo contrário.

Quando vi surgir o AJAX em 2005 percebi que ele poderia resolver este problema. Já o expliquei a vários programadores mas ... como diz o músico brasileiro Djavan numa das suas músicas "devo falar japonês em braille" :-). Hoje, dez anos depois, eu próprio consegui, usando uns separadores bootstrap aos quais juntei AJAX, fazer uma demo que apresento abaixo:

Introdução

Neste momento está na introdução e se desativar as CSS irá continuar a ver apenas a introdução.

Leitura dos separadores com leitor de ecrã

Ao lermos os separadores com o leitor de ecrã VoiceOver, teremos como output:

Introdução, selecionada(s), separador, 1 de 2

Capítulo I, separador, 2 de 2

Ou seja, o VoiceOver informa que se trata de um separador. Em que separador estamos: no 1º ou no 2º. Informa ainda qual é o separador que está selecionado - pela expressão "selecionada(s)". Para além de tudo, claro, o texto que está dentro do separador.

Imediatamente a seguir surge o conteúdo do separador ativo e apenas esse.