♾️Vamos falar de acessibilidade no Frontend??

Taí um assunto que eu ainda não tinha parado para refletir e incorporar em meu trabalho como desenvolvedora. Sempre li sobre usabilidade, sobre a importância de oferecer uma experiência completa para o usuário, sobre oferecer uma interface fácil de usar e intuitiva. Assisti vídeos de como pensar interfaces que possibilitem uma boa navegabilidade e como incorporar muitos elementos visuais para tornar tudo mais interessante para o usuário .... (vamos destacar esse ponto .. elementos visuais).

Durante a Agile Brazil 2021, fui apresentada a um aspecto que, não é novo, mas é muito negligenciado, a acessibilidade de pessoas que usam leitores de tela.

Quando falamos de desenvolvimento Frontend, associamos, diretamente, ao visual de uma aplicação, pensamos na necessidade de deixar um site bonito, bem alinhado, com cores harmônicas, ícones bem posicionados ... mas, já parou para pensar que... nada disso faz sentido quando temos um usuário que simplesmente não vê ...

Pois é, para o usuário de leitores de tela, o alinhamento e as cores do site não fazem a menor diferença. E daí me pergunto: o que importa conhecer o framework da modinha, saber fazer animações mirabolantes ... se haverá um público que não vai conseguir nem navegar pelo projeto?

Vale ressaltar que não estou menosprezando todo estudo de cores, alinhamentos e usabilidade do projeto. O design e as funcionalidades de um projeto continuam sendo elementos importantíssimos, mas, é nesse ponto, exatamente aqui, que o desenvolvedor, que realmente deseja ser especialista em Frontend, tem o dever de se aprofundar no tema acessibilidade e incorporar em todos os seus projetos.

Você já parou para pensar se as tags semânticas do HTML estão sendo aplicadas corretamente? Ou o cabeçalho de seu site está usando a tag <header>, o título utiliza <h1> e botões são realmente <button> ?

E aquela linda imagem do produto que cliente contratou o melhor fotografo para a sessão de fotos, você se preocupou em adicionar o atributo alt na tag <img> para descrever a foto de forma correta

Pesquisando sobre o assunto, percebi que, na grande maioria dos casos, conseguimos ter um projeto mais inclusivo com a incorporação de elementos HTML que, muitas vezes, negligenciamos (e aqui me incluo porque eu, realmente, deixava de lado em meus projetos). Com o uso de uma boa semântica e definição de alguns atributos (que, as vezes, consideramos dispensáveis) conseguimos suprir questões essenciais para o bom funcionamento de um leitor de tela.

Vamos a um exemplo baseado no site Inclusive Components, usando o clássico To-Do List ...

<form>
	<label>Adicione um novo item</label>
  <input type="text" placeholder="Ex. Fazer compras">
  <button type="submit">Adicionar</button>
</form>

Neste exemplo temos o uso do atributo placeholder com uma sugestão do que o usuário pode adicionar na lista e uma tag <p> adicionado logo acima da tag input com texto de orientação do usuário.

O uso de um texto logo acima ou ao lado do input é um recurso de usabilidade considerando que o atributo placeholder desaparece quando o campo ganha foco. Contudo o leitor de tela não sabe que o texto acima ou ao lado corresponde ao input que ele está descrevendo.

<form>
	<label>Adicione um novo item</label>
  <input type="text" aria-label="Escreva um novo item da lista" placeholder="Ir as compras">
  <button type="submit">Adicionar</button>
</form>

Neste segundo exemplo adicionamos o atributo aria-label que fornece um label que ficará visível mas permite adicionar uma descrição mais assertiva do que o input espera.

Muito além de um código bem escrito e bem formatado, o cuidado com a semântica e a acessibilidade devem fazer parte do dia a dia de todo desenvolvimento Frontend. A mudança é pequena, mas é um cuidado que faz toda a diferença para muitas pessoas. E, pelo menos pra mim, são esses detalhes que acabam tornando um profissional mais completo.

O assunto acessibilidade é extenso e ainda tenho muito o que aprender, mas conforme aprofundo a pesquisa, vou descobrindo elementos tão simples que fazem total diferença no quesito acessibilidade que, não faz o menor sentido não incorporar no meu dia a dia.

Vou deixar alguns links que consultei para escrever este post, certamente, será um assunto que vou escrever mais a respeito e quero muito conseguir conciliar o design bonito e bem alinhado, com a acessibilidade daqueles que enxergam através da descrição.