WordPress.org

Making WordPress.org

Opened 6 months ago

Closed 5 months ago

#4519 closed enhancement (fixed)

Make the FAQ at plugin directory accessible

Reported by: Travel_girl Owned by: tellyworth
Milestone: Priority: normal
Component: Plugin Directory Keywords: has-patch
Cc:

Description

Currently the FAQ-Section in the plugin directory are not accessible for various reasons.

Problems

  1. Questions don't have a semantic structure. They are just links at the moment
  2. with a click on the link, nothing happens for screen reader users
  3. aria-expandet is on the wrong element and don't announce anything to a screen reader user

Suggested solutions:

  1. questions should be semantic headlines (H3 as FAQ is H2)
  2. those headlines should include a button-element to expand the section. Because it causes an action, it should be a Button, not a link
  3. this button should have an aria-expanded true/false, so it gets announced to an screen reader users

Please also have a look on the buttons

Further ressources about accessible accordions:

https://www.w3.org/TR/wai-aria-practices-1.1/#accordion
https://inclusive-components.design/collapsible-sections/

Attachments (1)

4519.diff (1.7 KB) - added by tellyworth 5 months ago.

Download all attachments as: .zip

Change History (7)

#1 @tellyworth
6 months ago

Big thanks for the specific solutions @Travel_girl !

Regarding (1), the current implementation uses definition lists as its semantic markup. Would you suggest removing the dl/dd/dt markup entirely and replacing it with h3/p tags? If so, is there something we should do to indicate the relationship between the h3 question and the p answer, or does the sequence imply enough semantic context?

#2 @tferry
6 months ago

@tellyworth I believe we'd need to include matching id and aria-labelledby attributes (respectively) in the case of changing to <h3> and <p> to maintain this semantic context.

However, as far as I know the dl/dt/dd structure should be okay? The w3 spec gives a question & answer structure as a use-case example for the dt element: https://www.w3.org/TR/html5/grouping-content.html#the-dt-element

I'd suggest we simply add a wrapping <h3> inside the "question" <dt> element.

Last edited 6 months ago by tferry (previous) (diff)

#3 @obenland
6 months ago

@tellyworth I happened to talk to @Travel_girl in a WCEU hallway and she said we should keep the dl

@tellyworth
5 months ago

#4 follow-up: @tellyworth
5 months ago

  • Keywords has-patch added; needs-patch removed
  • Owner set to tellyworth
  • Status changed from new to assigned

attachment:4519.diff implements more or less what inclusive-components suggests. For example:

<dt id="#%0Ahow%20do%20i%20manage%20my%20products%3F%0A" class="" aria-expanded="false">
  <h3>
    <button formaction="#%0Ahow%20do%20i%20manage%20my%20products%3F%0A">
How do I manage my products?</button>
  </h3>
</dt>
<dd>
  ...
</dd>

#5 in reply to: ↑ 4 @Travel_girl
5 months ago

Looks good to me! Thanks for your work!

Replying to tellyworth:

attachment:4519.diff implements more or less what inclusive-components suggests. For example:

<dt id="#%0Ahow%20do%20i%20manage%20my%20products%3F%0A" class="" aria-expanded="false">
  <h3>
    <button formaction="#%0Ahow%20do%20i%20manage%20my%20products%3F%0A">
How do I manage my products?</button>
  </h3>
</dt>
<dd>
  ...
</dd>

#6 @tellyworth
5 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 9005:

Plugin dir theme: make collapsible FAQ accessible.

Fixes #4519.

Note: See TracTickets for help on using tickets.