Você aprendeu anteriormente como a marcação semântica e os atributos ARIA tornam o conteúdo acessível. Em aplicativos do mundo real, o conteúdo raramente é estático e as páginas frequentemente são atualizadas dinamicamente através de JavaScript. Quando isso acontecer, é importante garantir que essas mudanças também sejam refletidas no HTML. Isso permite que leitores de tela transmitam com precisão o estado atualizado aos usuários. Sem isso, pessoas que dependem de ferramentas assistivas podem nunca saber que algo mudou ou podem receber informações desatualizadas ou enganosas. Vamos analisar um cenário comum onde o JavaScript altera o estado de um elemento e como você pode manter seu HTML acessível atualizando os atributos ARIA. Suponha que você tenha um botão que abre e fecha um menu dropdown:

<button id="menuButton" aria-expanded="false" aria-controls="menuList">
  Menu
</button>

<ul id="menuList" hidden>
  <li>List item 1</li>
  <li>List item 2</li>
</ul>
<script src="index.js"></script>

const button = document.getElementById("menuButton");
const menu = document.getElementById("menuList");

button.addEventListener("click", () => {
  const expanded = button.getAttribute("aria-expanded") === "true";
  button.setAttribute("aria-expanded", String(!expanded));
  menu.hidden = expanded;
});

O HTML configura um botão que controla um menu dropdown. O botão usa aria-expanded para indicar se o menu está aberto e aria-controls para vinculá-lo ao menu referenciando o id do menu. O JavaScript escuta cliques no botão do menu. Quando clicado, ele alterna o valor de aria-expanded e atualiza a propriedade hidden no menu. Isso mantém a visibilidade do menu e as informações de acessibilidade sincronizadas, para que tanto usuários com visão quanto usuários de leitor de tela saibam se o menu está aberto ou fechado. Você aprenderá mais sobre esses atributos ARIA nas próximas lições. Por enquanto, apenas lembre-se de que quando seu JavaScript altera o estado de um elemento, você também deve atualizar os atributos ARIA relevantes para que as tecnologias assistivas reflitam com precisão o que está realmente na tela.