A responsabilidade do front-end na acessibilidade dos produtos digitais
Você já imaginou como seria navegar pelo seu produto com a tela do seu celular ou computador desligada?
De acordo com o último Censo do IBGE (Instituto Brasileiro de Geografia e Estatística), 23,9% dos brasileiros declaram ter algum tipo de deficiência. Após o IBGE alterar a forma de interpretar os dados e criar um novo indicador, este número caiu para 6,7% da população com deficiência.
Porém, essas pessoas não desapareceram, elas possuem poder de compra e também fazem uso do seu produto no dia-a-dia. Logo, não pensar em acessibilidade no desenvolvimento do seu produto é ignorar aproximadamente 45 milhões de brasileiros.
Acessibilidade é para todos
Quando pensamos em acessibilidade geralmente fazemos um recorte apenas para pessoas com algum tipo de deficiência permanente. Mas a verdade é que devemos pensar em acessibilidade como um todo. Por exemplo:
- Pessoas com mobilidade reduzida temporária, seja por algum acidente, por estar com uma criança no colo ou até mesmo por estar com as mãos cheia de sacolas;
- Pessoas idosas;
- Pessoas que não estão acostumadas a usar determinada tecnologia ou dispositivo;
- Pessoas que não são fluente no idioma do produto.
“O poder da web está em sua universalidade.
Acesso para todos, independente de deficiência, é um aspecto essencial.”— Tim Berners-Lee.
Acessibilidade é bug e não uma melhoria
É importante entender que acessibilidade não é uma funcionalidade do seu produto. E que também não pode ser deixada para ser implementada depois. O ideal é que faça parte do mindset da empresa e esteja presente desde o início dos projetos.
Mas nem sempre é fácil implantar uma cultura de acessibilidade na empresa. A ideia aqui é contar um pouco como este processo foi iniciado na unico e de como é possível causar um grande impacto na vida dos usuários, em pouco tempo e sem demandar muito esforço, principalmente por parte do time de front-end. No final, o mais importante é dar o primeiro passo.
Front-end e a acessibilidade digital
Quando falamos de web e acessibilidade, não podemos deixar de citar o a11y.
No desenvolvimento de um produto digital, profissionais de front-end tem um papel fundamental para que esse produto seja acessível, afinal, é através do front-end que os usuários interagem com a aplicação.
Vale lembrar, que parte dessa responsabilidade é dividida com o time de design e experiência do usuário.
Para que o time de front-end consiga implementar uma interface acessível da maneira correta, é importante que todo o processo em etapas anteriores tenha sido pensado dessa forma.
Os nossos produtos são acessíveis?
Há pouco tempo atrás, um usuário alegou que não estava conseguindo usar por completo um de nossos produtos. Quando fomos investigar o que estava acontecendo, descobrimos que se tratava de um usuário com deficiência visual e o problema era a falta de acessibilidade.
Foi só nesse momento que nossa ficha caiu e percebemos o quão não acessíveis eram os nossos produtos.
Entenda o seu usuário
A primeira coisa que fizemos foi conversar com Neimar Silva, que trabalha com recrutamento e seleção na Dasa e foi quem relatou os problemas de acessibilidade, e entender como que ele utilizava nosso produto.
Passamos parte do dia trabalhando com ele e mapeando tudo o que ele tentava utilizar no produto e que por questões de falta de acessibilidade não era possível.
Com os principais pontos mapeados, organizamos as prioridades e começamos a atuar. Boa parte dessa demanda foi preciso apenas atuação do time de front-end sem a necessidade de envolver os times de design e UX.
Você já tentou navegar pelo seu produto com o seu monitor desligado?
Após uma imersão na rotina do Neimar e entender como ele utilizava nosso produto, começamos a utilizar e entender os leitores de tela, o que foi bastante desafiador e fez com que tivéssemos ainda mais empatia por nossos usuários com deficiência.
Abaixo, vou listar algumas das ações que o time de front-end adotou, para melhorar a acessibilidade do produto.
Use uma semântica correta
Utilizar uma boa semântica nas tags HTML já é um grande passo para ter um um produto acessível. Isso vai facilitar muito para os leitores de telas entenderem o conteúdo de sua página. O fato de nosso código HTML ter uma boa semântica foi exatamente o que mais nos ajudou, e por isso não foi necessário muitas alterações na estrutura do código.
Procure sempre utilizar as tags corretas para cada necessidade, como por exemplo header, nav, section, button entre outras. Evitando assim a temida “sopa” de div.
Isso não só vai ajudar na acessibilidade da sua aplicação mas também na indexação pelo Google e em um melhor entendimento do código em uma futura manutenção.
Aumente a acessibilidade com WAI-ARIA
O ARIA (Acessible Rich Internet Applications) ou também conhecido como o WAI-ARIA (Web Acessibility Initiative) é um conjunto de atributos para a acessibilidade. E que pode ser divido em roles e states.
Em alguns casos nós tivemos que usar o ARIA da categoria role para dar significado a um elemento que mostrava o erro de campo do formulário. Como esse elemento só aparece na tela após o preenchimento do campo, o atributorole="alert" serve para informa o leitor de tela que a usuário precisa tomar uma ação imediata antes de continuar, que no exemplo abaixo, é corrigir o campo e-mail.
<span role="alert" class="warning">Digite uma e-mail válido.</span>Já no exemplo abaixo utilizamos a categoria de state, como o botão era apenas visual, sem nenhum texto informando a utilidade, o aria-label tem a função de fornecer essa informação para os leitores de tela.
<button type="button" aria-label="Fechar menu lateral" (click)="toggleMenu()"></button>Atenção aos labels e inputs dos campos
Um elemento fundamental nas aplicações e que costumam gerar alguns problemas de acessibilidade são os inputs. É muito importante que se utilize labels bem informativos para que seja possível a interpretação daquele campo pelos leitores de tela. É muito comum vermos a utilização do atributoplaceholderpara essa finalidade, mas é importante lembrar que os leitores não conseguem interpretar o valor desse atributo.
Inputs customizados
Um outro ponto importante com relação aos inputs é ter cuidado na criação de inputs customizados. Na maioria das vezes acabamos escondendo o elemento nativo de maneira errada e isso faz com que os leitores de tela não encontrem esse campo. Evite usar display:none para esconder o elemento e use o opacity:0 no lugar.
Não remova o outline
É muito comum no famoso reset CSS encontrarmos um outline:none, isso dever ser evitado, porque quando o usuário está navegando via teclado ele utiliza dessa marcação para saber onde está o foco do cursor.
Não utilize textos em caixa-alta direto no HTML
Em algumas partes do nosso código foi preciso fazer essa alteração. Ao invés de deixar o texto em caixa-alta direto no HTML, faça isso via CSS utilizando text-transform:uppercase. Quando o leitor de tela passa por um texto nesse formato, ele acaba dando mais ênfase do que o necessário e na maioria das vezes ele lê apenas as letras como se fossem uma sigla.
<li>DADOS DA EMPRESA</li>
<!-- html -->
<li>Dados da Empresa<li>// css
li{
text-transform: uppercase
}
Evite associar informação somente a cores
Um outro erro bastante comum que encontramos no nosso produto foram as informações associadas a cor, como por exemplo, corrija os campos em vermelho. Isso torna praticamente impossível para um usuário deficiente visual identificar qual campo corrigir.
Dê preferência para termos como, corrija os campos obrigatórios e deixe bem informado quais são esses campos obrigatórios.
Apenas o primeiro passo
Os itens listados acima são apenas alguns exemplos das mudanças que fizemos por todo nosso código front-end visando melhorar a acessibilidade de nosso produto.
Foram mudanças simples, que não demandaram muito esforço e nem muito tempo para serem concluídas, mas que geraram um impacto muito grande e positivo na vida muitas pessoas com deficiência que dependem de nosso produto. Lembrando que, o pouco esforço e tempo demandado nessa tarefa de tornar o produto acessível, só foi possível pela semântica de nosso código HTML que estava bem estruturada e contribuiu bastante.
O Neimar foi o motivador para que começássemos a inserir a cultura de acessibilidade na unico, ele nos ajudou bastante com insights e dicas do que poderíamos implementar no produto que melhorasse a experiência de uso das pessoas com deficiência.
Sabemos que ainda há muito a ser feito para melhorar a acessibilidade de nossos produtos, esse foi apenas o primeiro passo.
Conclusão
Quando voltamos para conversar com o Neimar, mas agora já com os primeiros ajustes de acessibilidade feitos, foi um momento bastante emocionante e que nos fez refletir sobre muitas coisas.
O Nei agradeceu bastante porque agora finalmente ele tinha conseguido concluir um processo por inteiro em nossa ferramenta sem precisar do auxílio de outras pessoas.
Foi bastante gratificante, mas na verdade, nós que tínhamos que agradecê-lo por nos ajudar com seus insights e principalmente nos fazer entender como que as pessoas com deficiência lidam com a tecnologia no seu dia-a-dia.
“Para as pessoas sem deficiência a tecnologia torna as coisas mais fáceis. Para as pessoas com deficiência, a tecnologia torna as coisas possíveis.”
— Mary Pat Radabaugh.
Como começar na sua empresa?
Foi criada uma ideia de que desenvolver produtos acessíveis é difícil, demorado e tem um alto custo. Na verdade, tornar um produto acessível é muito mais difícil se ele não foi pensado desde o começo nessa estrutura. Mas ainda assim é possível dar o pontapé inicial.
Comece a fazer testes rápidos em seu produto navegando via teclado e utilizando o leitor de tela. Se for possível faça o teste com alguma pessoa que possua algum tipo de deficiência.
Crie personas com características relacionadas à acessibilidade, como por exemplo pessoas com daltonismo e deficiências cognitivas. Na maioria das vezes nosso recorte é apenas para os deficientes visual.
E lembre-se sempre, de ter empatia e principalmente de escutar os seus usuários.
Agradecimento especial ao Neimar, que foi peça fundamental nesse processo.
Quer nos ajudar a transformar a sociedade e a construir produtos cada vez mais acessíveis? Clique aqui é veja nossas vagas.
Caso queira se aprofundar mais no tema:
