Make WordPress Core

Opened 3 months ago

Last modified 7 weeks ago

#60335 new defect (bug)

Twenty Twenty-Four: FAQ Pattern creates accessibility issues

Reported by: poena's profile poena Owned by:
Milestone: 6.6 Priority: normal
Severity: normal Version: 6.4
Component: Bundled Theme Keywords: has-patch needs-testing has-testing-info has-screenshots needs-refresh needs-design-feedback
Focuses: accessibility Cc:

Description (last modified by joedolson)

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.

Attachments (6)

60335.diff (9.1 KB) - added by abditsori 3 months ago.
FAQ-pattern-without-details-block-60335.png (300.0 KB) - added by poena 2 months ago.
FAQ pattern without the details block (PR 6067)
after patch apply Mint Style.png (339.7 KB) - added by huzaifaalmesbah 2 months ago.
FAQ-Remove-Accordion.jpg (370.8 KB) - added by krupajnanda 2 months ago.
Remove accordion from FAQ block
pricing-and-faq.png (1.2 MB) - added by poena 2 months ago.
The FAQ pattern with spacing preset 3 set on the margin on each separator block. The pricing pattern is added for comparison.
pricing-and-faq-mobile.png (896.6 KB) - added by poena 2 months ago.
Responsive / mobile view of the FAQ pattern with spacing preset 3 set on the separator blocks.

Change History (31)

#1 @alh0319
3 months ago

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

This ticket was mentioned in PR #5948 on WordPress/wordpress-develop by AbdiTolesa.


3 months ago
#2

  • Keywords has-patch added

@abditsori
3 months ago

#3 @poena
3 months ago

  • Milestone changed from Awaiting Review to 6.5

#4 @poena
3 months ago

  • Keywords 2nd-opinion needs-patch added; has-patch removed

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.

#5 @poena
3 months ago

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

#6 @poena
3 months ago

  • Keywords changes-requested added

This ticket was mentioned in PR #6067 on WordPress/wordpress-develop by @poena.


2 months ago
#7

  • Keywords has-patch added; needs-patch removed

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.

#8 @poena
2 months ago

  • Keywords needs-testing added; changes-requested removed

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.

Last edited 2 months ago by poena (previous) (diff)

#9 @richtabor
2 months ago

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

#10 @poena
2 months ago

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.

#11 @poena
2 months ago

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

#12 @joedolson
2 months ago

  • Description modified (diff)

#13 @joedolson
2 months ago

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
2 months ago

FAQ pattern without the details block (PR 6067)

#14 @krupajnanda
2 months ago

  • Keywords has-testing-info has-screenshots added

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
2 months ago

Remove accordion from FAQ block

#15 @poena
2 months ago

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"?

#16 @luminuu
2 months ago

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.

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


2 months ago

#18 @joedolson
2 months ago

  • Keywords needs-refresh added; 2nd-opinion removed

@poena
2 months ago

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

@poena
2 months ago

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

#19 @poena
2 months ago

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

#20 @shailu25
2 months ago

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:

Last edited 2 months ago by shailu25 (previous) (diff)

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


8 weeks ago

#22 @swissspidy
8 weeks ago

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

#23 @swissspidy
7 weeks ago

  • Milestone changed from 6.5 to 6.6

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


7 weeks ago

#25 @joedolson
7 weeks ago

  • Keywords needs-design-feedback added

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.

Note: See TracTickets for help on using tickets.