How can I make screen reader not to read aria labels of elements inside of a group

Question

I have a page structured as following.

<div>
  <div>
    <h2>header</h2>
    <button>close button</button>
  </div>
  <div>
    <div>some info</div>
    <div roll='groub' aria-label='some general text about which checkbox is selected'>
    <div>
      <input type="checkbox" id="scales" name="scales" checked aria-label="scales">
      <label for="scales">Scales</label>
    </div>
    <div>
      <input type="checkbox" id="horns" name="horns" aria-label="horns">
      <label for="horns">Horns</label>
    </div>
    </div>
  </div>
</div>

I have my screen reader on and want to be able to tab from each ui component, and screen reader reads it out for me as I press tab key. when it reaches to the div with roll of group, then it reads out the aria label of that div element plus all of its children! What I want is to read only the aria-label of the div with roll of group and stops. Then only reads the aria label of the checkboxes when I tab into them.

any suggestion on what roll I should define for input elements so they get announced only when they are focused by tab key ?

Answer 1

The question should be how to use groups to build a screen reader friendly form.

When it comes to checkboxes or radio buttons, a group is the correct way to go, as it will bind the overall question to the controls, which are in tab order.

So that would be something like

Close button, button
Tab
some general text about which checkbox is selected, group
Scales, checkbox, unchecked

The group itself will not be focussed. But when focussing the first checkbox, the screen reader will announce the group’s name once. This will help screen reader users choose the right one. Once they change to the next checkbox, the group’s name will not get announced.

This is how it should work, since forms are used mainly by means of Tab and the user needs to get the info about what the checkboxes are about.

To follow the First Rule of Using Aria, you should use a <fieldset> element with a <legend>.

If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, […] then do so.

You should not provide aria-label attributes when there is a visual label already. It is correctly used with a for attribute, hence is already providing an accessible name to the checkbox.

<div>
  <div>
    <h2>header</h2>
    <button>close button</button>
  </div>
  <div>
    <div>some info</div>
    <fieldset>
      <legend>some general text about which checkbox is selected</legend>
      <div>
        <input type="checkbox" id="scales" name="scales">
        <label for="scales">Scales</label>
      </div>
      <div>
        <input type="checkbox" id="horns" name="horns">
        <label for="horns">Horns</label>
      </div>
    </fieldset>
  </div>
</div>