da onde veio esse?
role="tablist" aria-multiselectable="true"
a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"
??????????
fica dificil entender assim.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
da onde veio esse?
role="tablist" aria-multiselectable="true"
a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"
??????????
fica dificil entender assim.
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!
Legal. Bem explicado! Obrigado e desculpe a falta de conhecimento. rs