Firefox＆amp; Chrome，尝试使用可访问的折叠内容

Question

我正在使用JAWS屏幕阅读器测试我页面中的JQuery Collapsible Plugin，但当我点击链接显示隐藏数据并使用p关键字时，隐藏数据之外的下一个元素被吓倒了。

我在Chrome（最新版本），Firefox 11和Internet Explorer 8中测试过。只有IE才能正确读取数据。

我在链接中尝试了演示，但效果很好。

我的标记是：

<div class='well' id="dialogDadosFuncionario" aria-describedby="dialogDescription">
  <div role="group" aria-describedby="dialogDescription">
    <h4 id="dialogDescription">
      My Data
    </h4>
    <table summary='My data...'>
    ...
    </table>
  </div>
</div>
<!-- In Chrome and FF this table is readed instead of the table above -->
<table summary='something...'>
</table>

我正在使用$('#dialogDescription').collapsible();来触发插件。

我在这里缺少什么？

Answer 1

你能用p关键词澄清吗？我浏览了细丝链接，我会尝试以下方法：

<table summary="My Data">
  <capton>
   <h4 class="...">My Data</h4> <!--use the hide/show classes -->
  </caption>
...
</table>

标题将标题放在桌面上。给摘要和标题赋予相同的值是不好的，我假设您只是为了示例目的而做了。这将公布为表格，标题级别4，我的数据，我的数据，[继续阅读表格]。

您可能需要在<h4>周围包裹div才能正确显示/隐藏。

新解决方案

看起来你正在为函数提供ID而不是HTML标记。尝试：$('h4').collapsible();