Html Question posted in
Some basic documentation can be found here.

Html – 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?

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    I would recommend a different variation of tacoshy’s answer. The issue with their approach is that adding aria-describedby to the buttons will cause screen readers to announce both the label and the description for each button. This means that screen reader users will hear "Sort by title, sort by" and "Sort by date, sort by" as they focus the buttons.

    It’s better to instead associate the "sort by" span with the <menu> element itself. This will provide context to what that menu is, while also avoiding announcing "sort by" multiple times for the same element.

    <span id="sort-label">Sort By:</span>
<menu aria-labelledby='sort-label'>
  <li><button type="button" aria-label="Sort by title" aria-pressed="true"></button></li>
  <li><button type="button" aria-label="Sort by date" aria-pressed="false"></button></li>
</menu>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search