[wp-trac] [WordPress Trac] #60335: Twenty Twenty-Four: FAQ Pattern creates accessibility issues

[WordPress Trac]

#60335: Twenty Twenty-Four: FAQ Pattern creates accessibility issues
---------------------------+-----------------------------
 Reporter:  poena          |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Bundled Theme  |    Version:  6.4
 Severity:  normal         |   Keywords:
  Focuses:  accessibility  |
---------------------------+-----------------------------
 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.

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


 == Additional context
 Please reference the discussion on the
 [https://github.com/WordPress/gutenberg/issues/21584 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/60335>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform