WAI ARIA显示/阅读根据点击信息 [英] WAI ARIA show/read describedby info on click

问题描述

我有一个帮助链接切换p＃hlp。在这些元素之间有一个复选框区域。我需要帮助信息avaliable（读取p）链接点击，而不是焦点。

I have a help link which toggles p#hlp. Between these elements there is a checkbox area. I need to make help info avaliable (read p) on link click, not on focus.

<form name="name">
  <fieldset>
  <legend>legend</legend>
  <a class="help" title="help-button" href="#" aria-describedby="hlp" >Help</a>
  <div class="check">
     <label class="radio">10</label><input type="radio" name="p-v">
     <label class="radio">20</label><input type="radio" name="p-v">
     <label class="radio">Input</label><input type="radio" name="p-v">
  </div>
  <div class="expln">
     <p id="hlp" aria-hidden="false">Help info: Lorem ipsum blah blah blah</p>
  </div>
</fieldset>
</form>

推荐答案

aria-describedby属性标识描述对象的元素，所以根据你的问题，帮助信息实际上并不代表帮助链接，当你说，它应该只有在单击而不是焦点，它基本上是可用的是控制另一个区域，由此链接激活并描述

aria-describedby property identifies the elements that describes the object, so according to your question the Help info does not actually represent the help link when you are saying that it should be available only onclick and not on focus, what it basically does is control another region which is activated by this link and is described by the contents of it.

理想情况下，你应该这样做：

So ideally you should be doing something like this:

<a class="help" title="help-button" href="#" role="button" aria-controls="hlp">Help</a>
<div class="expln" id="hlp" tabindex="-1" role="region" aria-label="Help Info" aria-expanded="true" style="display: block; ">
   <p>Help info: Lorem ipsum blah blah blah</p>
</div>

因此，只有当点击按钮时，JAWS的屏幕阅读器才会读取区域的内容。

So a screen reader like JAWS will now read the contents of the region only when the button is clicked.

我已将链接标记为role =button，因为浏览器焦点未更改，页面位置保持不变。

And I have marked the link as role="button" as the browser focus is not changed and page location remains the same.

另请参阅：

• http://www.w3.org/TR/wai-aria/roles#button


• http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls

• http://www.w3.org/TR/wai-aria/roles#button
• http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls

这篇关于WAI ARIA显示/阅读根据点击信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！