[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:  6.5
Component:  Bundled Theme                        |     Version:  6.4
 Severity:  normal                               |  Resolution:
 Keywords:  2nd-opinion has-patch needs-testing  |     Focuses:
                                                 |  accessibility
-------------------------------------------------+-------------------------
Description changed by joedolson:

Old description:

> 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.

New description:

 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
 [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#comment:12>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform