主页 / coding / 问题 / 79224620
Accepted
Shtole
Asked: 2024-11-26 05:17:11 +0800 CST

通过 aria-labelledby 引用带有标签的输入

  • 772

如果我有一个aria-label设置为的输入1，并且关联标签设置为2，那么引用该输入，什么将被计算为元素的 aria 标签？

<input type="radio" id="cpp-search-video-btn" aria-label="1" role="tab">
<label for="cpp-search-video-btn" aria-hidden="true">2</label>
<div id="cpp-search-video-tab" aria-labelledby="cpp-search-video-btn" role="tabpanel">…</div>

咏叹调标签是什么div#cpp-search-video-tab：1、2，或者可能未设置？（我希望它是“1”）。

据我所知，MDN上没有关于替代品的信息。

html

2 个回答

  1. Best Answer

    答案确实是 1。属性 aria-labelledby 的优先级高于 aria-label，而 aria-label 本身的优先级高于<label>。请参阅MDN

    如果元素同时设置了两个属性，则将使用 aria-labelledby。aria-labelledby 优先于提供可访问名称的所有其他方法，包括 aria-label、<label>和元素的内部文本。

    但是，如果我可以对您的代码添加另一条评论：

    <input type="radio" id="cpp-search-video-btn" aria-label="1" role="tab">
<label for="cpp-search-video-btn" aria-hidden="true">2</label>

    如果可能的话，最好完全避免使用 aria-hidden 和 ARIA。下面的代码在质量上会更好，因为它符合 ARIA 的第一条规则：除非真的需要，否则不要使用它。

    <input type="radio" id="cpp-search-video-btn" role="tab">
<label for="cpp-search-video-btn">1</label>

    或者至少：

    <input type="radio" id="cpp-search-video-btn" role="tab">
<label for="cpp-search-video-btn"><span class="sr_only">1</span><span aria-hidden="true">2</span></label>

    更一般地，如果你有一个真正的，就没有必要用 aria-label 覆盖它。否则一开始<label>就没有什么意义。<label>

    • 1

  2. 好吧，如果我理解正确，并且 DevTools 中的“辅助功能”窗格在“计算属性”→“名称”部分显示 aria 标签，那么答案就是“1”。

    • 0

相关问题