互联网上大多数可用的内容切换插件对残疾人来说是不可访问的,尤其是对那些依赖屏幕阅读器的人来说
这是一个轻量级的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';