Design comparison
SolutionDesign
Solution retrospective
Hello 😄
This is my solution to the FAQ accordion challenge. Feedbacks are welcome
Community feedback
- @pRicard0Posted 10 months ago
O projeto ficou legal, bem animado e tudo, parabéns! Mas há algumas coisas que parece que você perdeu o costume de uns tempos para cá... tanto os atributos ARIA quanto as tags semânticas, não sei se tem um motivo específico para isso mas vou aqui dizer o que dá para acrescentar e que talvez você não saiba ainda
Dicas HTML
- Ao invés de utilizar div para conter os títulos clicáveis para exibir os detalhes, seria recomendado utilizar a tag
<summary>
para o título junto com a tag<details>
para os detalhes relacionados ao título. Você pode ler mais clicando aqui https://www.w3schools.com/tags/tag_summary.asp - É altamente recomendado a utilização do atributo
aria-hidden
para ocultar os textos que não estão sendo exibidos e atualizar o valor utilizando javascript ( já falei desse atributo alguns meses atrás ). Há outros atributos que daria para utilizar como oaria-selected
que indica se tal conteúdo foi selecionado ou não mas foca no aria-hidden para não se confundir muito. As vezes é melhor não ter ARIA do que usar ARIA errado. Se quiser ler mais sobre o aria-selected, clique aqui https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected
0 - Ao invés de utilizar div para conter os títulos clicáveis para exibir os detalhes, seria recomendado utilizar a tag
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord