核心无障碍标准

在中创建新接口时核心核心 核心是运行WordPress所需的一组软件。核心开发团队构建WordPress。,输出和交互应符合WCAG公司WCAG公司 WCAG是Web Content Accessibility Guidelines的缩写。这些指南有助于确保所有人都可以访问互联网,无论他们需要如何访问互联网(屏幕阅读器、键盘等)https://www.w3.org/TR/WCAG21网站/.2.0级。但除此之外,还有一些特定的模式可达性无障碍 无障碍性(通常简称为a11y)是指为残疾人设计产品、设备、服务或环境。无障碍设计的概念确保了“直接访问”(即无人协助)和“间接访问”,即与个人的辅助技术(例如计算机屏幕阅读器)兼容。(https://en.wikipedia.org/wiki/Accessibility网站)团队和核心团队已同意将其作为首选的结构方法。

尽管有许多模式符合可访问性标准,但跨平台的一致性是确保WordPress整体更易于使用的关键方法。

本文档是帮助开发人员满足WordPress辅助功能编码标准.

HTML语义

采取务实的方法HTML格式HTML格式 HTML是超文本标记语言的缩写。它是一种用于网页和网站开发的标记语言。语义。不要纯粹为了语义而添加语义;但如果有一个HTML结构与内容明确匹配,请使用该元素。例如,如果你有一组链接,它很可能使用一个列表元素。

顶部

标题结构

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

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

顶部

控件的语义

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

如果您正在更新现有的控件、按钮或链接决策逻辑:

脚本选择
具有null或无意义的HREF值的锚点:HREF='#',no HREF,HREF=''#something',其中#sometain不存在按钮
具有有意义的页面HREF值的锚点HREF='#something'其中#sometain does existAnchors带有有意义的页HREF价值的锚点HREF='#sortain'其中#something does exit按钮a href='#target'
具有可渲染的有意义的页外HREF值的锚点(但实际行为是AJAX)当JS不可用时链接,其余时间按按钮。
具有有意义的页外HREF值的锚点可渲染的应该是一个按钮,但也许目标应该是可渲染的
指向同一页面上新位置的按钮可以是按钮或链接。
指向不同页面上新位置的按钮。应该是一个链接。

顶部

动态内容

当页面中发生动态更改而没有重新加载页面时,您必须向ARIA提供重要更改的声音反馈,例如成功保存事件。

使用wp.a11y.speak()用于所有简单的AJAX响应。如果您正在进行复杂的交互,wp.a11y.speak()可能不是最好的选择。在这种情况下,请与辅助功能团队讨论您的用法,以确定是否扩展wp.a11y.speak()或编码您自己的ARIA活动区域是最佳选择。

顶部

颜色对比度

在大多数情况下,功能插件不需要添加或修改核心中的颜色。然而,如果功能插件需要添加新的颜色组合,则这些组合必须满足最低对比度要求。最小对比度要求为4.5:1,字体大小小于等于24px,3.0:1,大于24px或19px和粗体。

顶部

当链接可以通过上下文进行标识时,例如,因为它们是菜单的一部分,或者是一组明确标识为用户界面控件的链接,它们不一定需要加下划线。在所有其他情况下,尤其是对于由其他文本包围的链接(在一行或阻止 块是一个抽象术语,用于描述使用WordPress编辑器组合在一起形成网页内容或布局的标记单元。这个想法结合了过去可能通过短代码、自定义HTML实现的概念,并将发现嵌入到单一一致的API和用户体验中。文本),链接需要始终加下划线。

顶部

键盘辅助功能

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

如果你能用鼠标完成一个动作,你也必须能用键盘完成这个动作。

顶部

图像和图标

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

对于<图像>元素,则可访问的名称应位于alt属性中。如果img是装饰性的,那么alt属性仍应包含在内,但保留为空。

对于图标字体,字体图标本身应该具有aria-hidden属性,在相邻元素中包含屏幕阅读器文本。如果图标是装饰性的,字体图标应该仍然具有阿里亚·希登属性,但应忽略屏幕阅读器文本。

<a href=“this.html”><span class=“dashicons dashicon-thumbs-up”aria-hidden=“true”></span><span class=“screen-reader-text”>一些东西</span></a>

对于SVG,SVG应该是内联的,这样就不会隐藏可访问的信息辅助技术辅助技术 辅助技术是一个总括术语包括辅助、自适应和康复设备残疾人还包括选择、定位和使用它们的过程。辅助技术通过增强或改变与技术需要完成这些任务。https://en.wikipedia.org/wiki/Assitive_technology网站.SVG元素应包含<标题>具有图像可访问名称的元素。对于跨技术支持,标题元素应通过与svg元素关联阿里亚·拉贝尔。为了实现最大的兼容性,用于表示图像的所有SVG元素都应带有值为“img”的role属性。

如果SVG元素是装饰性的,那么应该省略title元素,并且不应该存在aria-labelledby属性。SVG元素还应包含阿里亚·希登属性。

顶部

标记

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

不要引入新的标题属性来传递信息。当您需要提供替代标签和.屏幕阅读器-文本如果您要附加附加数据。

创建表单时,请使用<字段集><图例>在复杂表单中对逻辑相关的表单元素进行分组,或在标题下对单选按钮和复选框进行分组。

上次更新时间: