Tem coisa que nao foi explicada nos videos | Bootstrap: criação de uma single-page responsiva

Opa Igor, tudo beleza?

Cara, legal essa sua dúvida. É o seguinte.

Esses atributos de tag são para pessoas cegas que usam leitores de tela para navegar pelos sites!

Repara só:

role="tablist"

Significa que aquela tag é uma tag para listar algo, uma lista de tabs ( do inglês isso seria itens, pacotinhos, algo do tipo, hehe )!

Como o cego não enxerga a tela, fica difícil ele perceber comportamentos assim. Perceba que para um cego o CSS tanto faz! O que importa pra ele é o HTML, sendo assim temos que colocar esses atributos a mais para ajudar!

Outro exemplo do atributo role é esse abaixo, que além de colaborar com o que eu falei pra vc acima também ajuda com relação a semântica. Veja esse exemplo:

<a href="#" role="button" aria-label="Delete item 1">Delete</a>

Uma tag <a> não necessariamente é um botão, pode ser só um link no meio de um texto. Todavia a gente costuma usar frequentemente tags <a> como botões. Para deixar isso BEM explícito semanticamente a gente pode colocar esse role="button".

Esses aria que vc tá perguntando são todos no mesmo esquema. WAI-ARIA é uma especificação para deixar webapps mais acessíveis ( para todos os tipos de usuários, vide acima ).

O bootstrap se preocupa bastante com todas essas coisas, por isso no código deles a gente encontra bastante desses atributos de tags!

Esse aria-expanded="true" serve para falar pro usuário que está usando um leitor de tela que essa tag que ele está vendo está expandida, como se fosse um combobox expandido. Lembra que o usuário cego não consegue ver a tela e por isso precisa saber se está expandido ou não, dai ele usa isso!

Espero ter ajudado! Qualquer coisa dá um toque.

Abraço!