Incorrect semantic HTML on FAQ block

  • Resolved anphira

    (@anphira)


    8 months, 2 weeks ago

    On the HTML that the FAQ block creates, the button and heading are incorrectly nested. This is the code that SEOPress outputs for the block heading:

    <div id="wpseopress-faq-title-3723102207" class="wpseopress-wrap-faq-question">
    <button class="wpseopress-accordion-button" type="button" aria-expanded="false" aria-controls="wpseopress-faq-answer-3723102207">
    <h3 class="wpseopress-faq-question">Can you white label services?</h3>                                                </button>
    </div>

    The button block can not semantically hold a heading inside of it. Only phrasing content is allowed inside of a button.

    The correct order is to have a heading hold a button.

    Please see the example of proper accessible markup at https://designsystem.digital.gov/components/accordion/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Benjamin Denis

    (@rainbowgeek)

    Hi,

    thank you for your feedback.

    We have opened an issue to fix this.

    We are also working on a new FAQ block to take advantage of the new details tag.

    Thread Starter anphira

    (@anphira)

    @rainbowgeek please give consideration to some of the drawbacks of the details tag. Specifically, that it isn’t designed to have heading elements inside it. Only text. Which means that the questions of the FAQ can’t use heading tags and be in the heading list for the page.

    That’s the primary reason I was looking for an actual accordion (also schema markup) instead of using the built in details block from WP core.

    Plugin Author Benjamin Denis

    (@rainbowgeek)

    Sure! We’ll double check this too.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Incorrect semantic HTML on FAQ block’ is closed to new replies.