Dê o próximo passo e inicie sua carreira
Dê o próximo passo e inicie sua carreira agora mesmo
4 minutos de leitura
Autor(a)
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Uma coisa bacana que designer adora fazer: customizar componentes de formulários. Sempre para reforçar a identidade visual do sistema e deixar o visual mais uniforme. E quem já precisou fazer o código de um checkbox customizado sabe o quão sofrido é, mas já viu se ele é acessível?
Assumindo que temos que fazer o checkbox da imagem abaixo e devemos usar uma <div>. No mundo real o mais eficiente seria usar um <input type=”checkbox”> propriamente dito.
Vejamos o exemplo abaixo:
Agora vamos ver como um usuário de leitor de tela ouve esse lindo checkbox:
Como a pessoa vai saber que isso é um checkbox se ele não fala isso para o usuário? Como fazer isso se você está obrigado a usar uma <div>?
E como fazer com que o leitor de tela entenda que isso é um checkbox e não um texto perdido?
No nosso caso, a <div> precisa virar um checkbox. Vamos então mudar sua função em nosso HTML, alterando seu papel no nosso código apenas colocando o atributo role=checkbox. Vendo no exibidor de fala do NVDA:
Agora sim ele fala que se trata de uma caixa de seleção, mas ainda não fala se já está marcado ou não...
Outro problema que podemos notar é que o usuário não vai saber se o checkbox está marcado ou desmarcado. Por padrão ele deve vir marcado (bad UX?), colocar o atributo checked faria sentido em um elemento de formulário. Nessa situação precisaremos usar os ARIAs, outra parte da especificação da WAI ARIA que envolve estados: o atributo aria-checked. Isso para informar que sim, essa caixa de seleção está “checkada”:
<div class="contato-newsletter-check" role="checkbox" aria-checked="true">
X
</div>
E como o usuário vai saber que o elemento é focável?
Se a pessoa estiver navegando via teclado, como ter certeza que está com o foco nesse checkbox? Por isso que elementos de formulário precisam passar o feedback que estão ou não com o foco ativo.
Para resolvermos isso no nosso código precisamos dizer que ele é focável usando o atributo que muda a sequência natural de foco do HTML, o atributo tabindex.
No caso precisamos mudar a ordem dessa sequência natural ou simplesmente falar que ele é focável? Só focável! Para isso colocamos seu valor em “0”:
<div class="contato-newsletter-check" role="checkbox" aria-checked="true">
X
</div>
E da mesma forma que colocamos o atributo for em um elemento <label> também devemos fazê-lo aqui, afinal a <div> agora tem alma de checkbox. Isso para que o usuário, que pode não ter a mesma destreza com ponteiro do mouse que nós, consiga acertar aquela pequena caixinha azul.
Vamos fazer isso substituindo a <div>, colocando o atributo for e o ID em nosso checkbox:
<div class="contato-containerCampo contato-containerCampo--full">
<div class="contato-newsletter-check" role="checkbox" aria-checked="true" tabindex="0" id="spam">
X
</div>
<label class="contato-newsletter-label fm-label for-checkbox" for="spam">
Quero receber a Newsletter da Caelum com notícias técnicas. <strong>Sem spam!</strong>
</label>
</div>
Aí entraria em mexer nos atributos via JavaScript e dar um jeito nesse "X" sendo lido ali, mas isso fica para outro post. Para adiantar você pode ver um chekbox acessível aqui.
Se quiser saber mais sobre checkbox e acessibilidade, recomendo dar uma olhada no MDN sobre como usar a role checkbox.
A ideia desse post foi mostrar como mudar a semântica de um elemento sem precisar alterá-lo de fato. Perceba que pequenas atitudes podem fazer a diferença na hora que nosso usuário vai usar nossos projetos.
Idealmente devemos usar o elemento específico para a situação específica. No caso de algo para marcar e desmarcar, já existe o checkbox, então deveríamos usá-lo!
Outro exemplo! Atualmente não temos um elemento específico para dropdowns, com o role=dropdown e mais alguns ajustes, uma <div> pode se transformar nisso, como o dropdown do Bootstrap.
Confira abaixo, outro exemplo de um checkbox acessível, agora usando o input checkbox:
See the Pen Checkbox true by Natan Souza (@designernatan) on CodePen.
Espero que esses posts de acessibilidade estejam sendo úteis para você e se quiser se aprofundar e fazer um projeto acessível na prática recomendo dar uma olhada na carreira sobre acessibilidade na Alura.
Avalie este artigo
