必需

键盘导航

这对谁有利?屏幕阅读器用户和键盘或其他输入设备的用户。

主题作者必须在导航菜单和表单字段、提交按钮和文本链接中提供视觉键盘焦点突出显示。必须可以使用键盘访问所有控件和链接。

例子:

  • 失败:使用隐藏下拉导航菜单显示:无;并在:悬停
  • 过程:使用隐藏下拉导航菜单位置:绝对;并在:悬停:焦点、和可使用导航选项卡钥匙
  • 更好:使用位置隐藏下拉导航菜单:绝对;并在:悬停,:焦点、和可以使用选项卡键或使用键盘箭头键。

如何测试:

  • 使用tab键,通过站点向前tab键。测试以确保使用tab键可以使用链接、按钮、表单字段和下拉菜单。
  • 确保您可以直观地看到哪个链接被关注。焦点必须包含不基于颜色的视觉变化(背景变化、下划线、形状),或两种颜色之间的差异符合颜色对比准则的颜色变化。
  • 确保焦点不会在页面上以意料之外的方式移动。通常,链接之间的移动路径必须与内容语言的文本方向匹配,例如,对于LTR内容,从左到右和从上到下移动。在移动到下一个可视区域之前,必须访问可视区域内的所有制表位。
  • 测试shift+tab以向后移动,并确认其工作正常。
  • 工具:浏览器选项卡键,shift+tab

所有响应视图中都必须支持键盘导航。虽然移动设备上的本机交互是触摸式的,但对许多用户来说,使用键盘导航移动设备是一个重要的工具。请注意,由于响应模式是根据内容宽度触发的,因此在没有显示器的情况下操作的屏幕阅读器用户或高度缩放的低视力用户可能会触发这些模式。

顶部

控制

这对谁有利?屏幕阅读器用户、键盘用户和具有备用输入设备的用户。

所有用作按钮或链接的主题功能都必须使用<按钮>,<输入>,或<a>元素,以确保本机键盘可达性无障碍 无障碍性(通常简称为a11y)是指为残疾人设计产品、设备、服务或环境。无障碍设计的概念确保了“直接访问”(即无人协助)和“间接访问”,即与个人辅助技术(例如计算机屏幕阅读器)的兼容性。(https://en.wikipedia.org/wiki/Accessibility网站)以及与屏幕阅读器辅助功能API的交互。

所有控件还必须具有机器可读的文本,以指示控件的性质。

例子:

失败:
<span class=“menu-toggle”><span class='dashicons dashicons-menu'></span></span>

通过:
菜单

更好:
菜单

请参见链接不是按钮;两者都不是div公司s和跨度了解更多信息。

如何测试:

  • 查找按钮:搜索表单输入、评论表单输入
  • 如果主题响应,则切换到响应模式,测试响应切换:
  • 测试焦点可见性、控件类型、键盘可用性
  • 工具:浏览器选项卡键、浏览器检查器

顶部

这对谁有利?屏幕阅读器用户和键盘导航器。

主题必须包含一个页面内链接,帮助用户在到达新页面后直接导航到内容。这些链接最初可能位于屏幕外,但必须对屏幕阅读器用户可用,并且必须在焦点上可见。

最低一致性跳过链接必须:

  • 成为用户通过屏幕阅读器或键盘导航感知到的第一个可聚焦元素。
  • 当键盘焦点移动到链接时可见。
  • 激活后,将焦点移动到页面的主要内容区域。

基于WebKit的浏览器中有一个突出的错误,它阻止将焦点转移到本机不可聚焦的元素上。您可以将JS排队以修补此bug,也可以将tabindex=-1分配给您的主内容区域以处理此问题。

如何测试:

  • 验证是否存在跳过链接。
  • 验证跳过链接是未登录时页面上的第一个可聚焦对象
  • 验证跳过链接在收到焦点时是否可见
  • 验证跳过链接是否正确指向站点的内容区域
  • 工具:浏览器选项卡键,浏览器检查器

顶部

形式

这对谁有利?所有用户,但主要是屏幕阅读器用户和键盘相关用户。

注释表单必须具有适当的字段标签,并且表单标记中的所有内容都需要显式关联到表单控件。提交后的响应(错误或确认)必须是可感知的。如果您使用的是默认的WordPress注释或搜索表单,这些表单将通过可访问性就绪条件。

占位符属性不是标签的有效替代品,因为在将信息添加到字段后,占位符属性就不再可用,并且很容易被误认为是完整的内容。

如果您要替换默认的WordPress表单或表单行为(例如用AJAX处理响应),您必须:

  • 使用显式关联的表单输入<标签>元素。
  • 创建反馈机制(例如通过AJAX),将响应公开给屏幕阅读器。查看ARIA的技术以获取更多信息。

例子:

失败:

<input type='text'name=s'value='<?php echo修剪(get_search_query());?>'>

通过:(标签已隐藏)

<label for=’s‘class=’screen-reader-text’><?php_e('搜索','文本域');?></标签><input type='text'name='s'id='s'value='<?php echo修剪(get_search_query());?>'>

更好:(标签可见)

<label for=’s'><?php _e(“搜索”、“文本域”);?></标签><input type='text'name='s'id='s'value='<?php echo修剪(get_search_query());?>'>

如何测试:

  • 查看搜索表单和评论表单
  • 验证所有表单字段的标签是否正确;允许对搜索进行隐式标记,但不允许对注释字段进行标记
  • 验证所有表单都有提交按钮。可以隐藏,但如果是这样,则必须正确使用屏幕阅读器文本进行隐藏。
  • 工具:浏览器检查器

顶部

标题

这对谁有利?屏幕阅读器用户、SEO、语音识别用户

主题模板必须使用合理的HTML格式HTML格式 HTML是超文本标记语言的缩写。它是一种用于网页和网站开发的标记语言。标题结构-包括对页面子节使用标题元素。标题标记不得用于表示目的。如果结构的标题元素对视力正常的用户来说是多余的,则可以将其置于屏幕外。

具体来说,由主题定义的子节必须使用标题元素。这包括在文章上下文中使用时将文章标题包装在标题中,以及包装小装置小装置 WordPress小工具是一个执行特定功能的小程序块。您可以在边栏中添加这些小部件,边栏也称为网页上的小部件就绪区域。WordPress小部件最初是为了提供一种简单易用的方式,为用户提供WordPres主题的设计和结构控制。标题中的标题。

故障标准:

这些是用于判断您的层次结构是否符合我们要求的具体标准:

  • H1型元素出现在页面上。
  • 一页上有两个以上的H1标题。

推荐标准:

推荐的标准是首选的,但如果不符合此标准,则不会导致您的主题未通过可访问性评估。

  • 下降时标题不会跳过级别。H1型后面不能跟H3级等。
  • 多个H1型可以接受,但我们强烈反对。有一个H1型对屏幕阅读器用户有益。了解有关的更多信息多个H1标题。

请参见WebAIM的语义结构了解更多信息。

工具

使用标准标题选项,而不是HTML5大纲选项。

如何测试:

  • 查找任何跳过的标题级别
  • 测试h1是否缺失
  • 测试所有标题是否相同
  • 工具:Chrome或Firefox的HeadingsMap插件

顶部

ARIA标志性角色

这对谁有利?屏幕阅读器用户。地标为屏幕阅读器提供了一种直接导航到站点的大型结构区域的方法。

为站点的主要内容区域分配地标角色。网站上的所有内容都必须包装在至少一个里程碑角色中;任何未包装在里程碑角色中的内容都是“孤立的”,屏幕阅读器用户可能找不到。

适当使用角色:

  • role=“横幅”=收割台标题 你网站的标题通常是人们第一次体验到的东西。位于页面顶部的刊头或页眉是网站外观的一部分。它可以影响访问者对您的内容和您/您组织的品牌的看法。它在不同的屏幕尺寸上也可能看起来不同。(<标题>元件)
  • role=“main”=主要内容(<主要>元件)
  • role=“互补”=侧栏(<旁白>元件)
  • role=“contentinfo”=页脚(<页脚>元件)
  • role=“搜索”=搜索表单
  • role=“导航”=导航菜单(<导航>元件)

必须至少使用上述其中一种。不需要同时使用role属性和元素,但使用两者将扩展支持。

如果特定角色在页面上出现多次,请为该角色提供ARIA标签:

<nav aria-label=“<?php esc_attr_e('主要','文本域');?>”><nav aria label=“<?php esc_attr_e('辅助','文本域');?>”><nav aria-label=“<?php esc_attr_e('社交','文本域');?>”>

无法指定任何页面必须有多少个地标,但请记住,太多地标可能会给需要记住地标部分中的信息的用户造成混淆。如果超过10个,则可能需要删除或合并区域。

主题需要使用“navigation-widgets”选项来添加对WordPress 5.5中添加的HTML5导航小部件的支持,以为导航小部件提供地标语义。

add_theme_support('html5',数组('navigation-widgets'));

如何测试:

  • 验证所有内容是否包含在至少一个咏叹调地标内。
  • 验证是否正确选择了aria地标
  • 如果一个主要地标(如导航)被多次使用,请确保每个地标都有唯一的标签。
  • 验证主题支持声明中是否存在“导航窗口”。
  • 工具:ARIA地标检查员书签

顶部

这对谁有利?目击用户

大段文本中的链接(例如,文章内容或评论)必须加下划线。当链接出现在 块是一个抽象术语,用于描述使用WordPress编辑器组合在一起形成网页内容或布局的标记单元。这个想法结合了过去可能通过短代码、自定义HTML实现的概念,并将发现嵌入到单一一致的API和用户体验中。-水平内容,它们必须与周围的内容明确区分。导航类上下文中的链接(例如菜单、小部件中即将发布的帖子列表、分组帖子 元是指组内部工作的术语。对我们来说,这是一个在WordCamp Central和Make WordPress等内部WordPres网站上工作的团队。数据)不需要与周围的内容具体区分。

下划线是表示内容中链接的唯一公认方法。粗体、斜体或颜色差异文本不明确,无法通过。

如何测试:

  • 使用主题单元测试数据时,导航到WordPress测试安装中的“标记:HTML标记和格式”页面。
  • 请看链接的示例。
  • 审查主题的总体设计,以确定可能还需要检查的任何其他大型区块级内容。

如果内容中的链接没有下划线,则主题不会通过此检查。

顶部

这对谁有利?屏幕阅读器用户

链接必须避免重复的非文本文本字符串,如“阅读更多……”,如果脱离上下文,则必须有意义。裸URL不能用作链接。支持文本可以使用屏幕阅读器类直观地隐藏文本。

这个核心核心 核心是运行WordPress所需的一组软件。核心开发团队构建WordPress。“阅读更多”链接属于此指导原则。除了用于“阅读更多”文本的字符串外,还必须使用文章标题。

只要文章标题链接到完整文章,也可以完全排除“阅读更多”链接。

例子:

失败:

内容(__('继续阅读','文本域'));

通过:

内容(冲刺(sprintf)__(“继续读取%s”,“文本域”),'<span class=“screen-reader-text”>'.get_the_title()。'</span>') );
  • 在数据中找到“阅读更多”链接(搜索“阅读更多(read more)”,找到阅读更多测试帖子。如果帖子上看不到,请查看阅读更多标签存档。)
  • 测试链接是否存在
  • 如果存在,测试链接是否包含扩展文本
  • 工具:浏览器检查器

顶部

对比

这对谁有利?色盲用户、与年龄相关的眼睛问题用户、阳光或眩光下的用户。

大多数主题都提供了修改颜色或更改颜色方案的方法。本指南的原则是,如果用户不更改任何默认颜色,那么他们的站点将可以访问。

主题作者必须确保纯文本的所有背景/前景颜色对比度都在Web内容可访问性指南中规定的AA级对比度(4.5:1)内(世界海关组织世界海关组织 WCAG是Web Content Accessibility Guidelines的缩写。这些指南有助于确保所有人都可以访问互联网,无论他们需要如何访问互联网(仅限屏幕阅读器、键盘等)https://www.w3.org/TR/WCAG21网站/.)颜色亮度为2.0。

如果链接状态更改时,颜色更改是唯一可见的更改:

  • 打开的文本颜色悬停与默认链接文本颜色和聚焦链接文本颜色的对比度必须为4.5:1。
  • 打开的文本颜色集中与默认链接文本颜色和悬停链接文本颜色的对比度必须为4.5:1。

如果链接文本上没有文本装饰,除了其他颜色对比度要求外,链接文本颜色和周围的非链接文本颜色之间必须有3:1的颜色对比度。

默认设置将是唯一选中的颜色。

有许多工具可用于测试颜色对比度:

网状物:

Firefox插件:

Chrome附加组件:

如何测试:

  • 对整个页面的颜色对比度进行自动测试。
  • 手动查看每个失败的颜色组合,并验证测试是否与结果匹配。
  • 如果图像出现颜色对比度故障,请检查图像后面的背景颜色。
  • 工具:WebAIM中的WAVE for Chrome,浏览器检查器+Chrome Accessibility插件

顶部

图像

这对谁有利?屏幕阅读器用户。

当主题作者将非装饰性图像添加到模板标记或为最终用户提供添加图像的方法时,主题作者必须包含适当的alt属性或最终用户提供的方法。

所有装饰图像都必须进行标记,以便屏幕阅读器忽略它们。

例子:

  • 特色图片:特色图像的alt属性在媒体管理器中定义。在任何情况下,如果特色图片并被选为亮点论文 特色图片是博客存档页面上使用的主图片,当帖子或页面在社交媒体上共享时,会被提取。该图像可以用于在站点的小部件区域或帖子摘要列表中显示。显示为未链接,则alt属性必须包含在图像中。
  • 图标(SVG、图像或图标字体):如果图标是表示文本(例如,没有可见文本),图标必须包含屏幕阅读器的备用文本,以指示图标的含义。如果图标是补充文本(例如,它与指示功能或用途的文本一起出现),则图标不得包含回退文本,并使用对屏幕阅读器隐藏阿里亚·希登.

如何测试:

  • 查看特色图像演示,确保图像中包含alt属性
  • 对于链接的特色图像,请验证链接中是否有文本,以及文本是否重复。例如,包装特色图片和文章标题的区块级链接必须具有空的alt属性;链接换行只有特色图片必须使用文章标题作为alt属性。
  • 查看网站上使用的任何图标字体或装饰图像。确保图标字体在需要时具有备用文本选项(例如,当图标字体本身是链接时),或者如果不是,则隐藏(例如,连接到其他链接的装饰性图标)
  • 工具:浏览器检查器

顶部

媒体

这对谁有利?屏幕阅读器用户和认知障碍用户。

作为默认配置,在没有用户操作的情况下,媒体资源不得自动启动或更改。这包括音频、视频或图像/内容滑块和转盘等资源。

如何测试:

  • 如果默认情况下启用了特殊功能(如内容滑块),请确保可以使用所有准则并将其应用于该功能来访问该功能。(这是非常罕见的)

顶部

屏幕阅读器文本

不需要在主题中使用屏幕阅读器文本来满足可访问性准则。任何通常以视觉方式隐藏并提供给屏幕阅读器的文本都可以合法地对所有用户可见。

如果您只为屏幕阅读器用户提供文本,有两种有效的方法可以做到这一点。您可以使用隐藏在有效的屏幕阅读器-文本分类或使用阿里亚·拉贝尔阿里亚·拉贝尔属性为您标记的内容提供一个可访问的名称。

如果您使用.屏幕阅读器-文本,则必须使用其中一种推荐的技术以可视化方式隐藏该文本。

顶部

不允许

这对谁有利?所有用户。这些功能可能会给任何用户带来问题。

不允许包含以下任何内容:

  • 任何正的tabindex属性。在特定情况下,允许使用负值或零值tabindex(根据具体情况进行评估)。
  • 包含accesskey属性。
  • 在不警告用户的情况下生成新窗口或选项卡。

如何测试:

  • 搜索主题中出现的任何目标属性。(target=“_blank”出现在主题单元测试内容中,因此忽略这些。)
  • 搜索主题中出现的任何tabindex属性。(tabindex=1出现在adminbar中,所以忽略这一点。tabindex=-1可能是允许的,但大多数其他用法都不允许)
  • 搜索主题中出现的任何accesskey属性。
  • 工具:查看源,浏览器检查器

上次更新时间: