0

我有一个帮助链接可以切换我的<p id="hlp">元素。在这些元素之间有一个复选框区域。我需要在链接点击时提供帮助信息（阅读 p），而不是在焦点上。

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

我怎样才能做到这一点？

4

1 回答 1

2

aria- describeby 属性标识描述对象的元素，因此根据您的问题，帮助信息实际上并不代表帮助链接，当您说它应该仅在单击时可用而不是在焦点上时，它基本上所做的是控制另一个由该链接激活并由其内容描述的区域。

所以理想情况下你应该做这样的事情：

<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 这样的屏幕阅读器现在只会在单击按钮时读取该区域的内容。

而且我已将链接标记为 role="button" 因为浏览器焦点没有改变并且页面位置保持不变。

也可以看看：

于 2012-07-28T05:50:47.123 回答