Directory

FAQ Pattern incorrectly uses the details block as an accordion which creates accessibility issues. · Issue #743 · WordPress/twentytwentyfour · GitHub
Skip to content
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

Closed
amberhinds opened this issue Jan 12, 2024 · 2 comments
Labels
[Type] Bug Something isn't working

Comments

@amberhinds
Copy link

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
Screenshot 2024-01-11 at 11 06 48 PM

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.

@amberhinds amberhinds added the [Type] Bug Something isn't working label Jan 12, 2024
@alexstine
Copy link

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.

@carolinan
Copy link
Contributor

I have moved this to https://core.trac.wordpress.org/ticket/60335

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
[Type] Bug Something isn't working
Projects
Status: ✅ Done
Development

No branches or pull requests

3 participants