原文链接:https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/

这些是WordPress功能应该满足的可访问性标准,以便合并到核心代码。WordPress中发布的所有新代码或更新代码必须符合AA级的WCAG2.0指南。这些基本准则旨在为开发提供参考,不包含所有可能的可访问性问题。

HTML语义

采用务实的方法来处理HTML的语义。不要纯粹为了语义而添加语义;但如果有一个与内容明确匹配的HTML节后,请使用那个元素。例如,如果您有一组链接,则应该最有可能使用list元素。

标题结构

H1代表每个核心页面标题的主标题。对于小节,请使用合理的HTML标题结构——包括使用页面子节的标题元素。标题标记不应用于表示目的。

  • 使用H2到H6为页面提供内部结构。
  • 不要跳过标题级别??
  • 不要在标题内添加额外的功能,例如链接或按钮

控件的语义

具有本机键盘交互(按钮或链接)的控件始终是首选。如果控件有有效的目标链接,页内引用或链接,则控件应使用<a href=””>。如果没有,则应使用<button>。

如果您要更新现有控件:

按钮或链接决策逻辑

场景选择
具有空值或无意义HREF值的锚点:href=’#’, no href, href=’#something’ ,其中 #something 不存在button
具有有意义的页内HREF值的锚点:href=’#something’,其中#something存在button 或者 a href=’#target’
具有有意义的可渲染的HREF值的锚点(但实际行为是AJAX)当JS不可用时使用链接,其余情况使用按钮
具有有意义的不可渲染的HREF值的锚点应该是个按钮,但是也许目标应该是可渲染的
指向同一页面上新位置的按钮可以是按钮,也可以是链接
指向不同页面上新位置的按钮应该是个链接

动态内容

当页面在不刷新的情况下有动态修改,您必须像ARIA提供有关重要变更的声音的反馈,例如成功保存事件。

对所有简单的AJAX响应使用wp.a11y.speak()。如果您正在进行复杂的交互,wp.a11y.speak()可能不是最佳选择。在这种情况下,请与可访问性团队讨论您的使用情况,来决定是否扩展wp.a11y.speak(),或者编写您自己的ARIA实时区域。

颜色对比

在大多数情况下,我们不希望功能插件去添加或修改核心的颜色。然而,如果一个功能插件需要添加新的颜色组合,则这些组合必须满足最低的对比度要求。对于渲染小于24px或更小的字体,最小对比度要求为4.5:1;对于渲染大于24px或大于19px并加粗的字体,最小的对比度要求为3.0:1。

键盘辅助功能

用户必须能够通过键盘访问并成功地与页面上所有可操作的元素交互,包括所有的表单输入、按钮和链接。他们必须能够看到一个可视的键盘焦点指示器。您应该注意,当屏幕阅读器运行时,键盘事件的操作可能是不同的。

如果您可以使用鼠标完成一个操作,您必须还可以使用键盘来完成该操作。

图片和图标

任何图片资源必须包含一个可访问的名称。在某些情况下,这些可访问的名称应该是空字符串。一个图片可以由实际的<img>元素、图标字体或svg元素表示;但出于这些目的,任何图形表示都被认为是图像。不同类型的元素使用不同类型的可访问名称。

对于<img>元素,可访问的名称应该在alt属性中。如果img是装饰性的,仍然需要包含alt属性,alt属性留空。

对于图标字体,图标字体本身应该有aria-hidden属性,并且在相邻的元素中具有screen-reader-text。如果图标是装饰性的,字体图标还是需要aria-hidden属性,但是screen-reader-text应该省略。

<a href="this.html">
<span class="dashicons dashicon-thumbs-up" aria-hidden="true"></span>
<span class="screen-reader-text">Something</span>
</a>

对于SVG,SVG应该是内联的,以便于辅助技术不会隐藏可访问的信息。SVG元素应该有一个包含图像的可访问名称的<title>元素。对于跨技术支持,title元素应该通过aria-labelledby与svg元素相关联。为了最大兼容,所有的用于表示图像的SVG元素都应该带有值为‘img’的role属性。

如果SVG元素是装饰性的,则应省略title元素,并且不应有aria-labelledby属性。SVG元素还是应该有aria-hidden属性。

标签

现有代码使用显式和隐式标记字段的混合,但是所有的新代码必须使用显式关联的<label>元素(使用for/id属性,而不是包装表单控件)。标签不需要是可兼得,但是隐藏时必须使用.screen-reader-text类。占位符很好,但是不能代替标签。对于所有标签,单击字段标签应使相关字段获得焦点,或者对于复选框或单选框选择器,选择该选项。

不要引入新的标题属性来传达信息。当您需要提供备用标签时,请使用aria-label,如果要附加其他数据,请使用.screen-reader-text。

创建表单时,使用<fieldset>和<legend>将复杂表单内的,与逻辑相关的表单元素分组,或者将标题下的单选按钮和复选框分组。

Categories: Coding Standards

发表评论

邮箱地址不会被公开。 必填项已用*标注