README

• 简介
• 安装
• 配置
• 常见问题解答
• 维护者
• 变更日志

简介

此模块处理bluecadet_accessibility的定制功能。当前功能

• 在使用AJAX时，在视图中添加选项以增强可访问性。

安装

• 按照您通常安装贡献的Drupal模块的方式安装。有关更多信息，请访问https://www.drupal.org/node/1897420。

配置

配置可以在视图下的显示格式器中找到。

关于我们的视图模板的假设

• 保持“views”类名，但可以添加预定义或自定义类名。
• 假设基本的顶级模板（views-view.html.twig）结构。
• 结果应放在无序列表中（列表部分是重要的部分）。无序列表有助于屏幕阅读器用户从列表中的第一个项目导航到列表的末尾或跳转到下一个列表。它还可以帮助他们跳过他们选择跳过的链接组。（W3C, H48: 使用ol, ul和dl创建列表或链接组）
• 应该有一个标题（可以是屏幕阅读器专用） <h2 class="u-sr-only view-content__header" tabIndex="0">结果</h2> 默认情况下在ul之前，并且是“view-content”的子项
• 需要一个标题，通常是h2，在筛选器和结果之前，理想情况下 <h2 class="u-sr-only view-filters__header">筛选结果</h2> 和 <h2 class="u-sr-only view-content__header">结果</h2> 是视觉隐藏的。
• 按钮和分页器可以设置一个 data-announce-text 属性，该属性将被宣布而不是通用字符串。

如何在模板中添加自定义宣布文本（例如，暴露的表单、分页器模板）。

表单元素

<button type="submit" data-announce-text="Searching the site" class="c-search-header__search-submit"{{ attributes }}>
	Search
</button>

OR

<button type="submit" data-announce-text="Filter the results" class="c-search-header__search-submit"{{ attributes }}>
	Filter
</button>

分页器元素

...

{% for key, item in items.pages %}
  <li class="c-pagination__item{{ current == key ? ' is-active' : '' }}">
    <a href="{{ item.href }}" data-announce-text="Navigating to Page {{ key }}" {{ item.attributes|without('href', 'title') }} {{current == key ? 'aria-current="page"' : null}}>
      <span class="u-sr-only">Page&nbsp;</span>
      {{- key -}}
    </a>
  </li>
{% endfor %}

...

可选的CSS以实现平滑滚动

html {
  scroll-behavior: smooth;
}

维护者

当前维护者

• Pete Inge (pingevt) - https://www.drupal.org/user/411339
• Amy Frear - https://www.frear-projects.com/

此项目由以下机构赞助

• Bluecadet - https://www.bluecadet.com/

变更日志

未发布

1.x

• 添加了增强可访问性的Drupal视图显示扩展器。

自豪地开发于Bluecadet