Responsive FAQ Accordion Page

Community feedback

• 

  Bruce B•505

  @bbsmoothdevPosted 11 months ago

  I think you've over-engineered the keyboard handling. You've hijacked the up and down arrows so I can't scroll the page, and I can't even use the Tab key to get to the links at the bottom of the page. This is called a keyboard trap. Also, most keyboard users are going to assume that they can use the Tab key to navigate through each FAQ item, so you've broken the expected behavior here.

  My recommendation would be to use an HTML button element for each of the FAQ titles. Then you only need to add a click handler to them and you can forget about all the mouseover and keydown handlers you've added. This will allow keyboard users to Tab through each FAQ title and use either the Space bar or Enter key to expand them. There are some aria attributes you'll need to add to those buttons as well and toggle their values using JS. For an example of how to do this, see Tutorial: Let's Build an Accessible Disclosure.

  Marked as helpful

  1

  ---

  

  vcgmuse•70

  @vcgmusePosted 11 months ago

  @bbsmoothdev Your suggestions really helped. I'm reading more about the article you sent me and It's good stuff. Thanks for making my code better.

  1