为属性添加描述（用于屏幕阅读器），而无需添加新标签/元素

Question

I have the element: <div id="container-div" role="region"></div>

When the user will click the key 'R' I want the screen reader reads the words

"this is XXX area region"

without adding new label or element in the DOM.

(It's really important to keep the DOM clean without an extra hidden labels)

Answer 1

Just add an aria-label attribute, like this:

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

Tip: don't use the word Region in your description since screen readers (at least JAWS) add it themselves. So, if you write "This is an XXX area region", a screen reader would say "This is an XXX area region region" because of the role.