Make the FAQ at plugin directory accessible

[Travel_girl]

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/

[tellyworth]

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?

[tferry]

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

[obenland]

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

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

[Travel_girl]

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>

[tellyworth]

In 9005:

Plugin dir theme: make collapsible FAQ accessible.

Fixes #4519.