
FAQ Accordion created with Angular 18, Sass, Seo and accesibility
Design comparison
Community feedback
- P@raygdevPosted 9 days ago
Nice job on your work! I like your choice of the
details
andsummary
elements for the accordion.Some suggestions around semantics:
-
The
article
element should go inside the main element. -
The
header
should be a sibling tomain
-
It would improve semantics if you wrapped each of the
details
elements inli
elements with a parentul
.
Bonus accessibility:
You have semantic elements so using the tab keys and enter/space work out of the box. That is the bare minimum for accessibility. It would improve accessibility if you provided more keyboard controls by allowing the user to
-
Use the up arrow key to navigate the list
-
Use the down arrow key to navigate the list
-
Use the home key to focus the first detail in the list
-
Use the end key to focus the last detail in the list.
Other than those small improvements, this is great overall!
Marked as helpful1@Gbw699Posted 6 days ago@raygdev Thank you very much for your feedback. I will try to implement it in the following projects.
0 -
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