添加說明屬性（屏幕閱讀器），而無需添加新標籤/元素

Question

我有元素：<div id="container-div" role="region"></div>

當用戶點擊該鍵「R」我想要的屏幕閱讀器讀取的話

「這是XXX區域區域」

沒有在DOM中添加新標籤或元素。

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

提示：

Answer 1

只需添加一個aria-label屬性，像這樣的（它保持DOM清潔無額外隱藏的標籤是非常重要）不使用單詞區域的由於屏幕閱讀器（至少JAWS）自己添加它的描述。所以，如果你寫「這是一個XXX區域」，屏幕閱讀器會因爲角色說「這是一個XXX區域的區域」。