Question

我有一个帮助链接切换p＃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>

Answer 1

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

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

<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”，因为浏览器焦点未更改且页面位置保持不变。

另见：

WAI ARIA显示/阅读由点击信息描述

1 个答案: