FAQ Accordion created with Angular 18, Sass, Seo and accesibility

Community feedback

• 

  P

  Ray•70

  @raygdevPosted 11 days ago

  Nice job on your work! I like your choice of the details and summary elements for the accordion.

  Some suggestions around semantics:

  1. The article element should go inside the main element.

  2. The header should be a sibling to main

  3. It would improve semantics if you wrapped each of the details elements in li elements with a parent ul.

  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

  1. Use the up arrow key to navigate the list

  2. Use the down arrow key to navigate the list

  3. Use the home key to focus the first detail in the list

  4. Use the end key to focus the last detail in the list.

  Other than those small improvements, this is great overall!

  Marked as helpful

  1

  ---

  

  Gabriel Barimboim•150

  @Gbw699Posted 8 days ago

  @raygdev Thank you very much for your feedback. I will try to implement it in the following projects.

  0