Acessibilidade, Parte 3 (acho que é a última)

Olá!

Depois de muito tempo, consegui finalmente finalizar o final dessa matéria, que aparentemente ficou dividida em três postagens (se esse post realmente for o último).

Nos capítulos anteriores você pode ver que muitas imagens pesadas e navegação voltada para o mouse impedem e muito a utilização de seu site, esses dois assuntos são bem genéricos, ou seja, eles abordam todo tipo de acessibilidade, pode ser deficiência física, motora, equipamento ruim, conexão ruim, celular, qualquer coisa que seja um impedimento para a navegação. A matéria a seguir também é um pouco genérica, na parte de tabelas, mas tem uma parte especial voltada quase que exclusivamente à deficientes visuais, onde me refiro aos leitores de tela.

Vamos começar com tabelas, se estava genérico até agora vamos continuar nesse rumo.
As tabelas no HTML são tão úteis quanto no excel, eu gosto de tabelas, utilizando as tags <table> fica muito mais fácil desenhar e organizar o layout de qualquer site, mas tem um problema, o uso excessivo de tabelas prejudica a navegação e o carregamento da tela.

Em alguns lugares onde ajudei a construir ou manter os sites, seus layouts eram construídos unicamente com tabelas, todo tipo de organização que você possa imaginar. Quer alinhar um item à direita? coloca em uma tabela. Quer escrever um contrato? Tabela neles! Quer organizar um menu, com submenu e sub-submenu? Tabelas e tabelas dentro de tabelas!

Esse tipo de escrita do código faz a página ficar mais lenta para carregar. No seu computador com processador de 16 núcleos 50GB de memória e navegador Chrome isso não vai acontecer, mas voltando à primeira parte dessa matéria, nem todo mundo possui a dádiva de possuir um ótimo navegador, e a maioria dos usuários um pouco mais leigos nem sabem o que é um “Firefox” e acham que “Chrome” deve ser alguma moda em Paris, essas pessoas usam a “internet” que vem no computador, e provavelmente nem sabem o que é atualização ou não se preocupam com isso. Não estou falando mal do navegador da Microsoft, nas últimas versões ele até que está bom, ainda não é melhor que o Chrome ou Firefox, mas está bom. O problema maior está nas versões mais antigas do navegador, como por exemplo a versão 6, que eu vejo em muitos computadores ainda.
Durante os anos os códigos Html, Css e Javascript foram sofrendo melhorias e alterações, e os próprios navegadores foram se modificando para conseguir ler melhor o código fonte escrito, mas isso aconteceu aos poucos.
O que eu quero dizer com esse monte de palavras amontoadas é que possivelmente uma boa parte de seus usuários estarão utilizando computadores antigos e/ou com hardware fraco e softwares tão fracos e antigos quanto a máquina, nesse tipo de situação quando escrevemos um site com várias tabelas dentro de tabelas dentro de tabelas dentro de tabelas, forçamos o navegador e o pobre processador do usuário a ler mais e mais código (desnecessário) deixando o carregamento da página mais pesado.

Como alternativa podemos abusar do CSS, não precisamos eliminar as tabelas do site, isso não é necessário, o problema é quando temos inúmeras tabelas dentro de inúmeras tabelas! Tente se limitar a 2 ou 3 níveis de <table>, mais que isso já começa a ser abuso. Use mais CSS, dessa forma você diminui alguns míseros Kb no tamanho final da sua página (letras no código fonte também contribuem para aumentar o “peso” da página sabia?) e também deixa a abertura da página mais rápida.

Pense nisso, e coloque em prática se for necessário.

Continuando no assunto mais mudando quase que completamente o foco, você sabe o que é um leitor de tela? (para entender melhor o leitor de tela é necessário que você leia antes as partes 1 e 2 dessa matéria).
É mais ou menos como o nome diz, um programa que lê a tela para você, mas ele não é totalmente automático, alguns até que são mais inteligentes, mas até eles dependem muito do usuário que está utilizando, usuário esse que ou é um deficiente visual ou um desenvolvedor tentando deixar o site mais acessível. Existem vários leitores de tela, alguns bons outros ruins, alguns grátis e outros que abusam da deficiência da pessoa e cobram uma pequena fortuna. No Brasil os mais famosos (ao menos os que mais li comentários) são o DOSVOX, NVDA e Virtual Vision.
Quando eu estava em projeto acessível utilizava o Virtual Vision para os testes e gostei muito dele, bem personalizável, não consegui me acostumar com o NVDA e nunca testei o DOSVOX, mas esse foi o meu caso, com você pode ser diferente.

Esses leitores de tela até que tentam ser mais inteligentes que os desenvolvedores, a maioria deles tenta ler em alguma ordem os sites mesmo que estes não sejam acessíveis e/ou estejam totalmente bagunçados, mas eles não fazem milagres e como eu disse, eles “tentam” ler o site.

Um leitor de tela não lê o site da mesma forma que você está lendo agora, até porque isso é muito difícil e inviável, tecnicamente. O leitor de tela pega o código fonte do site e navega por ele, loucura não é mesmo? Exibe o código fonte do seu site (botão direito do mouse) e tenta ler ou navegar por esse monte de letras e códigos.

Para ajudar os leitores de tela, podemos deixar nosso código fonte organizado, evitar lixos, não usar muitas tabelas, conforme mencionado acima, e principalmente, definir textos alternativos para TUDO!
Um texto alternativo é aquela caixinha de informação que aparece quando você para o mouse sobre algum objeto, essa caixinha não aparece apenas em botões ou links, ela pode aparecer em qualquer lugar, até mesmo em textos e tabelas, para definir esses textos alternativos você pode utilizar os atributos TITLE ou ALT, dependendo da tag ela pode possuir um, outro ou os dois atributos, ai você escolhe qual utilizar, mas sempre utilize a opção de textos alternativos.

Vamos à dois exemplos:
1 – Digamos que você escreveu um texto e colocou uma imagem no meio do texto, quando o leitor de tela passar por essa imagem ele vai falar para o usuário “pasta um barra pasta dois barra imagem ponto jota pê gê”, é isso que sua imagem representa? Acho que não. Se você definir um texto alternativo para essa imagem, o leitor de tela irá falar para o usuário o que você escreveu, por exemplo “Imagem que mostra um gato com cara de mal pulando sobre um bebe dormindo”. Eu sei que as vezes isso é um pouco chato e na maioria dos casos o texto não tem graça como a imagem, mas pense em seu leitor deficiente visual, ele vai ficar frustrado se o leitor de tela ser o caminho e o nome da imagem em todas as imagens que estiverem em seu site, se fosse comigo eu não voltaria mais.

2 – Imagine agora que você colocou um link qualquer no seu site, o leitor de tela vai falar para o usuário mais ou menos assim: “agá tê tê pê dois pontos barra barra dabliu dabliu dabliu ponto meu site ponto com barra alguma coisa barra outra coisa barra mais alguma coisa barra postagem que eu quero ponto aga tê eme ele”. Coisa feia né? As vezes nem da para entender. Imagina então se for uma URL abreviada, não da nem para saber para onde o link vai: “agá tê tê pê dois pontos barra barra migre ponto me barra sete xis nove pê ipsulon agá um erre zê”. O que é isso? Desse jeito fica difícil navegar. Lembre-se de colocar os textos alternativos! Fazendo isso, seja qual for o leitor de tela que o usuário utilizar, o leitor falará o texto alternativo que você escreveu, ou seja, o que é, pra que serve e pra onde vai aquele link, ex: “Link para o site tal, para a página que explica como os gatos ninjas destruirão a humanidade em dois mil e doze”.

Os leitores de tela, alem de precisarem de textos alternativos também precisam de uma boa ordem de navegação, não é obrigatório mas ajuda MUITO se você definir os principais “tabindex” do seu site (parte 2 da matéria), tente deixar como ordem de navegação primeiro o conteúdo, depois as propagandas, banners, menus, links, etç, etç, afinal se eu entrei no seu site é porque eu quero ver a matéria e não quantos parceiros você tem, pelo menos na maioria dos casos.

O texto já ficou grande mas acho que terminei por aqui, apenas lembre-se de deixar seu site acessível e mais uma vez, acessibilidade não significa apenas deficiência física, pode ser deficiência física, motora, visual, auditiva, máquina velha, conexão ruim, dispositivo portátil, etç, etç, etç.

Lembre-se sempre do pior caso possível, e boa sorte!