O atributo aria-expanded não deveria estar na div.collapse.navbar-collapse?

Opa! Carlos, tudo certo? =)

Nesse caso, está certinho colocar a aria-expanded no botão, mesmo... Como estamos falando de uma ferramenta, um framework, sempre que você tiver alguma dúvida, nem precisa pensar duas vezes em consultar a própria documentação. Se você der uma olhadinha lá, na parte que fala sobre navbar, você verá um exemplo de como deve ser utilizado... =)

Espero ter ajudado! Abraço e bons estudos,

Fábio

Então, eu sei que lá o aria-expanded tá no botão.

Mas, fugindo do framework e indo pro lado da acessibilidade e semântica, parece errado, não? Porque não é o botão que vai ser expandido ou não. Vai ser a div que foi citada no código.

Carlos,

Hmm... Entendo sua dúvida. Acredito que haja duas formas de se pensar aqui. A primeira, como eu acredito que você esteja pensando, é pensar que o atributo aria-expanded indica se o elemento no qual ele está presente está ou não expandido. Certo?

A segunda forma, é pensar que ele está apenas indicando que algum elemento está expandido e, a união com o atributo data-target, nos indica qual é o elemento referenciado, sacou? =)

Fábio

Mas os atributos data-* não são interpretados por leitores de tela, por exemplo. São apenas para armazenar dados que serão lidos no javascript em algum momento.

Já o atributo aria-expanded é justamente voltado para acessibilidade. Ou seja, os dois não são relacionados.

Carlos,

Hm... Faz sentido. Eu nunca fui muito fã de Bootstrap, justamente pelo fato de ele não me parecer um framework muito semântico... Acho que a única resposta que posso lhe dar aqui, é que é como ele funciona. =|

Fábio