Solucionado
Boa tarde, td bem?
no item 4 sugere que eu troque a tag <button> pela tag <a> para poder estilizar o botão.
minha duvida é a seguinte: ao substituir a tag button pela tag a, eu não gero uma perda de acessibilidade para os dispositivos leitores de tela?
Se sim, existe alguma outra forma de estilizar esses botões sem perder a acessibilidade?
obrigado. =)
hoje, com a Alura e o Google Gemini
Oi Rennan,
Tanto <button> quanto <a> tem capacidade de serem totalmente estilizados. Alias, trocar um pelo outro por razões estilísticas é uma péssima razão.
Com relacao a acessibilidade, ambos sao igualmente acessiveis.
A escolha deve ser com base na semantica. <a> é para navegação entre telas / estados diferentes da aplicação. <button> pra executar ações tanto na mesma pagina (com JS) ou em acoes no servidor (submissao de formularios).
Oi Sergio, obrigado pela resposta.
então pode-se dizer que quando o exercício, no projeto do alura Typer, sugere que mudemos a tag <button> de reiniciar o jogo para a tag <a>para que possamos apenas mudar o botão para um ícone mais "agradavel", seria uma falha na semântica e portanto uma prática ruim, já que no projeto, o botão de reiniciar o jogo não é para navegação de telas / estados, mas sim para executar uma ação no jogo?
estaria certo afirmar isso?
Sim, com certeza!
Vou passar esse feedback pro instrutor do curso, inclusive.
Obrigado por apontar o problema!
Agora entendi!
Eu não achei que houvesse um problema, achei que fosse alguma exceção do caso e que por isso eu não estava entendendo.
mas agora ficou claro, muito obrigado pela resposta Sergio.
No curso continua ainda o exemplo com a tag <a> para adicionar o botão de reiniciar o jogo. Lembrando que a tag <a> é usada porque foi incorporado ao projeto o framework materialize. Segue esse mesmo padrão para outros frameworks como o bootstrap.
Ainda é errado colocar a tag <a>, como no exemplo a seguir, mesmo sendo o padrão do framework usado ou existe outro modo de implementar o elemento?
<a class="btn-floating btn-large waves-effect waves-light red">
<i class="material-icons">restore</i>
</a>
Oi André,
O exemplo ainda é com o A pois regravar o curso quase que inteiro por conta disso ficaria um pouco inviável, sendo que o foco do curso é aprender o jQuery.
Normalmente os frameworks não exigem que usemos um elemento específico, a semântica é por nossa conta. Na documentação do Bootstrap tem até como exemplo de estilização do BUTTON com três elementos diferentes.
Concordo com o que o Sérgio disse: é navegação usa o A, é ação usa BUTTON.
Abcs e bons estudos!
Outro problema ao trocar de "button" para "a" é que a funcionalidade de deixar este desabilitado enquanto o cronômetro está rodando deixa de funcionar.