Estados e propriedades: expandido, marcado, desativado

Uma função diz o que um elemento é. Estados e propriedades dizem como ele se comporta atualmente: está aberto, marcado, ocupado ou indisponível?

Um estado muda conforme o usuário interage, como expanded ao alternar. Uma propriedade tende a permanecer, como a indicação de que um controle é obrigatório.

aria-expanded informa aos usuários se a região de um controle está aberta. Você deve alterná-lo em JavaScript sempre que o estado mudar.

aria-checked informa se uma caixa de seleção ou um interruptor personalizado está ativado. Uma caixa de seleção nativa já anuncia isso automaticamente.

Em controles reais de formulário, o atributo HTML disabled remove-os do foco e os anuncia automaticamente como indisponíveis.

aria-disabled anuncia um controle personalizado como desativado, mas não bloqueia cliques. Você ainda precisa impedir a ação no código.

aria-selected marca o item escolhido em uma tablist, listbox ou grade, para que os usuários saibam qual opção está ativa.

Um botão de alternância usa aria-pressed para informar se está ativado ou desativado, como um botão de negrito que permanece aceso enquanto o texto está em negrito.

O erro número um são os estados desatualizados. Se o visual mudar, mas aria-expanded continuar como false, os usuários de leitores de tela ouvirão a informação errada.

Alguns estados carregam números. Um controle deslizante expõe sua posição com aria-valuenow, além de aria-valuemin e aria-valuemax para indicar o intervalo.

Duas propriedades úteis de formulário: aria-required indica um campo obrigatório, e aria-invalid anuncia um campo que falhou na validação.

Você aprendeu que estados e propriedades descrevem a condição de um elemento. Prefira atributos nativos e mantenha sempre os estados ARIA sincronizados com a interface.