Acessibilidade web parte 2: componentes acessíveis com um pouco de JavaScript

Melhorias iniciais - Introdução

Sou Natan Souza e serei seu professor na segunda parte do curso de Acessibilidade Front-end. Nesta parte, focaremos em código, por isso, é necessário ter um conhecimento prévio de - pelo menos - HTML e CSS.

O primeiro curso é mais voltado a temática Design, enquanto que no segundo começamos a ver melhorias possíveis em termos de acessibilidade nos nossos projetos envolvendo programação.

Este curso, por sua vez, será totalmente focado em Front-end e JavaScript, linguagem que trabalhamos pouco no anterior. Daremos continuidade em melhorar a acessibilidade da Apeperia, lidando com botões de assinatura de planos do ponto de vista do uso de um leitor de tela, por exemplo.

Melhoraremos o carrossel e o modal para recebimento de emails que, no momento, desce a tela quando apertamos a tecla "Tab". Por fim, faremos alterações no formulário do site, validando o campo do CEP, mexendo nas sugestões de autocomplete, entre outras.

Espero que curta este curso, e dê logo o play no próximo vídeo!

Melhorias iniciais - Feedbacks e escondendo visualmente

Algo que obtivemos como feedback do Bruno no curso anterior - e agradecemos bastante - foi em relação à tag <h2> do subtítulo, colocada justamente para indicar uma espécie de resumo do site:

<h2 class="secaoDestaque-texto">
    A Apeperia é uma startup com um jeito inovador de comprar e montar aplicativos mobile e web para pequenas e médias empresas
</h2>

Segundo o Bruno, o texto está grande levando-se em consideração que ele é um subtítulo. Estes costumam ser mais pontuais, assim como títulos. Por conta disto, substituiremos o h2 por p.

Outra questão apontada foi nos preços dos planos, que são um tipo de subtítulo (<h4>). Semanticamente falando, não é muito correto. Trocaremos, então, todos estes pela tag <span>, como veremos a seguir:

<span class="secaoPlanos-plano-preco">
    R$ 1000
</span>

Se salvarmos e voltarmos à página no navegador, notaremos que não houve alteração visual.

Lembrando que é importante sempre tentar obter feedback de seu usuário, desde o início do planejamento, por meio de perguntas do tipo "Será que isto faz sentido?" e "Como você acha que isso funcionaria melhor?".

O feedback é igualmente importante durante o processo, conforme a produção de um protótipo de alta fidelidade, quando se começa a ter o site ou aplicativo propriamente dito, com o código, e tudo o mais. São assuntos abordados nos cursos sobre UX da Alura, que também recomendo.

No projeto final do curso anterior, talvez você não tenha prestado atenção na seção de assinatura de planos. Acessaremos a página utilizando o NVDA, ao qual já nos acostumados a utilizar.

Conforme vamos navegando com a tecla "Tab", o leitor diz "Assinar plano", o que parece ótimo mas... Sobre qual plano estamos falando? Isto não é indicado na leitura. Nós vemos de que plano se trata, porém, não está acessível.

Corrigiremos isso voltando ao código, na parte do botão referente à assinatura do plano Start, simplesmente acrescentando ao texto a palavra "Start" no local em que anteriormente estava simplesmente "Assinar plano":

Assinar plano Start

Parece bom, mas se mostrarmos isto ao designer, ele poderá não gostar da mudança. Precisaremos de um jeito disto funcionar no NVDA ao passo em que seja "escondido" visualmente.

Pensando nisto, usaremos a classe escondeVisualmente:

.escondeVisualmente {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Caso haja uma borda, esta será retirada pelo código, aplica um clip, mantém a altura em 1px, e oculta o elemento excedente. Além disso inclui o position: absolute para que ele não apareça no contexto em que está.

Voltaremos ao index.html e deixaremos o código da seguinte maneira:

Assinar plano <span class="escondeVisualmente">Start</span>

Quando voltarmos ao navegador e atualizarmos a página, perceberemos que "Start" sumiu do botão, mas o NVDA o lê normalmente, como se ele ainda estivesse visível. É disso que precisávamos.

Se quisermos complementar ainda mais este botão, outra opção seria incluir o valor no mesmo span:

Assinar plano <span class="escondeVisualmente">Start por R$ 500,00</span>

Vamos fazer o mesmo com os demais botões de assinatura de planos, apenas nos certificando de colocarmos os nomes corretos, bem como os valores correspondentes dos planos, no lugar de "Start" e "R$ 500,00".

Testaremos com o NVDA mais uma vez, e tudo estará funcionando conforme desejamos.

Muitas vezes deixaremos alguns detalhes escaparem, porém, o importante é analisar o que está sendo feito e testar os nossos projetos, por meio de testes de usabilidade, com feedbacks internos e externos.

Melhorias iniciais - Mais span e alts

Outro ponto interessante: navegar pelo atalho "Shift + H" enquanto utilizamos o leitor de tela traz informações irrelevantes quanto aos planos, misturando os dados sobre "Start", "Ultra", "Mega" com "BLOG" e "PLANOS".

Assim, para melhorar a acessibilidade e usabilidade do nosso site, poderíamos incluir a palavra "Plano" antes de todos os nomes dos planos, mas caímos na questão de que o designer (ou o chefe) pode não gostar, já que torna o site visualmente redundante.

Porém, da mesma forma como fizemos anteriormente, poderíamos esconder estes dados usando a classe escondeVisualmente, e teríamos:

<h3 class="secaoPlanos-plano-titulo"><span class="escondeVisualmente">Plano </span>Start</h3>

Um plugin muito utilizado no curso é o Emmet, que ajuda a otimizar o trabalho de digitação de código e está disponível para a grande maioria de IDEs.

Testando a navegação com o leitor de tela, verificaremos que conseguimos resolver nosso problema.

Continuando, a descrição dos planos é uma lista - lembra que eles têm os list items, ou <li>, os bullets?

<ul class="secaoPlanos-plano-itens">
    <li>5 manutenções mensais</li>
    <li>App SEO</li>
    <li>1 sistema operacional</li>
</ul>

No arquivo secaoPlanos.css, temos a classe secaoPlanos-plano-itens, em que alteraremos list-style: none para list-style: disc. Feito isto, poderemos voltar ao navegador e atualizar a página.

Navegando pela página novamente, utilizando o NVDA, as listas que compõem as descrições dos planos estão mais acessíveis. Podemos achar que ficar ouvindo o leitor de tela repetir bullet o tempo todo pode ser cansativo, mas segundo o Bruno, as pessoas já estão acostumadas, e é melhor saberem que se trata de listas.

Caso quiséssemos esconder as bolinhas, daria para usarmos pseudo-elementos como :after e :before, deixando o position: absolute em cima, um pouquinho para a esquerda, cerca de -10px, por exemplo.

Voltaremos a index.html e usaremos a classe escondeVisualmente nos outros planos, "Mega" e "Ultra".

Outra coisa, vimos no curso anterior, a regra sobre uma imagem ter a responsabilidade de ser uma ilustração com caráter meramente visual? Será que faz sentido usarmos algo como "Teclado da Apple e um celular Android", como neste caso?

Optaremos por deixar o alt vazio, pois ele traz uma informação irrelevante, sendo apenas ilustrativo. Existem leitores de tela que entendem isto com alt="", porém deixaremos simplesmente alt, que é para o leitor de tela ignorar a imagem.

A questão da descrição de imagem fica um tanto subjetiva, pois pode fazer sentido para uma pessoa e não para outra. Em todo caso, vale o bom senso, o contexto, uma conversa com o restante do time.

Sobre o curso Acessibilidade web parte 2: componentes acessíveis com um pouco de JavaScript

O curso Acessibilidade web parte 2: componentes acessíveis com um pouco de JavaScript possui 175 minutos de vídeos, em um total de 51 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Melhorias iniciais
• Fazendo uma modal acessível
• Carousel acessível
• Formulário acessível
• Formulário mais acessível