Search code examples
htmlaccessibilityfigurewcagwcag2.0

Is creating button group with `<figure>` correct and comply with WCAG?

I am creating a button group with label like this:

The look of the button group

The HTML code I am now writing:

<figure class="toggler-widget">
  <figcaption class="toggler-label">Sort By:</figcaption>
  <ul class="button-togglers">
    <li class="choice-selected">
      <button type="button" title="Sort by title" aria-label="Sort by title" aria-pressed="true"></button>
    </li>
    <li>
      <button type="button" title="Sort by date" aria-label="Sort by date" aria-pressed="false"></button>
    </li>
  </ul>
</figure>

Based on the description and example on MDN:

Usually a <figure> is an image, illustration, diagram, code snippet, etc.

Seems <figure> is used for text / image / diagram that having a description only.

I am now so confused that if I am using it right or if there is any better way to code this widget?

Solution

  • No, it is not correct according to WCAG. The documentation you have quoted is correct but you misunderstood the explanation. The very first quote is as follows:

    The <figure> HTML element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit.

    Followed by this code example:

    <figure>
  <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset" />
  <figcaption>An elephant at sunset</figcaption>
</figure>

    What you're doing is labeling the buttons not giving an optional caption to an image. As a matter of fact, the image is completely irrelevant for your toggler. The main function of the toggle are the buttons and the image is just decoration.

    Since you can't use a label for 2 buttons you can either refer to aria-labelledby or aria-describedby.
    Additionally, the correct list container for control elements is <menu>:

    <span id="toggler-label">Sort By:</span>
<menu class="button-togglers">
  <li class="choice-selected">
    <button type="button" aria-describedby="toggler-label" aria-label="Sort by title" aria-pressed="true"></button>
  </li>
  <li>
    <button type="button" aria-describedby="toggler-label" aria-label="Sort by date" aria-pressed="false"></button>
  </li>
</menu>