在不添加新标签/元素的情况下向属性添加描述(用于屏幕阅读器)

Add a Description to Attribute (for Screen Reader) Without Adding New Label / Element

本文关键字:添加 用于 属性 描述 屏幕 元素 新标签 标签 情况下      更新时间:2023-09-26

我有一个元素:<div id="container-div" role="region"></div>

当用户点击'R'键时,我希望屏幕阅读器读取单词

"这是XXX区域"

无需在DOM中添加新的标签或元素。

(在没有额外隐藏标签的情况下保持DOM整洁非常重要)

只需添加一个aria-label属性,如下所示:

<div id="container-div" role="region" aria-label="This is an XXX">

提示:不要在描述中使用区域这个词,因为屏幕阅读器(至少JAWS)会自己添加它。所以,如果你写"This is an XXX area region",屏幕阅读器会因为角色的关系而显示"This is an XXX area region region"。