top of page

Dicas para agregar a acessibilidade digital em botões


Controle futurista com botão grande central, botões coloridos e mostradores com fundo azul-turquesa.

Como agregar acesso digital nos botões do seu produto digital como um site ou aplicativo?


O propósito deste texto é apresentar direcionamentos básicos para que sua equipe saiba aumentar a acessibilidade digital em botões. São três aspectos fundamentais que precisam ser examinados para oferecer uma experiência online de alta qualidade.


Afinal, um botão acessível torna a usabilidade e navegabilidade mais alinhadas com as necessidades das pessoas com deficiência. 


Com os botões certos, sua pessoa usuária pode ter mais facilidade para:


  • comprar soluções online;

  • fazer inscrições em newsletter;

  • realizar login em contas de sites.


Em todos esses contextos, pelo menos um botão é necessário. Esses três casos citados são apenas exemplos de como tornar a experiência digital mais simples.


Por que agregar acessibilidade digital em botões?


Qual é a definição e o papel de botões acessíveis no ambiente digital? O fato é que a acessibilidade em botões pode agregar muito para a experiência da pessoa usuária. Isso acontece porque os botões:


  • auxiliam usuários e facilitam a interação online;

  • entregam usabilidade e navegação mais prática;

  • oferecem maior simplicidade para a pessoa usuária.

Nessas circunstâncias, os designers precisam garantir que botões possam ser usados por todos os perfis de audiências.


Isso potencializa ainda mais a inclusão digital! Pessoas com deficiência que usam tecnologias assistivas podem ser amplamente beneficiadas com designers de botões acessíveis.


Qual é a diferença entre botões e links?


O primeiro aspecto que você deve examinar para agregar acessibilidade em botões é essa diferença.


Até porque essa distinção pode entregar muito mais acessibilidade para a pessoa usuária final. Em termos mais simples e básicos:


  1. Botões são elementos fundamentais para interação e em uma página. Executam alguma ação;

  2. Links são elementos interativos que levam o usuário para um outro lugar web. Servem para direcionar a experiência digital.


Por esse motivo, links e botões não têm o mesmo aspecto na maior parte dos casos. Cada um deles serve e comunica algo diferente para a audiência.

O maior desafio representado por essa abordagem de design é que algumas pessoas usuárias não percebem essas diferenças no visual.


Eles precisam contar com apoio específico para interagir com as funcionalidades, links e botões. 


Assim, equipes de desenvolvedores são instruídas a atribuir a função de <links> aos links no código. Da mesma forma, elas atribuem a função de <buttom> aos botões.


Só que a discussão não se encerra! 


Os designers têm um papel fundamental para agregar aspectos visuais que permitem diferenciação entre links e botões. Designers precisam comunicar a intenção dos projetos aos times de desenvolvedores. 


Dessa forma, projetar um site, por exemplo, vira uma tarefa mais simples. 


Os times de desenvolvimento podem posicionar links e botões nos lugares estratégicos. Eles podem definir botão como um <botão> e link como <link> no código com as instruções específicas dos designers. 


As etapas de construção de um site, neste mesmo exemplo, eliminam a necessidade de retrabalho e correção de erros.


A comunicação entre designers e desenvolvedores agrega muito valor. Caso contrário, uma confusão entre links e botões pode acontecer. Uma pessoa usuária de leitor de tela poderá interagir com um link com aspecto de botão.


A consequência é ser direcionado para uma nova página. Esse engano pode ser prejudicial para o uso das pessoas com deficiência.


A primeira dica é essa: o designer precisa comunicar o que é botão e o que é link para os desenvolvedores.  


O contraste da cor agrega acessibilidade no botão


Há duas práticas para agregar acessibilidade em botões quando o tema é contraste de cor:


  1. Verificar o contraste entre botão e texto: A relação de contraste entre fundo e texto deve ser 4,5:1 no mínimo;

  2. Verificar o contraste entre fundo e botão: A relação de contraste entre fundo e botão deve ser 3:1 no mínimo.


Essas boas práticas estão em conformidade com as WCAG, padrões de nível AA.

Pessoas com deficiência visual ou daltonismo podem encontrar dificuldades para lidar com ferramentas digitais sem o contraste certo.


Do mesmo modo, alguns usuários com deficiência cognitiva podem considerar difícil ler textos de baixo contraste.


Testar e validar o contraste do botão e plano de fundo é sempre uma boa estratégia para incorporar acessibilidade digital. Em alguns sites, o botão muda de cor quando a pessoa usuário passa o mouse sobre ele.


Mesmo nesse caso, o contraste deve atender um mínimo de 3:1.


Qual é o tamanho certo para o botão agregar acessibilidade?


A WCAG estabelece um tamanho mínimo de 24 X 24 pixels CSS para que o botão seja acessível. 


Esse mínimo de 24px satisfaz a meta de conformidade Nível AA. Já empresas como Apple e Google recomendam o tamanho de 44 x 44 pixels CSS (meta nível AAA).


Mesmo assim, designers podem criar botões menores que 24 pixels CSS se:


  • Não existem alvos dentro de 24 pixels CSS do botão em todas as direções;

  • A pessoa usuária pode executar a mesma ação em outro local da página;

  • O recurso acionável está embutido;

  • O tamanho do botão é definida pela ação do usuário;

  • O tamanho e a localização dos botões são considerados como “essenciais” pela WCAG.


Em resumo: o botão deve ter o tamanho mínimo de 24 X 24 pixels CSS. Idealmente, seus botões devem ter pelo menos 44 x 44.


O que o Perto Digital pode fazer pela sua acessibilidade?


O Perto Digital oferece soluções sob medida para seu negócio ser acessível e conquistar mais mercado. O Perto Plugin, por exemplo, ajusta o contraste do seu site, satisfazendo as exigências da WCAG.

Oferecemos muitos recursos para que seu sonho empresarial impacte o mercado.

Converse conosco e conheça nossos serviços.




Σχόλια


© 2022 Perto Digital. Todos os direitos reservados

bottom of page