Acessibilidade no HTML

No artigo de hoje, vamos aprender mais sobre um assunto que, muitas vezes, é deixado de lado. Ter um HTML acessível, certamente, é um dos assuntos mais importantes. Principalmente, para que todos tenham uma boa experiência ao acessar uma página.

Funcionalidades e boas práticas são fundamentais para inclusão de pessoas com deficiência na internet. Pequenas alterações podem ser o diferencial para uma experiência boa ou ruim dentro de uma página web.

Por que devemos nos preocupar com acessibilidade?

Há vários motivos para deixar o HTML acessível, primeiramente, e mais importante, serve para que todos consigam entender e navegar por nossa página. No artigo aqui da TreinaWeb, Acessibilidade em projetos web: como pensar desde o início, aborda muito bem a proporção, em dados reais, o tamanho dessa necessidade.

Além do que foi dito, um dos critérios para ranquear páginas é a sua acessibilidade. Eles reconhecem a adaptação do HTML através de atributos que adicionamos juntamente das tags, ou, até mesmo, de um HTML semântico.

Vale ressaltar, que, existe um decreto federal de 2004 n° 5.296 que obriga sites no Brasil a serem acessíveis. Esse decreto foi sancionado no dia 6 de julho de 2015 a Lei Brasileira de Inclusão da Pessoa com Deficiência.

Como podemos ter um HTML acessível?

Existem inúmeras formas de efetuar essa adaptação. Primeiramente, para conseguir criar essa funcionalidade, temos que entender quais ferramentas pessoas com deficiência utilizam para navegar na internet.

Algumas pessoas, usam leitores de tela para conseguir entender os sites, outras usam a página através de tradutores em Libras (Língua Brasileira de Sinais), outras, por outro lado, que possuem algum tipo de deficiência motora e não consegue utilizar o mouse, navegam através do teclado.

Portanto, agora temos ciência da necessidade, vamos ver então o que podemos fazer para deixar nosso código HTML acessível a todos.

Descrição das imagens

Para que uma pessoa com deficiência visual possa entender uma imagem, é necessário um texto explicativo. Ele serve para que leitores de tela possam descrever a imagem, de tal forma que o usuário entenda o sentido da imagem com clareza. O recomendado, é que, esse texto alternativo seja o mais esclarecedor possível. De uma maneira que, qualquer pessoa que leia, ou escute aquela descrição, consiga compreender a imagem com clareza.

Esse texto alternativo, é um atributo adicionado junto da tag img, ele tem o nome de alt=" ". Dentro das aspas é o local que temos para descrição. Vamos ver um exemplo:

Para essa imagem, seguindo os padrões corretos de descrição, podemos fazer da seguinte forma: alt=" Dois homens sentados próximos, de frente para uma mesa com computador, homem do lado direito tem cabelos curtos e lisos e está usando uma camisa de manga curta e calça, o outro rapaz, da esquerda, tem cabelos encaracolados curtos, camisa e bermuda"

Hierarquia de cabeçalhos

Essa parte dos headers também é, certamente, muito importante. Pois, há a possibilidade de o usuário navegar pelos cabeçalhos da página. De forma com que ele saia de um título principal, um h1, e vá para o próximo título hierárquico, ou até mesmo, ir acessando os subtítulos dele. Certamente, isso só é possível, se seu site estiver corretamente estruturado.

Outro ponto, é que um site bem estruturado com seus títulos, são melhores ranqueados pelos mecanismos de busca, e ajudam com a navegação pelos leitores de tela.

Links e atalhos de navegação

Os links de uma página precisam ser utilizados de forma lógica, ou seja, que façam sentido à página. Pessoas que, por exemplo, não utilizam o mouse devido à mobilidade reduzida ou com alguma deficiência visual, utilizam softwares auxiliares ou atalhos do teclado, sendo assim, utilizam o TAB para percorrer pelos links de uma página.

O tabindex é um atributo que ao ser adicionado as tags HTML, serve para criar uma sequência específica dos elementos HTML. A maioria dos navegadores já possui esse atalho integrado, como o Google Chrome, Firefox, Microsoft Edge entre outros.

Estrutura de formulários

Formulários possuem dados do usuário, por muitas vezes, que podem ser sensíveis. Dessa forma, se torna algo que precisa de atenção redobrada.

Já é algo comum o uso de tag semântica na criação de um formulário. Normalmente, segue um padrão bem conhecido:

• form: é a tag que envolve os campos de um formulário.
• input: são os campos para preenchimento, podendo ser de vários tipos como, text, submit, radio, checkbox, number entre outros.
• textarea: essa tag é utilizada para que o usuário escreva textos maiores, utilizada normalmente para comentários de um post, ou até mesmo da página.
• select: é usado para criação de uma lista de itens predefinidas pelo desenvolvedor, como um menu de seleção.
• button: o uso mais comum é usado a enviar os dados preenchidos.

Além dessas tags mais usadas, quando pensamos na parte da acessibilidade, é importante o uso de outras tags complementares, que deixam nosso HTML mais semântico e acessível.

• label: tag semântica para definir um nome para algum input.
• fieldset: usada para a separar as informações dos formulários em grupos. Por exemplo, dados pessoais e de endereço.
• legend: nela podemos, semanticamente, dar um rótulo para um, fieldset, por exemplo.
• optgroup: essa tag trabalha em conjunto com a tag select, é onde criamos grupos de opções.

Idioma da página

O idioma da página é algo que, pode passar despercebido por alguns desenvolvedores, principalmente para os iniciantes.

Ao se iniciar um novo projeto, é necessário dizer aos navegadores qual é o idioma de origem daquela página. Além de ajudá-los a identificar se a página, ao ser aberta, precisa, ou não, de tradução. Ainda ajuda o usuário que utiliza a tradução para Libras.

Atributos ARIA

ARIA significa, Aplicações para a Internet Ricas em Acessibilidade. Esse atributo pode ser usado em qualquer tag dentro do site. Ele ajuda quando se é necessário passar mais informações do que realmente um elemento faz na nossa página.

Existem inúmeras variações para esse atributo. Para utilizá-lo, escreve-se da seguinte maneira, primeiro seu nome e depois o que queremos descrever separado por um - (hífen), aria-.... Vamos ver alguns exemplos.

• aria-required: nele indicamos para leitores de tela, informar para o usuário a necessidade de preenchimento do campo.
• aria-haspopup: informa ao usuário que um botão, abrirá uma janela de pop-up.
• aria-checked: esse atributo informa que o input, checkbox ou radio button já está marcado.
• aria-disabled: ele avisa ao usuário que o campo está desabilitado.
• aria-label: informa que esse campo é o rótulo de algum outro elemento, ou seja, ele associa um elemento ao outro.
• aria-multiline: normalmente usado junto da tag textarea, ele pode receber o valor de true ou false, indicando se o campo pode, ou não, ter mais de uma linha para escrever.
• aria-labelledby: ao contraio do aria-label, esse atributo, indica que um elemento esta sendo rotulado pelo elemento indicado dentro do aria-labelledby=" ".

Além dos exemplos citados a cima, existem outros muitos atributos ARIA que não só podemos, como decerto, devemos utilizar. Na documentação oficial no site do Mozilla, tem uma lista de todos os atributos disponíveis e suas definições.

Conclusão

Saber, não só como criar, mas sim estruturar de forma completa uma página é fundamental. Desenvolver essa mentalidade, principalmente no começo, quando estamos aprendendo, é o que nos dá uma base sólida de conhecimento.

Por fim, é importante pensar no quão bem nossa página ficará ranqueada ao se utilizar um HTML acessível e semântico. Entretanto, o que realmente importante, é que consigamos dar aos usuários de nossa página uma ótima experiência, seja ela uma pessoa com deficiência ou não.