屏幕阅读器有没有办法说出标签和元素的内容？答案

【问题标题】：Is there a way for screen reader to speak a label and the contents of an element as well?屏幕阅读器有没有办法说出标签和元素的内容？
【发布时间】：2019-11-20 07:33:09
【问题描述】：

假设我有以下 HTML

<div class="address">
    171 E Broadway, New York, NY 10002
</div>

地址值由应用程序动态填充。在视觉上，用户理解这是给定页面上下文的地址。含义：innerText中无需添加“ADDRESS”字样。

但是，如果用户使用屏幕阅读器，那么一旦元素获得焦点，它将读出内容171 E Broadway, New......。

如果我应用aria-label="address"，那么屏幕阅读器只会说address 而不会发音html 元素的内容。

我尝试添加aria-labeledby

<span id="address-label" hidden>Address</span>

<div class="address" aria-labeledby="address-label">
    171 E Broadway, New York, NY 10002
</div>

但屏幕阅读器显示“地址”。不讲地址内容。

然后我尝试了aria-describedby

<span id="address-label" hidden>Address</span>

<div class="address" aria-describedby="address-label">
    171 E Broadway, New York, NY 10002
</div>

这可行，但它会说出整个地址内容，然后在末尾附加单词“ADDRESS”。

有没有办法让屏幕阅读器说出"ADDRESS: 171 E Broadway, New York, NY 10002" 而无需在页面上直观地添加“地址”一词？

【问题讨论】：

标签： html wai-aria screen-readers

【解决方案1】：

这是多余的，但会提供您想要的结果。我不知道有更优雅的解决方案。

<span id="address-label" hidden>Address: 171 E Broadway, New York, NY 10002</span>

<div class="address" aria-labeledby="address-label">
    171 E Broadway, New York, NY 10002
</div>

【讨论】：