Aprenda a deixar o Checkbox estilizado acessível a pessoas com deficiência visual

INTRODUÇÃO

Quando entramos num site, o que observamos primeiro? Se é legal, bonitinho e estilizado, se dá gosto de ver e ler? Eu, particularmente, adoro um site todo estilizado e diferente dos tradicionais, adoro estilizar os elementos e deixar do meu jeito, assim como mostrei no post Como estilizar Checkbox com CSS.

Legal ver o checkbox bonitinho do jeito que queríamos, não é? Mas vocês conseguem ver algum tipo de problema nessa estilização?

Figura 01 – Checkbox estilizado com CSS

É, pessoal, temos um problema muito sério na maneira como codificamos o CSS. Como será que as pessoas com algum tipo de deficiência visual conseguem entender esses quadradinhos bonitinhos? Ou, antes disso, vocês sabem como as pessoas com esse tipo de deficiência fazem para usar e compreender os sites que tem na Web?

Essa é a ideia deste post, entender um pouco como melhorar nossos códigos para que fique acessível e usual para todos os tipos de pessoas. E, para isso, vamos implementar acessibilidade e usabilidade no código que fizemos no post anterior onde estilizamos o checkbox.

LEITORES DE TELA

Muitas pessoas tem algum tipo de deficiência visual e isso muda muito a visualização e utilização dos sites. Então, como eles fazem para compreender o conteúdo descrito nas páginas?

Existem vários Leitores de Tela, que como o próprio nome diz, são programas que leem a tela e assim o usuário consegue compreender o que está aparecendo no computador. O leitor de tela free feito para Windows é o NVDA (NonVisual Desktop Access).

Baixei e instalei o NVDA no meu computador e abri o meu site com o checkbox estilizado e bonitinho, e…

O leitor de tela simplesmente não leu nada e nem foi possível acessar os itens pelo teclado. Péssimo isso, de que adiantou os quadradinhos ficarem bonitinhos se não é possível que todos consigam usar essa funcionalidade no site?

ENTENDENDO OS MOTIVOS

Depois que a frustração de não ter funcionado passou, peguei o código do checkbox estilizado e fui descobrir porque o leitor de tela não lia nada e como arrumar isso.

Vamos lembrar o que fizemos no CSS: nós escondemos o input porque o quadrado no formato padrão é feio e colocamos uns quadradinhos bonitinhos com os pseudo-elementos ::before e ::after do CSS. E como conseguimos esconder o input?

Usamos a propriedade display do CSS, essa propriedade determina a maneira que a caixa de cada elemento aparece na tela. No HTML, os valores padrões da propriedade display seguem as especificações do HTML ou da folha de estilo padrão do navegador.

O valor padrão desta propriedade é inline, mas para o input ficar escondido, nós usamos o valor none, que permite desativar a exibição do elemento.

Figura 02 – CSS do input com display: none

Importante entender que quando você usa none em algum elemento, é como se esse elemento não existisse, e claro, o leitor de tela não consegue ler o que não existe. E agora, como resolver esse problema?

IMPLEMENTANDO ACESSIBILIDADE

Já descobrimos que o leitor de tela lê o input e por tanto não podemos usar display com valor none para ele não sumir de verdade do documento. Precisamos que o input esteja no documento, mas que fique invisível. Então, vamos primeiro apagar a propriedade display do input e olhar no navegador o que acontece.

Figura 03 – Layout sem display: none no input

Agora o input está aparecendo no documento, assim o leitor de tela entende e lê a descrição do item. Com isso, também conseguimos acessar o item pelo teclado, porque o teclado também entende o input.

Enquanto “andamos” pelos itens com a ajuda do botão tab do teclado, o quadradinho padrão do input fica com um contorno azul, mostrando visualmente que o item está com foco e lê a descrição do item.

Pronto, agora o leitor de tela consegue entender o nosso código, porque na verdade ele lê o input. Resolvido o problema de acessibilidade! rs…

Não, né!!! O quadradinho padrão e feio do input está aparecendo na tela, em cima do respectivo item. Funciona, mas está feio, precisamos dar um jeito nisso. Precisamos voltar para o nosso layout inicial e fazer com que o leitor de tela continue lendo os itens.

Para isso, vamos usar a propriedade position do CSS com valor absolute no input. Assim, o input ficará com a posição absoluta em relação a label, que já está com position com valor relative (post anterior).

Figura 04 – Posição do input e da label

Vamos olhar no navegador o resultado dessa modificação do CSS.

Figura 05 – Input com position: absolute

Hum!!! Já está ficando melhor. Agora o quadrado padrão do input está na mesma posição que os quadradinhos bonitinhos que colocamos com os pseudo-elementos ::before e ::after na label (post anterior).

Figura 06 – Pseudo-elementos ::before e ::after na label

Já que não podemos colocar display com valor none no input, qual seria uma outra forma de tornar o input invisível, sem removê-lo do documento?

No CSS temos a propriedade opacity que especifica a transparência de um elemento. Perfeito! É exatamente o que precisamos! Podemos deixar o input transparente, mas ainda no documento, para que o leitor de tela consiga ler. Para que o elemento fique transparente, vamos usar opacity com valor zero.

Figura 07 – CSS completo do input

Com esse CSS para o input, conseguimos ter o mesmo layout que tínhamos no término do outro post. E como o quadradinho padrão está somente transparente, o leitor de tela entende e consegue ler o conteúdo e acessá-lo pelo teclado também.

Figura 08 – Layout final

Aeee!!! Conseguimos voltar nosso layout para os quadradinhos bonitinhos do post anterior, e conseguimos adicionar acessibilidade a estilização do checkbox. Mas quando “andamos” com o botão tab do teclado pelos itens conseguimos perceber qual item está em foco?

MELHORANDO A USABILIDADE

Lembram que antes de tornar o input transparente, quando “andávamos” com o botão tab do teclado pelos itens, o quadradinho do input ficava com um contorno azul mostrando que o item estava em foco?

Agora isso não acontece porque o input está escondido. Acabamos de encontrar um problema de usabilidade no código. Vamos aproveitar e resolver isso para deixar nosso checkbox mais completo.

Para melhorar a usabilidade, vamos adicionar ao CSS do input alguns estilos para quando o item estiver em foco. Vamos adicionar uma borda mais grossa aos quadradinhos e deixar a fonte da descrição em negrito.

Figura 09 – Estilo para quando o item está em foco

Propriedades adicionadas, ficamos com o layout abaixo quando o item está focado.

Figura 10 – Item com marcação visual quando em foco

Assim, quando “andamos” pelos itens com a ajuda do teclado, fica mais fácil visualmente de identificar o item que está focado, não ainda marcado, só com foco.

CONCLUSÃO

Com poucas alterações no código inicial, conseguimos tornar o checkbox estilizado acessível para os leitores de tela e assim as pessoas com algum tipo de deficiência visual conseguem entender o conteúdo da página.

Se pensarmos em acessibilidade e usabilidade durante a criação do site, fica mais natural a sua implementação e assim o site além de bonito visualmente, ficará funcional para todos os tipos de pessoas.

Precisamos sempre pensar em todos os tipos de usuários quando criamos um site ou um software novo. Agora, sempre quando estou “codando”, o programa NVDA está aberto para entender melhor como ele funciona e poder melhorar os meus códigos.

Deixe uma resposta

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