This repository has been archived by the owner on Jan 24, 2024. It is now read-only.
FAQ Pattern incorrectly uses the details block as an accordion which creates accessibility issues. #743
Labels
[Type] Bug
Something isn't working
Description
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.
We shouldn't create patterns that add accessibility problems to user's websites.
Screenshots
Environment info
N/A
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.
The text was updated successfully, but these errors were encountered: