互联网上大多数可用的内容切换插件对残疾人来说是不可访问的，尤其是对那些依赖屏幕阅读器的人来说

这是一个轻量级的jQuery插件，它使用ARIA属性提供了一个完全可访问的内容切换（显示/隐藏）接口。它在元素展开或折叠时提供了视觉提示，这在使用键盘导航和屏幕阅读器时尤为重要。

如何使用它:

1.加载jquery-accessible-hide-show-aria.js查询jQuery之后的脚本。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery-accessible-hide-show-aria.js"></script>

2.在切换元素旁边添加要展开和折叠的内容，如下所示：

<h2 class="js-expandmore">
  Toggle Element
</h2> 
<div class="js-to_expand">
  ... Content To Expand/Collapse
</div>

3.折叠时隐藏内容：

.js-to_expand[aria-hidden=true],
.js-to_expand[data-hidden=true] {
  display: none;
}

4.在切换元素中添加一个视觉指示器。可选。

.expandmore__button[aria-expanded=false] > .expandmore__symbol:before,
.expandmore__button[data-expanded=false] > .expandmore__symbol:before {
  content : '+ ';
}

.expandmore__button[aria-expanded=true] > .expandmore__symbol:before,
.expandmore__button[data-expanded=true] > .expandmore__symbol:before {
  content : '− ';
}

5.自定义展开/折叠文本。

var expand_all_text = 'Expand All',
    collapse_all_text = 'Collapse All';

预览截图

可访问 扩展/折叠插件 可访问 隐藏显示咏叹调