Faq accordion page using HTML, CSS and JavaScript

Community feedback

• 

  Adalbert Pungu•170

  @AdalbertPunguPosted 9 days ago

  Semantic HTML

  • Consider using <section> tags for each FAQ block instead of <div> to more clearly indicate the distinct sections of the page.
  • Wrap each question in a <h2> or <h3> tag instead of <p class="question">, which improves semantic structure and helps screen readers identify key content sections.
  • Using <button> for the toggle is good, but each button should ideally include aria-expanded="false" and aria-controls="answer-id" to improve accessibility.

  Accessibility

  • Each FAQ toggle button lacks an accessible label. You could add aria-label attributes to the buttons, or use aria-expanded to communicate the open/close state to screen readers.
  • Consider using more descriptive alt text for the background and icon images. Instead of “background pattern” or “star,” give more context for what these images represent or how they fit into the design.

  Code Structure, Readability, and Reusability

  • It could benefit from using CSS variables for colors, as this would improve maintainability and make it easy to adapt the theme if needed.
  • You could simplify the JavaScript by creating a reusable toggle function rather than repeating innerHTML code for each toggle.

  Marked as helpful

  0