无障碍

WordPress主题应该生成每个人都可以使用的页面,包括那些看不到或无法使用鼠标的人。

要创建可访问的主题,您需要了解HTML、CSS和JavaScript的web标准。
您还需要了解web可访问性的最佳实践,并了解网络内容可接近方针、WCAG。

为了成功地使主题具有可访问性,应在项目开始时将可访问性作为项目规范的一部分加以考虑。通过从一开始就做出正确的决定,您可以避免在最后一刻做出代价高昂、耗时且质量低下的调整。

这个无障碍团队在手册中记录了许多开发、设计和内容的最佳实践和资源。在手册中,您还可以了解有关可访问性测试的信息。

这个主题团队对于提交到WordPress.org主题目录的主题,有两组可访问性要求:

可访问性要求基于WCAG,但适用于WordPress主题。

“辅助功能就绪”意味着主题符合WCAG指南AA级这意味着主题达到了主题审查小组设定的最低标准。

网络无障碍的四大原则

虽然网络可访问性可能是一个复杂的主题,但它归结为四个原则。内容必须是:

可感知的

内容必须对所有人都可用。它不应该依赖于特定的设备或浏览器,也不需要特定的物理感觉,如视觉或声音。

可操作的

无论是使用键盘、鼠标还是辅助技术,用户都必须能够有效地移动和操作最终站点。

可以理解

内容应以支持理解的方式呈现,包括支持为屏幕阅读器用户构建网站的心理模型。同样,网站的操作(导航菜单、链接、表单等)也应该易于理解。构建一个包含已知用户行为的主题(例如在主内容区域中为链接添加下划线)有助于实现这一点。

稳健

内容必须在广泛的用户代理中同等可用。残疾用户可以使用一系列硬件和软件解决方案(通常称为“辅助技术”)来访问网络,包括屏幕阅读和语音识别软件、盲文阅读器和交换机(单输入设备)。

考虑到这四个原则,设计一个主题可以轻松创建一个可访问的网站。


可感知和可理解

颜色和颜色对比度

背景色和前景色之间的颜色对比度足够高,使内容更容易阅读。主题作者必须确保纯文本的所有背景/前景颜色对比度都在Web内容可访问性指南(WCAG)2.0中规定的AA级对比度(4.5:1)内,以获得颜色亮度。

  • 颜色可能不是识别控件、文本内容中的链接或错误消息的唯一方法。
  • 如果链接文本上没有文本装饰,除了其他颜色对比度要求外,链接文本颜色和周围的非链接文本颜色之间必须有3:1的颜色对比度。

内容中的链接(由其他文本包围的链接)和在导航菜单中分组在一起的链接有单独的要求。如果从上下文中可以明显看出链接组是链接,则无需对其加下划线。

颜色使用的最佳实践

对比的无障碍要求

可调整文本大小

用户可以通过多种方式调整文本大小,包括浏览器设置。如果用户将文本大小调整为原始大小的200%,则所有内容和功能都必须保持可用。

  • 调整文本大小不得触发多维滚动
  • 放大的文本不得导致溢出或重叠

为避免这些问题,建议:

  • 使用字体大小和线条高度的相对单位
  • 在不同的浏览器和屏幕宽度中测试主题

字体大小和调整大小文本的最佳实践

图像

非装饰性图像

例子:

  • 替换标题文本的标题图像
  • 用于导航的图像代替文本

随附的非装饰性图像国际货币基金组织元素应具有中高音属性。

装饰性图像

例子:

  • 与标题文本一起使用的标题图像
  • 导航文本链接附带的图像和图标

如果可能,应使用CSS公司

  • 随附的装饰图像国际货币基金组织元素应为空中高音属性:alt=“”
  • 与文本一起显示的装饰性图像应使用对屏幕阅读器隐藏隐藏的咏叹调

特色图片

特色图像的alt属性在媒体库中定义。

  • 如果特征图像未链接,则alt属性应描述图像
  • 如果特色图片链接到帖子,alt文本应使用帖子标题

alt文本的最佳实践

图像的可访问性要求

可操作的

控制

所有控件必须可用于所有屏幕大小的键盘,包括但不限于用于打开和关闭菜单、子菜单、任何类型的对话框、模式和弹出窗口的按钮。

对话模式的最佳实践

控制的无障碍要求

标题

标题是将内容分解为逻辑小节的基本方式。标题级别表示内容的重要性。屏幕阅读器用户可以通过阅读标题来扫描页面内容,并通过标题导航到节。这就是为什么标题的使用必须合乎逻辑,而不是为了表达目的。

主题开发中标题结构的最佳实践

标题的无障碍要求

链接文本

链接文本应该描述它链接到的资源,即使文本是在上下文之外读取的。一些辅助软件会扫描页面中的链接,并将其作为简单列表呈现给用户。在这些情况下,所有链接都将被断章取义地读取。因此,重要的是链接中使用的文本是描述性的。绝对不应将裸URL用作链接。

良好的链接文本

无障碍要求:避免重复阅读或继续阅读文本。

链接下划线和样式链接状态

一般来说,如果链接位于导航菜单和列表之外,则应加下划线。仅仅使用颜色来区分链接是不够的,因为不是每个人都能感知颜色。

如果用户将鼠标悬停在某个链接上,如果他们关注某个链接,或者他们已经访问了某个链接。除非替换为更可见的焦点样式,否则不应删除焦点状态的默认浏览器样式。

内容中下划线链接的可访问性要求

跳过链接

跳过链接提供了一种机制,使用户可以在进入任何给定页面时直接导航到内容或导航。例如,跳转到内容链接可能允许用户跳过标题区域,直接转到主内容。

在具有多个菜单和内容区域的设计中,可以使用多个跳过链接:

  • 跳到主导航
  • 跳到内容
  • 跳到页脚

这些链接最初可以使用适当的CSS公司技术,但屏幕阅读器用户应保持可用,并对有视力的键盘导航器保持可见。

跳过链接的最佳实践

跳过链接的可访问性要求

表格

  • 为用户提供足够的信息以完成表单。
  • 所有输入字段都必须有一个标签。占位符文本不能替代标签。输入字段还必须具有可见的焦点样式。
  • 将属于一起的控件(例如,一组相关复选框)与字段集传奇
  • 确保表单中的选项卡顺序与输入字段的视觉顺序相匹配:不要意外移动焦点或跳过输入字段。

按表格提交

提交后的响应(包括任何错误消息)应始终可见。如果可能,应在提交后页面的顶部生成错误消息,以便用户立即意识到任何问题。在断章取义的情况下读取错误消息也应该有意义。

表单的最佳实践

表格的无障碍要求

稳健

使用与内容最匹配的HTML元素。执行操作时使用按钮,导航到页面的一部分或新页面时使用链接。

  • 即使用户禁用JavaScript和CSS,网站内容也应可用
  • 确定浏览器您的主题支持并在不同屏幕大小的浏览器上测试您的主题

资源

使WordPress可访问是WordPress可访问性团队的官方博客,致力于让尽可能多的人访问WordPres。任何人都可以参加讨论、漏洞清理和会议。您还可以通过电子邮件关注讨论,或订阅帖子和评论的订阅源。

变更日志:

  • 重写并发布2023-02-16