如何使用 aria-label 和 aria-labelledby 从阅读器获取可见和不可见（自定义）值？

Question

有没有办法通过使用 aria-label 或使用 aria-labelledby 或任何其他属性来获取可见标签名称和自定义名称

例如下面的代码是：-

<div>
    <div id="shankar">Name</div>
    <input type="text" aria-labelledby="shankar"/>
</div>
<div>
    <div id="set-address">Address</div>
    <input type="text" aria-label="set-address"/>
</div>

读者：- 1.名称编辑文字（第一个输入框） 2.设置地址编辑文本（第二个输入框）

我已经通过链接enter link description here

我应该怎么做才能得到这样的消息：- Set-address for Address 编辑文本？ 我应该在这里使用哪个属性？

Answer 1

对于屏幕阅读器，并且因为您的情况是用于表单输入，所以正确的语法是：

<div>
    <label for="shankar">Name</label>
    <input type="text" id="shankar"/>
</div>

您必须通过针对“id”属性的属性关联标签标签。

如果您在其他情况下（如下拉菜单或选项卡面板）：

将类似于（此处示例显示翻译的案例下拉列表）：

    // My label structure
<button id="associatedLang" role="button" title="" aria-expanded="true">
    <span class="ps-current-lang">FR</span>
    <span aria-hidden="true" class="ps-icon ps-icon-chevron-down"></span>
    <span class="sr-only">Changer de langue</span>
</button>

//MY associated content 

<ul aria-labelledby="associatedLang">
    <li class="ng-star-inserted">
        <a target="_self" href="####" lang="en" title="EN - English">
        EN
      </a>
    </li>
</ul>