如何向用作输入的非输入元素添加标记
我目前正在开发一个包含大量样式输入的网站，例如使用-element样式复选框。
<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>-element可以工作，但是对于提供的示例，可以工作。
可以通过为复选框分配一个id并使用label元素的for-attribute来解决复选框的问题，这样就不必将其放在另一个标签周围。但是这并不适用于任何自定义元素，因为它们不是贴标，最好对每个输入使用单一的解决方案。
目前，我正在用<fieldset>包装<legend>中的每个类似输入的元素，但这感觉更像是黑客，而不是实际帮助语义：
<fieldset>
<legend>A styled rangeinput:</legend>
<div class="rangeinput">
<div class="rangeinput-thumb></div>
<div class="rangeinput-slider"></div>
</div>
</fieldset>这个问题不是关于元素的点击到焦点效果，而是如何在语义上将一个简短的描述性文本与接受用户输入的元素相关联。。
回答 1
Stack Overflow用户
发布于 2022-06-27 20:16:26
为此，我建议使用aria-describedby属性。然后，您可以将描述性文本放置在几乎任何元素中，即使它是视觉上隐藏的。
aria-describedby属性不限于窗体控件。它还可以用于将静态文本与小部件、元素组、有标题的区域、定义等相关联。aria-describedby属性可以与语义角色元素以及具有ARIA 角色的元素一起使用。
您也可以(或者相反)使用aria-labelledby给控件一个更正式的标签。请参阅把咏叹号和咏叹调结合起来可以吗？
还有一个选项是aria-label属性，它可以放在外部小部件元素上。这是一个总是隐藏的选项，仅用于辅助技术使用。
在您的例子中，您可能会这样做(使用比我提供的更具体的措辞)：
<div id="rangeLabel">Value Selector</div>
<div class="rangeinput" aria-describedby="rangeDesc" aria-labelledby="rangeLabel">
<div class="rangeinput-thumb"></div>
<div class="rangeinput-slider"></div>
</div>
<div id="rangeDesc">Use the range slider to set a value.</div>请记住，如果你的距离滑块本身是不可访问的，这一切都是没有意义的。它应该是键盘控制，并有良好的听觉反馈时，与屏幕阅读器，等等。
https://stackoverflow.com/questions/52882497
复制相似问题
腾讯云开发者
