如何在语义上为用作输入的非输入元素添加标签

Question

我目前正在一个网站上工作，该网站包含了样式丰富的输入，例如使用<label>-element to style checkboxes：

<label class="checkbox">
  <input type="checkbox">
  <span></span>
</label>

在无法可靠地设置标准<input>类型的地方，我们用其他元素类型重新创建了必要的功能，例如<input type="range">已替换为以下内容（以及一些javascript）：

<div class="rangeinput">
  <div class="rangeinput-thumb></div>
  <div class="rangeinput-slider"></div>
</div>

现在，问题是如何在语义上向这些元素添加标签。

对于常规输入，<label>元素将起作用，但对于所提供的示例neither <label> nor <div> are allowed content of a <label>。

可以通过将ID分配给复选框并使用label元素的for属性来解决checkbox-case问题，从而不必将其放置在另一个label周围。但这不适用于任何自定义元素，因为它们不是labelable，并且最好为每个输入使用单个解决方案。

当前，我将每个类似输入的元素都用<fieldset>包装在<legend>中，但这比实际帮助语义更像是黑客：

<fieldset>
  <legend>A styled rangeinput:</legend>
  <div class="rangeinput">
    <div class="rangeinput-thumb></div>
    <div class="rangeinput-slider"></div>
  </div>
</fieldset>

这个问题不是关于元素的单击聚焦效果，而是关于如何将简短的描述性文本与需要用户输入的元素进行语义关联。