Eae!
Tudo bele?
Esta é a terceira parte da série sobre acessibilidade.
Na primeira parte (se você ainda não leu, clique AQUI para ler agora!) eu falei o que é e o porquê de aplicá-la em seus projetos.
Na segunda parte (clique AQUI para ler agora!) eu mostrei algumas ações de design que você pode utilizar no seu projeto para melhorar a acessibilidade das suas peças.
E para finalizar esta série, nesta terceira parte, falarei do código. Irei mostrar como você pode deixar o código do seu site mais acessível.
A maior parte das melhorias de acessibilidade para interfaces web são efetuadas no código HTML das páginas. Essas melhorias não são nada de “outro mundo” e na verdade já deveriam constar no projeto desde o começo, pois esses simples ajustes podem fazer uma grande diferença no projeto.
Antes de começar quero salientar que ainda existem outras inúmeras ações que podem ser aplicadas para dar mais significado e que também dependendo de quando você estiver lendo este artigo, outras possibilidades podem já estar em uso ou até mesmo estas que foram apresentadas podem estar desatualizadas, porque o avanço da tecnologia é intermitente e extremamente veloz, ok?
Bora nessa!
Neste artigo você verá sobre:
- Respeitar a semântica
- Siga uma hierarquia
- Imagens mais acessíveis
- Fomulários mais acessíveis
- Porque não desativar o outline
- Sobre o idioma da página
- O título da página
- Recarregamento automático
- Uso sem o mouse
- Landmarks de WAI-ARIA
Respeite a semântica
Parece redundância, mas é bom fortalecer a ideia. É preciso organizar os conteúdos das suas páginas web de uma forma a fazerem sentido mesmo quando lidos sem as folhas de estilo (CSS).
Isso quer dizer que você tem que usar as tags de acordo com o conteúdo e a estrutura da página.
Então se você está lidando com títulos utilize as tags certas para isso (<h1>, <h2>, <h3>, …), se está criando parágrafos utilize a tag de parágrafo (<p>), se precisa de uma lista, use as tags de listas (<ul>, <ol>) e assim vai… Com isso além de proporcionar significados ao seu conteúdo você também vai estruturar o conteúdo da página de forma coerente e hierárquica. Com isso você vai permitir que seus textos sejam compreendidos e façam sentido mesmo quando lido sem o auxílio do CSS para formatá-los.
Dê uma atenção especial para as tags de cabeçalhos (<h1> à <h6>), pois elas são elementos importantes na navegação para os visitantes que utilizam tecnologias de acessibilidade através do teclado e até mesmo em alguns dispositivos móveis.
Siga uma hierarquia
O conteúdo da página web deve ser apresentado seguindo uma hierarquia direta começando do item mais importante até ao item menos importante, evitando “pular” os níveis hierárquicos do conteúdo e dá página.
<h1>Meu Título</h1> <p>Parágrafo</p> <h2>Subtítulo </h2> <p>Parágrafo</p> <h3>Sub-subtítulo </h3> <p>Parágrafo</p>
Isso não significa que temos que começar todos os títulos de uma seção com <h1> e nem que não possam existir outros elementos dentro dessa hierarquia. Cabe a você analisar a semântica do conteúdo e aplicar a melhor tag para aquele conteúdo.
O ideal é criar uma estrutura como se fosse uma árvore, permitindo que um elemento “pai” tenha vários “filhos”, como exemplo:
<h1> Título da Página</h1>
<p>Parágrafo</p>
<h2>Subtítulo </h2>
<p>Parágrafo</p>
<h2>Subtítulo </h2>
<p>Parágrafo</p>
<h2>Título de Uma seção Independente </h2>
<p>Parágrafo</p>
<h2>Título de Uma seção Independente </h2>
<p>Parágrafo</p>
<h3>Subtítulo </h2>
<p>Parágrafo</p>
Além das tags de conteúdo também é necessário aplicar corretamente a hierarquia para as tags de estruturação da página como <header>,<section>, <article>, <aside>,<footer>, entre outras.
Imagens mais acessíveis
A regra é clara(como diria um comentarista de futebol) para as imagens:
Todo elemento não textual deverá ter um texto alternativo que serve ao mesmo propósito. Isso significa que imagens que fazem parte do contexto da página (e não decorativas) devem ter uma alternativa em texto.
By maujor
E a primeira coisa a se fazer para resolver essa questão é preencher de forma correta o atributo “alt” das imagens. Não existe uma regra específica para isso, o ideal é preencher de forma sucinta com um texto descritivo, simples e direto.
Imagine que esse texto seria como se você estivesse descrevendo de forma direita e simples, para alguém do outro lado da linha do telefone a imagem que você está visualizando na tela e que ela, a outra pessoa da linha, claro, não tem acesso.
Veja o exemplo a seguir:
<img src="dog.png" alt="ilustração na cor marrom escuro de um cachorro">
No caso do “alt” é preciso ter cuidado para não confundi-lo com o atributo “title”.
Enquanto que o “alt” é um texto alternativo a imagem o “title” apresenta informações consultivas através de um “tooltip” quando você passa o mouse sobre o elemento. Tal atributo (o “title” ) pode em muitos casos não ser lido corretamente pelos navegadores e também por tecnologias assistivas.
E caso a imagem transmita significado ao conteúdo, mas tenha sido inserida via CSS, pode-se utilizar recursos WAI-ARIA (você mais a frente do se que se trata ainda neste artigo) para possibilitar uma descrição para a imagem. Veja o exemplo:
<div role =”img” aria-label=””></div>
Sendo assim o atributo role=”img” define que a div deve ser interpretado como um elemento imagem e o “aria-label” adiciona um rótulo para essa imagem.
Obs: Certifique-se que ao utilizar o atributo role=”img” somente tenha a imagem no elemento. Caso o elemento contenha outros elementos como de textos, por exemplo, é possível que tanto navegadores como serviços de busca interpretem “todo” o conteúdo dentro da div como uma imagem.
Formulários mais Acessíveis
Preencher formulários já não é algo tão “legal” de se fazer, então a primeira coisa que temos que ter em mente é sempre zelar pela simplicidade e facilidade de uso e de entendimento.
Depois podemos aplicar elementos HTML para melhorar a experiência do visitante. Vamos ver algumas delas?
Adicione rótulo ao campo específico do formulário
Para essa questão é bem simples resolver. Basta utilizar a tag <label> mais o atributo “for” e adicionar o “id” no campo do formulário. Veja o exemplo:
<label for=”nome”>Nome</label> <input type=”text” id=”nome” name=”nome”>
Com isso além de melhorar a acessibilidade você melhora também a usabilidade, pois ao clicar na label o campo em questão fica em foco.
Você também pode utilizar tal recurso para elementos checkbox e de radio. Basta apenas aplicar o label após o input:
<input type=”checkbox” id=”nome” name=”nome” value=”José”> <label for=”nome”>Nome</label>
Determine o type para os inputs
O HTML5 trouxe a possibilidade de determinar com mais significado qual o tipo de input estamos criando. Hoje em dia podemos utilizar o tipo “email”, “tel”, por exemplo:
<input type=”email”> <input type=”tel”>
Fieldset e legend para agrupar elementos.
Utilize, quando possível, os elementos “fieldeset” e “legend” para agrupar campos de um formulário.
O “fieldset” agrupa os elementos de uma mesma categoria e o “legend” define uma legenda para esse grupo.
<fieldset> <legend> Dados Pessoais</legend> <label for=”nome”>Nome</label> <input type=”text” id=”nome” name=”nome”> <label for=”sobrenome”>Sobrenome</label> <input type=”text” id=”sobrenome” name=”sobrenome”> <fieldset>
Não desative o Outline
Não remova a propriedade outline do seu CSS. A propriedade outline auxilia na navegação sem o teclado. Ela é aquela “linha azul” que fica em volta do elemento em foco quando você navega pelo teclado. Você pode customizá-lo, deixar o padrão do navegador ou manter o padrão adicionando ainda mais efeito, como por exemplo uma bordar do estilo dotted, se quiser. Exemplo:
:focus{
outline: auto 5px -webkit-focus-ring-color;
border:1px dotted;
}
Idioma da Página
Você deve definir o idioma da página através do “doctype” do documento HTML, mas pode fazê-lo dentro da página também a qualquer momento. Caso seja necessário você pode mudar o idioma do conteúdo da página. Para isso utilize na primeira linha o atributo “lang”. Veja o exemplo a seguir:
<p lang=”pt-br”> Brasil</p> <p lang=”eng”>Chief of Design</p>
Título da Página
Descrever o título da página utilizando a tag <title></title> ajuda à todos os usuários, sejam usuários com necessidades especiais ou não. Fato é que essa tag é uma das primeiras tags que as tecnologias assistivas identificam em uma página. Portanto evite colocar apenas “home” ou “about” no título da página. Coloque um título que represente a página e que o usuário consiga identificar do que se trata a determinada página a partir do título, mesmo antes de percorrer pelo restante do conteúdo.
Recarregamento automático
Evite determinados recarregamento automático de páginas. Tal pratica pode prejudicar a navegação e a experiência do usuário da página, principalmente das pessoas com dificuldades cognitivas e de leitura, pois elas não conseguem ter o tempo suficiente para ler e compreender a informação passada, além claro de ser muito chato na maioria dos casos algo que recarrega sem sua vontade.
Abrir em uma nova aba/nova janela
Essa é uma questão polêmica! Esse recurso de abrir um novo link em uma nova aba ou janela pode ser tranquilo para quem acessa através de um computador desktop ou notebook, porém pode ser desconfortável para usuários mobiles, sobretudo para usuários com deficiências e que utilizam tecnologias assistivas, pois ele será encaminhado sem aviso para uma outra página, em um outro link, dificultando muito a identificação do conteúdo e também o retorno a página anterior.
A recomendação da W3C sobre isso é clara: não se deve “impor” que o usuário abra o link em uma nova aba, mas a grande maioria dos visitantes gostam disso. Portanto nesses casos, para ajudar os usuários de tecnologias assistivas, o ideal é informar ao usuário através do atributo “alt” que o link será aberto em uma nova aba, através também de um ícone indicando e/ou simplesmente com texto dentro do próprio link do tipo “ abre em uma nova janela”.
Utilização sem o mouse
Talvez a pseudoclasse do css mais usada é a “:hover”. Ela é muito útil para criar efeitos e até determinar funções ao se passar o mouse em elementos específicos da página.
Todavia para quem não usa mouse, seja porque está em dispositivos móveis, seja por estar utilizando leitores de tela e outras tecnologias, esse recurso não é eficaz simplesmente porque eles não têm um mouse disponível. Portanto é preciso pensar em uma forma de garantir que mesmo com a falta de um mouse seja possível acessar o conteúdo (como inclusive já foi abordado no artigo anterior).
Para minimizar isso podemos utilizar via css a pseudoclasse “:focus” e/ou no HTML o atributo onFocus e o onBlur:
CSS:
a:hover, a:focus{border:1px solid #000;}
HTML
<a href=”#”onfocus="minha-funcao-js ()" onblur="minha-funcao-js ()"> Meu link</a>
E você também pode determinar a ordem que o “focus” do teclado (via a tecla “tab”) deve seguir, caso seja necessário:
<a href="#" tabindex="2">Link 01</a> <a href="#" tabindex="1">Link 02</a> <a href="#" tabindex="3">Link 03</a> <a href="#" tabindex="0">Link 04</a>
No exemplo acima ao utilizar o teclado para navegar, o primeiro elemento a receber o focus será o “link 04”, pois ele foi determinado com o tabindex=”0”. Você pode aplicar tal atributo para qualquer elemento da página.
E caso queira que a navegação siga pela ordem em que foram escritos basta não utilizar ou ou declarar o mesmo valor para todos.
Landmarks e WAI-ARIA
A sigla ARIA significa “Accessibility for Rich Internet Applications”. Ela é uma especificação da Web Accessibility Iniciative da W3C.
Trata-se de um conjunto de especificações para melhorar a acessibilidade em conteúdos dinâmicos nos componentes dos websites e web-apps.
Em um site estático comum, o conteúdo segue uma hierarquia onde a informação é, comumente, consumida começando a leitura no topo da página até ao final da página.
Porém em sites com interações mais avançadas, como por exemplo o uso de janelas modais, por vezes o conteúdo aparece na página sem que o mesmo seja carregado desde o início. E isso pode prejudicar em muito a vida de pessoas com limitações e que utilizam leitores de tela.
Então as definições ARIA são um modo de adicionar algum significado semântico a esse tipo de elementos e também de alertar a tais usuários sobre os eventos para que eles possam tomar alguma atitude sobre antes da ação acontecer.
Alguns dos principais objetivos da WAI-ARIA são:
- Dar suporte completo à interação por teclado;
- Ser independente e aplicar-se em qualquer dispositivo;
- Proporcionar mais acessibilidade ao conteúdo dinâmico gerado por linguagens de script;
- Interoperabilidade com os navegadores web e tecnologias assistivas.
Roles
A Role descreve através do atributo de mesmo nome (role=””) qual é o “papel” do elemento html. Por mais que uma tag já tenha seu significado, por vezes ele pode exercer um papel diferente dentro da página. Com a Role, por exemplo, você diz que uma li, por exemplo, tem um papel de ‘colapse’ em um menu interativo.
Role é uma recomendação do W3C de 2013 como você pode ver aqui: https://www.w3.org/TR/wai-aria/roles
E apesar do HTML5, que trouxe grandes melhorias na semântica, o uso da role pode ser muito útil em determinados casos (como no exemplo citado anteriormente) e também para ajudar na acessibilidade.
Existem vários roles que podemos usar, aqui vou citar os principais e suas funções:
- tooltip: a famosa “caixinha” pop-up contextual que exibe uma descrição de um elemento quando ao se passar o mouse ou o teclado por cima do mesmo;
- search: a seção de pesquisa da página;
- application: uma área declarada como uma aplicação web, diferente de um documento web;
- banner: o cabeçalho da página e que contém o título principal da página, título interno da página, etc;
- complementary: um conteúdo auxiliar que complementa o conteúdo principal;
- contentinfo: seção da página que contém informações da página como dados do site, informações, direitos de privacidade, links de de privacidade, etc;
- main: seção que engloba o conteúdo principal do documento;
- navigation: o menu da página que contém links para se navegar no documento HTML ou em documentos relacionados;
- form: área do documento que contém formulários e/ou elementos associados ao formulário.
Mais dicas antes de terminar
- Zele pela semântica do HTML;
- Valide o seu código HTML (automática e manual);
- Valide a acessibilidade do seu HTML (automática e manual);
- Utilize a interface somente com um teclado para testar;
- Se possível realize teste em sua interface com tecnologias assistivas;
- Simplifique sempre ao máximo as suas tabelas (lembrando que tabelas são para apresentar dados tabulares).
Conclusão
Existem muito mais coisas para se falar e se aplicar quando o assunto é acessibilidade. Confesso que até mesmo este site em que você está lendo este artigo tem muita coisa a melhorar nesse quesito (até porque ele é feito em wordpress e existem algumas implicações do próprio). Mas o fato é que precisamos falar mais do assunto e também avançarmos mais, aplicando mais medidas para melhorar a acessibilidade das interfaces (mesmo que seja aos poucos) no nosso dia a dia.
A maioria das técnicas relatadas nessa série de artigos é bem simples de ser aplicada e não demanda muito esforço e/ou alterações que prejudiquem algum projeto, pelo contrário, com acessibilidade todos tem a ganhar.
Espero que essa série mais do que um guia, tutorial, ou qualquer coisa do gênero, possa ser um facho de luz que ajude, nem que seja a uma pessoa, a no mínimo começar a pensar e olhar com mais carinho para tal assunto.
E você já pensou na acessibilidade do seu projeto?
Você pode comentar aí abaixo!
Nos vemos no próximo post, bele? 🙂
Até mais!
Forte abraço!
Leia a segunda parte aqui: Guia-sobre-acessibilidade-parte-02
Leia a primeira parte aqui: Guia-sobre-acessibilidade-parte-01
Referências:
www.w3.org/Translations/WCAG20-pt-PT/
www.w3.org/TR/2009/WD-wai-aria-20090224
www.w3.org/1999/xhtml/vocab
http://arquiteturadeinformacao.com/
Livro: Web Design Responsivo – Maujor
Livro : Mobile HTML5 – Estelle Weyl
