[Range] What is the label?

[bkardell]

Related to #1243, but potentially separate - again the example is

<rangegroup name="temperature-range" min="-100" max="100">
  <input type="range" name="temperature-range-min" min="-50" max="0" value="-25">
  <input type="range" name="temperature-range-max" min="0" max="20" value="15">
</rangegroup>

Later, it says

A can have an associated label by referencing the id and use the for attribute on the label.

So, in this example - what is the label? Also, again related to what I said in #1243 - there isn't any pre-defined relationship between the children so how would they identify to a screen reader, for example? How would you know what you're picking?

I guess these need to be direct children of rangegroup so you couldn't wrap labels on them? Would they work if you did something like:

<label id="temperature-range-min-label" class="visually-hidden">Temperature range, minimum</label>
<label id="temperature-range-max-label" class="visually-hidden">Temperature range, maxiumum</label>
<rangegroup name="temperature-range" min="-100" max="100">
  <input type="range" name="temperature-range-min" aria-labelledby="temperature-range-min-label"min="-50" max="0" value="-25">
  <input type="range" name="temperature-range-max" aria-labelledby="temperature-range-max-label" min="0" max="20" value="15">
</rangegroup>

or maybe invert it and use the label's for or maybe even just aria-label?

In any case, I'd like to understand how we believe this should work - what should/shouldn't, and ideally at least not provide only (probably) inaccessible examples. Doing the work should both help us think about it, see what it looks like (that looks pretty icky to me, for example) and then ultimately encourage something accessible.

[scottaohara]

going to answer this for how someone might do this now vs how this arguably should behave if it were to become a real-boy element.

now:
the 'best' way to do this now would be to nest the inputs within a fieldset/group and give that a group label. then each input within has its own label/accname.

<fieldset>
  <legend>Temperature range</legend>
  <label>Min: <input type=range ...></label>
  <label>Max: <input type=range ...></label>
</fieldset>

but ideally for a standardized implementation we'd only need to label the parent element with the group label (again - legend is what we discussed before and probably makes the most sense to reuse here), and then each input within would have a localized accessible name of minimum and maximum (with the ability for an author to overwrite those as necessary)

<rangegroup>
  <legend>Temperature range</legend>
  <input type=range ...> <!-- localized accName of "minimum" -->
  <input type=range aria-label=medium ...> <!-- cause maybe there are more than 2, so authors would need to provide their own names ?? -->
  <label>Max: <input type=range ...></label> <!-- why not let label in here still to help name the inputs? -->
</rangegroup>

[smhigley]

Allowing <label> within raises the question of where the text would render, but otherwise I like the idea of default localized "minimum" and "maximum" accessible names, with the option to override with existing methods.

[css-meeting-bot]

The Open UI Community Group just discussed [Range] What is the label?.

The full IRC log of that discussion

<sarah> q+

[css-meeting-bot]

The Open UI Community Group just discussed [Range] What is the label?.

The full IRC log of that discussion

<Penny> This is a carry over item from last week. But skipped due to a critical absence.
<Penny> We're going to punt this to next week.

[brechtDR]

<rangegroup>
  <legend>Temperature range</legend>
  <input type=range ...> <!-- localized accName of "minimum" -->
  <input type=range aria-label=medium ...> <!-- cause maybe there are more than 2, so authors would need to provide their own names ?? -->
  <label>Max: <input type=range ...></label> <!-- why not let label in here still to help name the inputs? -->
</rangegroup>

@scottaohara This makes sense unless "crossing thumbs" becomes a desired outcome. But that's another story I will pick up later.