Tornar conteúdo estático acessível pode ser relativamente simples, mas conteúdo dinâmico pode ser mais desafiador. É aqui que o WAI-ARIA entra em cena. Vamos ver o que é o WAI-ARIA, seu propósito, como funciona e alguns exemplos. WAI-ARIA significa Web Accessibility Initiative - Accessible Rich Internet Applications. É uma especificação que melhora a acessibilidade para conteúdo dinâmico e componentes de UI (User Interface). Observe que WCAG e WAI-ARIA não são a mesma coisa. WCAG fornece diretrizes gerais para acessibilidade na web, enquanto WAI-ARIA oferece regras específicas para tornar conteúdo dinâmico e interativo acessível para usuários de tecnologias assistivas. Então, o propósito principal do WAI-ARIA é melhorar a acessibilidade para conteúdo dinâmico e componentes de UI que não possuem equivalentes nativos em HTML. WAI-ARIA funciona ao introduzir um conjunto de atributos que você pode adicionar aos elementos HTML para fornecer informações semânticas adicionais. Esses atributos são categorizados em roles, states e properties. O papel ARIA define o propósito de um elemento dentro de um site ou aplicativo web. Aqui está um exemplo de como definir o role para button em um elemento div.

<div role="button">Click Me</div>

Ao fazer isso você está indicando para a tecnologia assistiva que o elemento é um botão. Funções não fornecem nenhuma funcionalidade, no entanto. Apenas dar a este div um role de button não fará com que ele funcione como um botão. Para que pareça e se comporte como um botão, você precisará usar CSS e JavaScript para obter o resultado desejado. Aqui está um exemplo de uso de HTML, CSS e JavaScript para criar um elemento button personalizado. NOTA: Não se preocupe em tentar entender o código CSS e JavaScript. Você aprenderá essas linguagens em módulos futuros.

<link href="styles.css" rel="stylesheet">
<div id="custom-btn" role="button">Click Me</div>
<script src="index.js"></script>

#custom-btn {
  display: inline-block;
  padding: 0.4em 1em;
  font-size: 1rem;
  font-family: sans-serif;
  color: buttontext;
  background-color: buttonface;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  text-align: center;
}

#custom-btn:focus {
  outline: 2px solid Highlight;
  outline-offset: 2px;
}

#custom-btn:active {
  background-color: #ddd;
}

const button = document.getElementById("custom-btn");

button.addEventListener("click", () => {
  alert("Button clicked!");
});

button.addEventListener("keydown", (e) => {
  if (e.key === "Enter" || e.key === " ") {
    e.preventDefault(); 
    button.click();
  }
});

É sempre melhor usar o elemento nativo button ou input com type="button" em vez disso. As propriedades ARIA fornecem detalhes adicionais sobre os elementos. Por exemplo, a propriedade aria-labelledby permite que você conecte um elemento a um rótulo específico:

<h2 id="header-id">About G.E.A.R ACADEMY</h2>
<button id="button-id" aria-labelledby="header-id button-id">Learn More</button>

Isso tornará os elementos compreensíveis e navegáveis para usuários de tecnologias assistivas. Para aproveitar ao máximo o WAI-ARIA, tente usar HTML nativo sempre que possível, pois ele geralmente oferece mais acessibilidade por padrão. Use WAI-ARIA somente quando o HTML não for suficiente e não se esqueça de testar com tecnologias assistivas como leitores de tela ou fazer com que pessoas com deficiências testem seu trabalho. Além disso, certifique-se de que seus estados e propriedades WAI-ARIA sejam atualizados com o conteúdo em tempo real. Avoid overusing ARIA, as it can often be confusing.