Twenty Twenty-Four: FAQ Pattern creates accessibility issues

[poena]

This was reported by @alh0319 in ​https://github.com/WordPress/twentytwentyfour/issues/743

I have copied and pasted the text from the issue, as well as the comment.

---

The FAQ Pattern packaged in the theme uses multiple Details blocks in a row. While it's not labeled or promoted as an accordion, this functionally behaves like an accordion, and most users, especially non-tech-savvy ones, will see this pattern as an accordion and use it as such throughout their site. They are likely to create long lists of FAQs in this manner when given the pattern as an example.

Core themes should set website owners up for success and provide a good example of how to build websites that are accessible. This pattern does neither. Accessible accordions have headings, which are vital for navigation with a screen reader. Lists of FAQs, which frequently include important information about products, services, and companies, need headings so that screen reader users can access that information easily.

The details block is not a substitute for an accordion block and users should not be encouraged to use it as one.

This pattern should be removed from Twenty Twenty-Four. Either the pattern should be removed completely, or the questions and answers that are built with the details block should be rebuilt with the questions as H3s and the answers as visible paragraphs. If an accordion block can be built quickly, it could be replaced with that, but given testing time needed, it would be better to remove this pattern from the theme ASAP to reduce the number of websites and that using it and will need to be fixed later.

Step-by-step reproduction instructions

Insert FAQ pattern into a page and inspect it.

Expected behavior

Accordions should be built accessibly. Here's a good [example of how the accordion block should be coded for accessibility ​https://designsystem.digital.gov/components/accordion/].

We shouldn't create patterns that add accessibility problems to user's websites.

Additional context

Please reference the discussion on the ​New block: Accordion block issue in the Gutenberg repo for more information on why the Details block should not be used as an accordion.

@joedolson said in that discussion that he didn't think it was an issue, so he may want to way in here, but I disagree.

---

Comment by @alexstine

Not trying to tell anyone told you so but I felt like this could be one of those blocks that would be misused. Upvote to doing something about it.

[alh0319]

Thanks @poena. Would love to see this pattern removed.

Trac ticket: https://core.trac.wordpress.org/ticket/60335

[poena]

I don't think the pattern can be removed safely without breaking child themes? Child themes can have template files that reference the pattern.
Can we replace it instead? Use the same content as headings and paragraphs without the details block.

[poena]

It would be good to add a new pattern that showcases the details block but correctly, let's think of some new ideas.

Trac ticket:
https://core.trac.wordpress.org/ticket/60335

This replaces the details block in the FAQ block pattern with headings ( level 3) and paragraphs.

[poena]

I imagine that this alternative FAQ design needs some tweaking of the spacing and maybe the font sizes.
Pinging @beafialho @richtabor @luminuu @onemaggie for their review.

[richtabor]

Why do we have a details block, if it shouldn't be used?

[poena]

For the same reason that we have heading level 6 even though it shouldn't be used immediately after heading level 2.

It should be used, but in an accessible way.

[poena]

The original details block did have a heading that screen reader users could use to navigate, but it was requested to be removed.

[joedolson]

The context in which I was commenting was that this usage is not presenting as an accordion block, so it's not misrepresenting the block. That doesn't mean that the usage is good or acceptable.

@richtabor The details block is best for use in isolation; it's not intended to be used in groups. While we can't prevent users from doing this, we can at least avoid promoting patterns that misuse the block.

This is something that could change; the only major problem is that the summary/details semantics override heading semantics in assistive technology. If that problem is fixed by AT vendors and browser vendors, then it stops being an issue.

[poena]

FAQ pattern without the details block (PR 6067)

[krupajnanda]

Test Report

Description : FAQ pattern without the details block

This report validates that added fix is working as expected.

PR Tested: ​https://github.com/WordPress/wordpress-develop/pull/6067 with local env

Environment

• WordPress: 6.5-beta1-57630-src
• PHP: 8.2.15
• Server: nginx/1.25.3
• Database: mysqli (Server: 8.0.36 / Client: mysqlnd 8.2.15)
• Browser: Chrome 121.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Four 1.0
• MU Plugins: None activated

Actual Results

1. ✅ Issue resolved with given PR.

This PR is verified in all 3 major browsers.

• Chrome Version 121.0.6167.160 (Official Build) (arm64)
• Firefox Version121.0 (64-bit)
• Safari Version 16.6 (18615.3.12.11.2)

Supplemental Artifacts

Added as Attachment.

[krupajnanda]

Remove accordion from FAQ block

[poena]

If we can agree that the pattern can not be kept as is and can not be deleted,
this still needs a replacement pattern and a decision from someone with a good design eye.
@beafialho @richtabor @luminuu @onemaggie

If the current PR is not ideal, perhaps place "I'd like to meet" in a details block under "Who is behind"?

[luminuu]

I'm fine with removing the details block if it causes A11Y issues. Perhaps some more spacing between the separator lines and the headings could work here, so it wouldn't look too squished.

[poena]

The FAQ pattern with spacing preset 3 set on the margin on each separator block. The pricing pattern is added for comparison.

[poena]

Responsive / mobile view of the FAQ pattern with spacing preset 3 set on the separator blocks.

[poena]

If I add margin spacing preset 3 on the separators, it looks better on desktop but it still looks tight on mobile.

[shailu25]

Test Report

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/6067

Environment:

WordPress - 6.5-beta2-57705
OS - Windows
Browser - Chrome
Theme: Twenty Twenty-Four
PHP - 8.1.23
Active Plugin - None

Actual Results:

• Removed details blocks from FAQ pattern. (After Patch)
• With Margin spacing preset 3, it Looks good in desktop view, but in mobile still need to add more spacing between separator and headings.

Screenshots:

After Patch:

• ​https://prnt.sc/Mc3ZeERVzYpH (Desktop)
• ​https://prnt.sc/RoDlpm-sRT5c (Mobile)

[swissspidy]

Just chiming in here because 6.5 RC1 is approaching soon, so if this is to make the release it should be committed before that, otherwise we should punt this to 6.6

[joedolson]

In my opinion, the spacing using the proposed preset 3 on margins looks fine on both mobile and desktop. I'd be happy to get this going.

[karmatosed]

Assigning to myself to go through and review this in preparation for commit. I will be doing a visual design check and if agree then based on previous sign-off from accessibility through @joedolson will be committing.

[karmatosed]

I am going to approve this based on what seeing across browsers. Thank you everyone - moving this to commit.

[karmatosed]

In 58106:

Twenty Twenty-Four: Resolve accessibility issues in FAQ pattern.

The FAQ pattern uses multiple details blocks in a row. This ends up with it behaving as an accordion and opens to issues. In ticket discussion this was decided to be removed to set a good example of how to build.

Props poena, alh0319, abditsori, richtabor, joedolson, huzaifaalmesbah, krupajnanda, luminuu, shailu25, swisspidy.
Fixes #60335.

https://core.trac.wordpress.org/changeset/58106

https://core.trac.wordpress.org/changeset/58106