有没有办法让屏幕阅读器同时读出标签和元素的内容？

Question

假设我有以下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"，而不需要在页面上直观地添加单词"ADDRESS“？

Answer 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>