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 (
,,, …), se está criando parágrafos utilize a tag de parágrafo (
, …), se está criando parágrafos utilize a tag de parágrafo (
), se precisa de uma lista, use as tags de listas (
- ,
- ) 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 (
à), 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
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.
Meu Título
Parágrafo
Subtítulo
Parágrafo
Sub-subtítulo
Parágrafo
Isso não significa que temos que começar todos os títulos de uma seção com
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:
Título da Página
Parágrafo
Subtítulo
Parágrafo
Subtítulo
Parágrafo
Título de Uma seção Independente
Parágrafo
Título de Uma seção Independente
Parágrafo
Subtítulo
Parágrafo
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
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:
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:
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
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:
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:
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.