Deblogger

Acessibilidade e HTML

Comentei brevemente sobre acessibilidade no último artigo aqui do blog. Entretanto, é interessante comentar alguns outros pontos que são importantes quanto a questão da acessibilidade, que acaba sendo deixada de lado por diversos motivos na hora de desenvolver um site em HTML.

De acordo com um levantamento feito pelo Movimento Web Para Todos e a plataforma de dados BigDataCorp, divulgado no dia 20 de maio deste ano (2020), a maior parte da web brasileira é inacessível aos 45 milhões de cidadãos que possuem alguma deficiência. Os dados são assustadores: menos de 1% dos sites tiveram sucesso em todos os testes de acessibilidade aplicados.

Você pode encontrar dicas e exemplo de código acessível no site do Movimento Web Para Todos. Reuni algumas das práticas que eu uso para apresentar nesse artigo, mas sinta-se à vontade de ler tudo direto pelo site do Movimento Web Para Todos, que contém diversas outras informações que eu posso não citar aqui.


Layout Acessível

Uma prática um pouco antiquada, mas que muitos desenvolvedores insistem em usar, é construir o layout das páginas em forma de tabela. Embora alguns softwares de leitura de tela consigam diferenciar o que é uma tabela que está sendo usada como layout de uma tabela de conteúdo, a maioria fará com que o usuário tenha que entrar na tabela como um objeto e ler as suas características separadamente, para depois precisar sair da tabela novamente e continuar navegando pelo conteúdo.

Além de não ser uma boa prática de acessibilidade ao construir uma página com HTML, usar tabelas para construir o layout é uma péssima ideia quando falamos de responsividade no design, por isso evite a todo o custo. Nesse sentido, construir o layout com os elementos semânticos do HTML possibilitará que seu site seja legível a todos os softwares de leitura de tela e facilitará bastante na construção de um design responsivo.


Boa semântica

Já falei sobre semântica no HTML no artigo anterior, mas não custa nada ressaltar sua importância aqui. Práticas como o uso excessivo de divisórias ao invés de usar os elementos semânticos, ou ainda atrocidades como usar <div> ao invés de <button> na construção de um botão (deixando a aparência do elemento igual a de um botão por meio de CSS) devem ser evitadas e corrigidas.

Boa semântica em HTML é usar elementos corretos para a finalidade correta, na medida do possível. Elementos semânticos são elementos com um significado; então se você precisar de um botão, use o elemento <button>, e não um <div>.

Em alguns casos, não haverá possibilidade de descartar o código ruim. Se suas páginas web forem geradas por algum framework que você não possui controle total, por exemplo, ou você tenha algum conteúdo de terceiros na sua página do qual você não tem controle sobre, será quase impossível fazer as correções necessárias. Contudo, qualquer melhoria que você conseguir fazer ajudará na acessibilidade do seu site.


Conteúdo textual

Quando o assunto é texto, a melhor forma de auxiliar na leitura de sua página é criar uma boa estrutura de títulos, parágrafos, listas etc. Sendo assim, um bom exemplo de uma estrutura acessível de um conteúdo textual é:

<h1>Este é um exemplo acessível</h1>

<p>Um conteúdo textual precisa de divisões bem definidas, por exemplo.</p>

<ol>
    <li>Títulos construídos com elementos de título</li>
    <li>Parágrafos divididos com elementos de parágrafos</li>
    <li>Listas sendo construídas com elementos de lista</li>
</ol>

Agora veja um exemplo que terá a mesma aparência visual, porém não terá a mesma semântica:

<div class="titulo">Este é um exemplo inacessível</div>
<br/>
Um conteúdo textual não precisa de divisões bem definidas, por exemplo.
<br/><br/>
1. Títulos construídos com divisórias;
<br/><br/>
2. Parágrafos divididos com elementos de quebra de linha<br/><br/>
<br/><br/>
Listas sendo construídas com elementos de quebra de linha
<br/><br/>

No exemplo acima, ao invés dos elementos semânticos, foi usada uma divisória para o título, que está sendo personalizada com CSS, e ao invés dos parágrafos e elementos de lista foram utilizadas quebras de linha (<br>). Dessa forma, além de atrapalhar a leitura da sua página em HTML pelos softwares de acessibilidade, a leitura do próprio código fica estranha e bagunçada.


Imagens

Imagine que você é uma pessoa cega e está navegando em uma página da web, quando se depara com uma imagem. Obviamente, o software que está realizando a leitura do site para você não conseguirá traduzir o conteúdo da imagem em um texto. Mas então, como você vai saber do que se trata a imagem?

A resposta está no atributo alt. Este atributo fornece um texto alternativo para uma imagem, se por algum motivo o usuário não puder visualizá-la (devido à conexão lenta, um erro no atributo src ou se o usuário usar um leitor de tela). Sendo assim, ao inserir uma imagem na sua página, não esqueça de incluir este atributo. Se você quiser saber mais disso, acesse o artigo que eu falo sobre tags de texto, link e imagens no HTML.


Links

Um link deve explicar de forma clara quais informações o leitor obterá clicando nele. Por exemplo, evite usar somente ‘clique aqui’, ou ‘acesse’. Dê uma descrição detalhada do que acontecerá ao clicar, por exemplo: ‘Saiba mais sobre HTML’, ou ainda ‘Conheça a linguagem HTML’. Se a descrição ficar muito grande, você pode ainda usar o atributo title para descrever melhor a ação do link, por exemplo:

<a href=" http://deblogger.com.br/o-que-sao-elementos-semanticos/" title="Acessar atigo sobre elementos semânticos no HTML">Ver artigo anterior.</a>

As informações geralmente são mostradas como um texto de dica de (tooltip) quando o mouse se move sobre o elemento, da seguinte forma:

Ver artigo anterior.

Passe o mouse sobre o link para ver o texto de dica que aparecerá


Declarar o idioma

Declarar o idioma da página é importante para os leitores de tela e mecanismos de pesquisa. O idioma da página pode ser declarado com o atributo lang da própria tag <html>, da seguinte forma:

<!DOCTYPE html>
<html lang="pt-br"/>
    <head>
        <!-- Cabeçalho da página -->
    </head>
    <body>
        <!-- Corpo da página -->
    </body>
</html>

Ou ainda pode ser declarado na tag <meta>, dentro do cabeçalho da página, também com o atributo lang, da seguinte forma:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" lang="pt-br"/>
        <title>Página HTML em português</title>
    </head>
    <body>
        <!-- Corpo da página -->
    </body>
</html>

Usar linguagem clara

Use uma linguagem clara que seja fácil de entender e tente evitar caracteres que não possam ser lidos claramente por um leitor de tela, por exemplo: em vez de escrever 1-3, escreva 1 a 3. Além disso, evite abreviações e gírias, que dificultam bastante a leitura não só para os softwares de leitura de tela, mas também para o leitor no geral.


Conclusão

Se você é um programador iniciante, pratique o desenvolvimento de sites em HTML focando a acessibilidade desde já. Dessa forma, você já aprenderá a desenvolver de maneira inclusiva, e isso será um hábito, não havendo necessidade de esforço maior quando surgir a necessidade de fazer um site com foco em acessibilidade (embora todos os sites devessem pensar nisso). Infelizmente, esse é um tema pouco difundido e pouco praticado, como pôde-se ver pelos dados apresentados no início deste artigo, mas é algo que a nova geração de desenvolvedores pode mudar.

Espero ter ajudado com informações úteis, e não esqueça de praticar o que foi apresentado aqui, além de buscar mais informações sobre o assunto.

Avalie:
5 (1)

Publicado por Mauro Oliveira

Desenvolvedor apaixonado por JavaScript, especialista em VueJS. Atualmente focado em padrões de projeto e código, estudando sobre testes unitários, Clean Code e segurança em aplicações Web, Mobile e Desktop.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *