引入可访问的手风琴小部件 - 站点点

>本文介绍了A11yaccordion，这是一个可访问的手风琴小部件，旨在改善残疾人的用户体验。 它解决了类似小部件的常见可访问性缺点，尤其是jQuery手风琴。

>

关键功能和改进：

• 增强的键盘导航： a11yAccordion允许无缝键盘导航，适用于无法使用鼠标的用户。 用户可以轻松地通过小部件的标题。>
>
• 屏幕读取器的兼容性：屏幕读取器准确地读取所有内容，包括基于搜索结果的动态更新标题。
• >开源＆自定义：可在GitHub上获得小部件的源代码，鼓励社区贡献和自定义。 它包括用于编程控制的JavaScript API。
• 解决常见的可访问性问题：该小部件直接解决了在手风琴小部件中发现的问题，例如无法通过标头列出标签以及缺乏屏幕读取器对折叠部分中的内容的支持。

开发背景：

> a11yaccordion源自开源学习管理系统Atutor Project中的需求。 目的是创建一个可访问的手风琴来管理课程数据，确保符合可访问性标准。

入门：

a11yaccordion可在GitHub上获得。 在您的项目中包括CSS（）和JavaScript（）文件。 使用小部件的一个简单示例如下所示：

>

dist/css/a11yAccordion.css> JavaScript初始化：dist/js/a11yAccordion-0.2.2.min.js

<ul class="a11yAccordion" id="Accordion1">
  <li class="a11yAccordionItem">
    <div class="a11yAccordionItemHeader">
      <strong>></strong>Random Months<strong>></strong>
    </div>
    <div class="a11yAccordionHideArea">
      <ul>
        <li>January</li>
        <li>June</li>
        <li>February</li>
        <li>November</li>
      </ul>
    </div>
  </li>
  <!-- ... more accordion items ... -->
</ul>

在此处显示了由此产生的手风琴的视觉示例：

var myAccordion = a11yAccordion({
  parentSelector: '#Accordion1'
});

窗口小部件选项＆API：

>

>小部件提供了多种配置选项，包括用于父容器，标头和隐藏区域的选择器；样式选项；动画速度；和搜索功能。 JavaScript API提供了折叠，扩展和切换单个行的功能。 未来的发展与贡献：

>

虽然显着改善，但计划进一步开发，包括添加程序化行禁用。 欢迎开发人员和设计师的贡献。

>

常见问题（常见问题解答）：（这些>简短汇总）

>

> FAQ涵盖主题，例如改善用户体验，咏叹调的作用，键盘可访问性，避免的常见错误，测试方法，SEO福利，CSS样式，手风琴和选项卡之间的差异，响应式设计和JavaScript增强功能。 >

以上是引入可访问的手风琴小部件 - 站点点的详细内容。更多信息请关注PHP中文网其他相关文章！