Aprimorando acessibilidade em botões no HTML
Tags: a11y, braziliandevs, webdev, html
Published: 2024-02-27 14:31:07

A acessibilidade na web se refere à prática de tornar sites e aplicativos acessíveis para todas as pessoas. Isso ajuda a garantir inclusão digital, para que todas as pessoas possam perceber, entender, navegar e interagir com o conteúdo da web de forma eficaz.

## ARIA (Accessible Rich Internet Applications)
A [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) é uma especificação do [W3C](https://www.w3.org/) que fornece atributos adicionais para tornar o conteúdo da web mais acessível para pessoas com deficiência, permitindo uma melhor comunicação com dispositivos assistivos (como leitores de tela/talkback).
No HTML, podemos usar propriedades ARIA-* dos elementos (tags) para melhorar a acessibilidade do elemento.

## WCAG (Web Content Accessibility Guidelines) e sua relação com WAI-ARIA
As diretrizes da [WCAG](https://www.w3.org/TR/WCAG21/) são um conjunto de diretrizes desenvolvida pela W3C para garantir que o conteúdo da web seja acessível para todos, incluindo pessoas com deficiência.

As Diretrizes de Acessibilidade para Conteúdo da Web (WCAG) oferecem uma estrutura técnica e diretrizes claras para tornar o conteúdo online mais acessível em termos de percepção, operação e compreensão. Essas diretrizes são essenciais para garantir que todos os usuários, incluindo aqueles com deficiências, possam interagir de forma eficaz com o conteúdo da web.

A WAI-ARIA complementa as diretrizes da WCAG, fornecendo atributos adicionais que melhoram a acessibilidade para usuários de tecnologias assistivas. Ao integrar adequadamente a WAI-ARIA com as diretrizes da WCAG, os desenvolvedores têm a capacidade de criar interfaces web mais dinâmicas e interativas, mantendo a acessibilidade para todos os usuários.

"As diretrizes da WCAG podem exigir que todos os elementos interativos, como botões, sejam acessíveis através do teclado. Nesse caso, o uso apropriado de atributos da WAI-ARIA, como role="button", aria-label, aria-disabled (caso o botão seja desativado), é fundamental para atender a essa exigência e garantir que os usuários possam navegar e interagir de forma eficiente."

Além disso, a WCAG estabelece critérios de sucesso que podem ser alcançados através da implementação adequada de técnicas de acessibilidade, incluindo o uso de WAI-ARIA. Ao seguir as diretrizes da WCAG e incorporar as práticas recomendadas da WAI-ARIA, os desenvolvedores têm a capacidade de criar experiências web acessíveis e inclusivas para todos os usuários, independentemente de suas habilidades ou limitações.

## Exemplos

Vamos seguir um passo a passo, melhorando a acessibilidade de um botão de enviar formulário.
ps: apenas usei [NVDA](https://www.nvaccess.org/) como leitor de tela, então o que for escrito nesse artigo, foi com base no que vivenciei com a ferramenta.

```HTML
<button type="submit">Enviar formulário</button>
```

Por padrão, o elemento "button" é um elemento focável (possui o comportamento do `tabindex="0"`)
**[tabindex](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Global_attributes/tabindex)**

Quando uma pessoa usuária de tecnologias assistivas (vou usar o NVDA como exemplo) faz a navegação via tab até chegar nesse elemento "button", a tecnologia não vai conseguir ler o que está escrito dentro do botão. Sem o uso do atributo aria-label, provavelmente o leitor de tela vai ler o botão como: "Botão clicável".

```HTML
<button type="submit" aria-label="Enviar formulário">Enviar formulário</button>
```

A partir desse momento, quando o foco da navegação via teclado chegar no "button", a tecnologia assistiva vai ler o botão como "Botão clicável Enviar Formulário".

### aria-label
- Aumenta a compreensão para usuários de tecnologias assistivas: Para usuários que dependem de leitores de tela, o atributo aria-label fornece uma descrição auditiva clara e concisa da função do elemento. Isso ajuda as pessoas usuárias a entenderem o propósito do elemento, mesmo quando o texto visível não é suficientemente descritivo.

- Melhora a usabilidade para pessoas com deficiência visual: Ao fornecer uma descrição textual adicional através do aria-label, as pessoas cegas ou com baixa visão podem identificar e entender os elementos interativos com mais facilidade, facilitando a navegação e interação na web.

- Garante consistência na experiência do usuário: O uso consistente de aria-label em elementos sem texto visível, como ícones ou botões com apenas ícones, ajuda a manter a consistência na experiência da pessoa usuária, independentemente de suas habilidades ou tecnologias assistivas utilizadas.

- Ajuda a atender aos critérios de sucesso do WCAG: O WCAG define critérios de sucesso para garantir a acessibilidade na web. O uso apropriado de aria-label pode ajudar os desenvolvedores a atender a esses critérios, especialmente aqueles relacionados à percepção e compreensão do conteúdo.

Em resumo, ao usar aria-label, os desenvolvedores podem melhorar significativamente a acessibilidade dos elementos na web, garantindo que todos as pessoas usuárias, independentemente de suas capacidades, possam entender e interagir com o conteúdo de forma eficaz.


## Conclusão
A acessibilidade na web é fundamental para garantir que todas as pessoas usuárias, independentemente de suas capacidades ou deficiências, possam perceber, entender, navegar e interagir efetivamente com o conteúdo online. A implementação de padrões como WAI-ARIA e WCAG desempenha um papel crucial nesse processo, oferecendo diretrizes e recursos que capacitam os desenvolvedores a criar experiências web mais inclusivas. Ao integrar adequadamente atributos como aria-label, as pessoas desenvolvedoras podem melhorar significativamente a acessibilidade dos elementos na web, contribuindo para uma experiência online mais acessível.