Screenreader Accessibility: two buttons, one label

Question

I have a HTML structure like this:

        <fieldset>
            <legend>Legend</legend>
            <span>Labeltext</span>
            <button aria-pressed="false">Filter 1</button>
            <button aria-pressed="true">Filter 2</button>
        </fieldset>

The span-Element acts like a label for the two buttons. Each button acts independently. As the design is given, it is not possible to change the structure of the text.

As far as i know, it is not possible to add one label to two buttons.

Is it sufficient to extend the label of the buttons and add the "label" (span) into it? Like this: <button aria-pressed="false" aria-label="Labeltext Filter 1">Filter 1</button>

The alternative would be to use the Checkbox Pattern from the ARIA Authoring Practices Guide (APG), which would change the "label" (span) into a heading. But there is no other heading around, so this might be more confusing for screenreader user.

Andy · Accepted Answer · 2024-01-19 13:36:00Z

Technically you can use the same element as a label for several elements simply by referring to it via aria-labelledby.

This would result in the same accessible name for both buttons, which is not very helpful. So you will need add their own contents as well. Directly providing it inside aria-label would be easiest:

<fieldset>
  <legend>Legend</legend>
  <span>Labeltext</span>
  <button aria-pressed="false" aria-label="Labeltext Filter 1">Filter 1</button>
  <button aria-pressed="true" aria-label="Labeltext Filter 2">Filter 2</button>
</fieldset>

I’m curious about the actual use case, since there already is the Legend which sufficiently provides a wrapping label for both buttons. The additional Labeltext seems unnecessary.

You can use aria-describedby if the Labeltext “describes or annotates the current element”:

<fieldset>
  <legend>Legend</legend>
  <span id="button-desc">Labeltext</span>
  <button aria-pressed="false" aria-describedby="button-desc">Filter 1</button>
  <button aria-pressed="true" aria-describedby="button-desc">Filter 2</button>
</fieldset>

Collectives™ on Stack Overflow

Screenreader Accessibility: two buttons, one label

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related