As soluções editoriais e tecnológicas para a publicação de conteúdo digital devem permitir o acesso de pessoas com características de acesso diferenciadas. Além disso, considerar, dependendo da abrangência do canal, a acessibilidade da interface para contextos no uso, como:
■ Equipamento antigo e/ou conexão lenta. No Brasil, a média da velocidade da internet móvel no Brasil em 2020 está em 24 Mbps em média. Já para a fixa, 48,75 Mbps (relatório Data Reportal, encabeçado pela We Are Solcial e Hootsuite).
■ Dificuldades visuais e motoras devido à idade ou não. Cada vez mais idosos usam programas para atenuar problemas de visão e causados por tremores nas mãos e precisam adaptar o tamanho das letras para facilitar a leitura dos textos e uso dos botões. Mas estes problemas não se limitam às pessoas idosas. Também as crianças têm menos destreza motora, menos visão ampla e mãos menores, o que faz com que precisem de botões e controles maiores, que possam ver e usar mais facilmente.
■ Acesso com telas pequenas (de dispositivos móveis) por pessoas com dificuldades motorais e/ou visuais.
■ Acesso à internet em lugares barulhentos e movimentados (lugares públicos, ruas, veículos, alguns locais de trabalho), onde nem sempre se pode escutar uma música ou uma voz.
Em 2014, 18% dos brasileiros acessavam a internet de lan houses ou de locais públicos de acesso pago. Destes, 18% ganhavam de 2 a 3 salários-mínimos e 27% de 1 a 2 salários-mínimos, segundo a pesquisa do Comitê Gestor citada acima. (NIC, 2014)
■ Realização de tarefas com as mãos no mesmo tempo da consulta da página web. Exemplo: Um cozinheiro que esteja consultando uma receita e não pode usar as mãos para rolar a tela.
Soluções de acessibilidade abrangentes para interfaces incluem
■ A formatação responsiva da interface para diferentes larguras e resoluções de monitor, para facilitar o acesso de diversos tipos de dispositivos, com diversas configurações.
■ A titulação de páginas com resumo do conteúdo – o título – <title> da página é a primeira informação que leitores com problemas visuais, que usam programas leitores de tela, escutam. O título deve preferencialmente seguir a estrutura recomendada pelo ePWG: [assunto principal da página] – [nome do sítio ou sistema] sem palavras extras, ou recursos estilísticos. Na página inicial, basta inserir o [nome do sítio ou sistema].
■ A publicação do conteúdo principal e de ferramentas de navegação na parte de cima das páginas (“acima da dobra” da tela), para facilitar o acesso de usuários com problemas motores ou de leitores mais lentos – os programas leitores de tela descrevem as páginas do alto para baixo, da esquerda para a direita.
Usuários mais dispersivos, incluindo crianças, tendem a concentrar sua atenção nessa parte da página.
■ Informar a localização do usuário em relação ao resto das páginas.
■ Link “Voltar à Principal”, também no alto da tela, de modo que usuários que utilizam programas leitores de tela não sejam obrigados a procurar muito para voltar.
■ Suporte ao uso do teclado, no lugar do mouse ou dos dedos.
■ Alternativa de texto para as imagens, com descrição do conteúdo e uso do atributo ALT de modo sintético, com poucas palavras. Se for necessária uma explicação mais longa, deve-se publicar uma legenda na mesma página.
NO HTML5, são incorporados os elementos FIGURE e FIGCAPTION, aplicados em conjunto para agrupar uma imagem IMG com a sua legenda, que aparecerá visualmente. O elemento FIGURE define um bloco de conteúdo independente que normalmente contém linhas de códigos, imagens, gráficos, diagramas e vídeos que fazem referência ao conteúdo principal do documento. O elemento FIGCAPTION é opcional e exibe uma legenda para o elemento FIGURE. Esse elemento age como subtítulo opcional ou legenda para qualquer conteúdo contido no elemento FIGURE e não substitui o atributo ALT. Pode-se ter várias imagens, vídeos, gráficos, dentro de um único elemento FIGURE. Caso haja um elemento FIGCAPTION este deve ser o primeiro ou o último filho do elemento FIGURE e só um FIGCAPTION irá representar a legenda. (2)
■ Compatibilidade da interface com programas leitores de tela e com a maioria dos principais browsers disponíveis, em diversos dispositivos, permitindo o redimensionamento sem perda das funcionalidades principais.
■ Produção de conteúdo com foco nos usuários com deficiências físicas.
■ O uso de tamanhos de fontes flexíveis, por meio de CSS (para pessoas portadoras de deficiências visuais e pessoas idosas), mesmo que a maioria dos browsers permita o aumento dos tamanhos com uso do teclado. O conteúdo deve se manter estruturado mesmo com a folha de estilos desabilitada.
■ Uso de padrões web (web standards) na programação, possibilitando o acesso de qualquer sistema às informações, com a interpretação adequada por navegadores, leitores de tela, dispositivos móveis ou agentes de software (ferramentas de captura de conteúdo, aranhas de buscadores).
■ A formatação de HTML para melhor visualização dos critérios editoriais.
■ Não uso, em elementos críticos de navegação, de arquivos dependentes de áudio ou javascript. Telas leves. A funcionalidade da estrutura não deve depender destes elementos e incluir os usuários que usam programas leitores de tela ou não usam o mouse.
■ Não uso, em elementos críticos, de textos ou imagens cintilantes ou animados (com Javascript ou efeitos que piscam ou brilham), cujos movimentos podem ser dispersivos para usuários com dificuldades de concentração, ou com epilepsia fotosensitiva, pois o processo de leitura pode ficar prejudicado.
■ Não uso, em elementos críticos, de janelas pop-ups, ou links que abrem novas janelas ou abas (com atributo target=”blank”), que abrem guias ou janelas diferentes e podem atrapalhar os usuários com deficiência visual, com dificuldade para identificar que nova janela foi aberta.
■ Não uso de janelas com atualização automática de conteúdo, pois tiram do usuário a autonomia de escolher fazer manualmente a atualização, podendo causar confusão e desorientação, especialmente para usuários de leitores de tela. Caso sejam necessárias, avisar explicitamente que a página é atualizada a intervalos regulares.
■ Não uso de lightboxes, pois o usuário navegando pelo teclado não tem acesso ao conteúdo dessas janelas. Além disso, as janelas modais, em geral, não apresentam bom nível de acessibilidade em dispositivos móveis, pois o foco do teclado permanece “atrás” da janela.
■ Cores bem contrastadas nos elementos, para facilitar a identificação dos elementos, especialmente para pessoas com dificuldade de distinguir cores ou que usam monitores monocromáticos.
■ Palheta de cores do layout adaptada para usuários com daltonismo ou discromatopsias – Uso de textos explicativos em layouts não baseados em vermelho ou verde (para usuários com dificuldades de distinguir estas tonalidades), embora de modo geral não se deva utilizar apenas as gamas dos elementos para diferenciar elementos.
► Por exemplo, “O calendário mostra os próximos eventos. Os eventos em vermelho são para gestores de portais, eventos em verde são para web designers”.
Se as cores vermelha e verde não significam nada para o leitor (por não conseguir enxergá-las ou distingui-las), o calendário citado ficará incompreensível. As indicações devem ser funcionais independentemente das cores.
■ Identificação do idioma principal de todas as páginas por meio da declaração do atributo lang do HTML e xml:lang do XHTML, o que, além de auxiliar na acessibilidade do conteúdo, favorece a indexação pelos buscadores.
■ Manter as tags semânticas que organizam o conteúdo, como h1, h2, etc. para títulos, e inserção de listas para conjuntos de itens.
■ O uso de descrições alternativas (“alt” tags) para imagens ou legendagem de links, gráficos, ícones, fotos e vídeos, formulários e tabelas.
■ Prover alternativas para vídeos sem faixas de áudio, sonoras (audiodescrição) ou textuais. Para vídeos com áudio falado e no idioma da página, devem ser fornecidas legendas. Essencial para pessoas com deficiência visual, a alternativa em texto também é importante para usuários sem saída de som, que desejam realizar a leitura do material ou não dispõem de tempo para ouvir um arquivo multimídia. (2)
■ Alternativas para áudios, com transcrição descritiva.
■ Atalhos de teclado para pontos estratégicos das páginas, por meio de números precedidos da tecla padrão de cada navegador (Alt no Internet Explorer, Shift + Alt no Firefox, Shift + Esc no Opera, etc.). Os atalhos nas páginas do Governo Federal brasileiro devem ser os seguintes: 1: para ir ao conteúdo; 2: para ir ao menu principal; 3: para ir à caixa de pesquisa. (2)
■ Links de atalho direto para o conteúdo mais procurado, usados com maior frequência por cerca de 76% dos usuários de programas leitores de telas. (1)
■ Consideração de usuários com características de acesso diferentes da maioria, incluindo aqueles que não dispõem de condições técnicas ideais, como pessoas que não veem todas as cores, ou têm dificuldades de leitura em movimento .(1)
■ Disponibilização de mapa do site em modo texto.
(Atualizado em 12.3.2018)
Referências
1) Survey of preferences of screen readers users (acesso em 20.2.2009)
2) E-Mag – Modelo de Acessibilidade de Governo Eletrônico do Brasil (acesso em 6.6.2012)