Acessibilidade de botões e links — Você realmente sabe a diferença entre eles?
Quando usamos HTML puro, a aparência dos botões é um retângulo com texto dentro, e a aparência dos links é um texto com sublinhado. Porém, o que define um botão ou um link, não é a aparência, mas sim o comportamento.
Ao longo das últimas décadas, ocorreram muitas mudanças na forma de construir um design. Hoje é impossível diferenciar botões e links apenas pela apresentação visual!
Nesse artigo vamos abordar a diferença entre botões e links, e mais alguns aspectos relevantes para a acessibilidade desses elementos.
As aparências enganam
É muito comum confundir links e botões por causa da aparência, atualmente usamos a aparência do botão para elementos que queremos dar mais destaque e a aparência do link para outras funções secundárias que não queremos que chame muita atenção.
Sempre lembre que a semântica de um elemento é definida pelo seu comportamento (UX) e não pelo visual (UI). Para conseguir identificar a diferença entre os botões e links, aprenda o comportamento deles:
Os botões executam uma ação e permanecem na mesma página, enquanto os links são responsáveis pela navegação entre páginas.
Antes de entregar o protótipo de uma funcionalidade, você pode fazer o Handoff de Acessibilidade e informar o que é link e o que é botão.
Depoimento
Entenda a importância de definir corretamente os botões e links, leia esse depoimento de uma pessoa uma cega:
Sempre entro e tem a confusão, eu não sei se é um link, se é botão, se vai me deixar na página, se vai abrir outra janela. Socorro! — Janaína Bernardino
Dicas para desenvolvimento
Sempre que possível use as tags HTML5 sem alterar a semântica.
Infelizmente, com o desafio de desenvolver páginas SPA — Single Page Application, é inviável manter a semântica original HTML. Como por exemplo no react-router do ReactJS, que a navegação é feita pelo JavaScript.
Nesse caso, é necessário utilizar o atributo role para alterar a semântica do botão, garantindo a navegação pelo teclado e a leitura correta da função do elemento, conforme imagem a seguir:
Atribuir função em aplicativos mobile
Os componentes nativos do mobile não possuem nenhuma semântica. Sempre é necessário configurar a função do elemento, você pode colocar uma função padrão no Design System e quando necessário alterar via parâmetro.
Verifique na documentação da linguagem ou framework, como colocar o atributo role ou accessibilityRole. A seguir, alguns exemplos de como definir a função “botão” para Swift, Kotlin, React Native e Flutter:
Tem um artigo bem legal sobre acessibilidade para Android nativo, com vários códigos em Kotlin:
Modal
Uma dúvida comum é sobre o botão de fechar do modal “é link ou é botão?”. Nesse caso, é botão! Porque ele vai finalizar uma sessão dentro da página.
Propósito do botão ou link
Existem 2 modos de navegar pelo leitor de telas que permite uma leitura dinâmica da página e localizar assuntos relevantes mais rápido. Uma delas é a navegação por títulos, que vamos falar em um dos próximos artigos e a outra é a navegação pelos elementos interativos, como botões, links e caixas de texto.
Um erro bem comum é colocar o nome do link “saiba mais”, “veja mais”, “clique aqui” e termos genéricos que não identificam claramente o propósito do link. Vamos analisar o exemplo a seguir:
Nesse exemplo da imagem, ao navegar pelo leitor de telas pelo modo de navegação por elementos interativos, usando a tecla tab, ou o atalho K pelo NVDA, a pessoa cega vai escutar “Veja mais, link. Veja mais, link. Veja mais, link”. E surge a pergunta, veja mais o que?
Nesse caso, você pode alterar o próprio nome do link para “Saiba mais sobre a mentoria de desenvolvimento” ou colocar o texto complementar apenas para o leitor de telas, conforme imagem a seguir:
Também é possível usar algumas técnicas para trocar o texto que será lido apenas pelo leitor de telas ou adicionar informações complementares, como aria-label ou aria-describedby. Explicamos algumas dessas técnicas no artigo:
Redimensionar texto e refluxo
Faça protótipos e testes simulando fontes maiores, como por exemplo 200% e 400%, principalmente no Mobile, para evitar problemas no layout.
Por exemplo, se o tamanho da fonte é 16 pixels, simule com 32 pixels e 64 pixels e faça as adaptações necessárias.
Outros aspectos importantes
A cor do texto e o fundo devem possuir o contraste mínimo de 4.5:1.
A altura e a largura devem possuir o tamanho mínimo de 48dp, para proporcionar uma boa área de toque.
Os botões e links precisam estar funcionando na navegação pelo teclado, com o foco ativo e visível.
Para quem prefere assistir vídeos, confira o resumão desse artigo no YouTube:
Agradecimento especial à Janaína Bernardino por revisar esse artigo.
Obrigada por ler. Espero que esse conteúdo seja útil para você e seu time☺
