My solution to FAQ accordion challenge

Community feedback

• 

  

  Chamu•13,820

  @ChamuMutezva

  Posted over 1 year ago

  Hi JHONFXA

  An FAQ like this one is an example of a Disclosure pattern. Here is an excellent explanation of the definition by one of our Mentors at Frontend Mentor , Grace:

  A "disclosure" means any user interface (UI) pattern that reveals
   additional content following some kind of user interaction.
   Common examples are tooltips, mobile menu toggles and accordions.
  

  Here is a link for more information Disclosure - ui. Some of the highlights are as follows

  • open disclosures with a button click (not hover or mouseover)
  • use aria-expanded to communicate state to assistive tech
  • use aria-controls to programmatically link buttons with the content they're controlling for the JAWS screen reader

  The disclosure has to be interactive, hence you need to use interactive elements such as a button. An img element is not an interactive element and should never have a click event. Alt value should be meaningful if the image is not decorative, a decorative image should have an empty alt value. A message such as expand answer is not beneficial to assistive technology users.

  Test your site with a keyboard only , you will find out that the content is not focusable.

  14

  Marked as helpful
• 

  R A H U L•360

  @owlbunt

  Posted over 1 year ago

  there is an bug make sure only 1 faq open at a time in your case i can open all question at same time try to improve this.

  17
• 

  JhonFXA•120

  @JhonFXA

  Posted over 1 year ago

  The font is appearing normally now... 🤨

  00