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

要创建一个可访问的主题,您需要了解HTML,CSS和JavaScript的Web标准。
您还需要了解用于网络可访问性的最佳实践,并了解 Web内容可访问性指南,WCAG。

为了成功使您的主题访问,应从项目开始时考虑可访问性,作为项目规范的一部分。通过从一开始就做出正确的决定,您可以避免进行最后一刻的调整,这些调整可能是昂贵,耗时且质量低的调整。

可访问性团队 已经记录了其手册中的许多最佳实践和资源,用于开发,设计和内容。在手册中,您还可以了解有关可访问性的测试。

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

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

“准备就绪”确实 不是 意味着主题符合WCAG指南 AA级。这意味着主题达到了主题审查团队设定的最低标准。

网络可访问性的四个原则

尽管Web可访问性可能是一个复杂的主题,但仅归结为四个原则。内容必须是:

可感知

内容必须可供所有人使用。它不应取决于特定的设备或浏览器,或者需要特定的物理意义,例如视觉或声音。

可操作

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

可以理解

内容应以支持理解的方式呈现,包括支持屏幕阅读器用户的网站心理模型的构建。同样,该网站的操作(导航菜单,链接,表格等)应该很容易理解。在这方面构建一个结合已知用户行为的主题(例如在主内容区域内强调链接)有助于。

强壮的

内容必须在广泛的用户代理中同样可用。残疾用户可以采用一系列硬件和软件解决方案(通常称为“辅助技术”)来允许他们访问网络 – 包括屏幕阅读和语音识别软件,盲文读取器和开关(单个输入设备)。

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


可感知和可理解的

颜色和颜色对比

背景和前景颜色之间具有足够高的颜色对比度使内容易于阅读。主题作者必须确保所有背景/前景颜色的对比纯文本都在“ Web内容可访问性指南(WCAG)中指定的颜色光度为2.0中”中指定的AA对比度(4.5:1)范围内。

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

内容中有单独的要求(链接被其他文本包围)和在导航菜单中分组在一起的链接。如果从上下文中很明显,则不需要强调一组链接。

使用颜色的最佳实践

可访问性的对比要求

可解析的文本

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

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

为了避免这些问题,建议:

  • 使用相对单元进行字体尺寸和线高度
  • 在不同的浏览器和屏幕宽度中测试您的主题

字体尺寸和评分文字的最佳实践

图片

非处方图像

例子:

  • 替换标题文字的标题图像
  • 图片代替文字进行导航

包括img元素应该有一个alt属性。

装饰图像

例子:

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

在可能的情况下,应将装饰图像包括在内CSS

  • 带有装饰图像img元素应该有一个空的alt属性:alt=""
  • 与文本一起显示的装饰图像应使用屏幕阅读器隐藏aria-hidden

特色图像

特征图像的替代属性在媒体库中定义。

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

ALT文本的最佳实践

图像的可访问性要求

可操作

控件

所有控件都必须在所有屏幕尺寸上的键盘上使用,包括但不限于打开和关闭菜单,子菜单,任何类型的对话框,模态和弹出键的按钮。

对话模式的最佳实践

可访问性的控件要求

标题

标题是将内容分解为逻辑子部分的重要方法。标题级别表示内容的重要性。屏幕读取器用户可以通过读取标题来扫描页面的内容,并通过其标题导航到部分。这就是为什么重要的是要在逻辑上使用标题,而不是用于演示目的。

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

标题可访问性的要求

链接

链接文字

链接文本应描述它链接到的资源,即使文本是从上下文中读取的。一些辅助软件会扫描页面以获取链接,并将其作为简单列表提供给用户。在这些情况下,所有链接都将在上下文中读取。因此,重要的是链接中使用的文本具有描述性。裸露的URL绝不应用作链接。

好的链接文本

可访问性的要求:避免重复阅读更多或继续阅读文本。

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

一般而言,如果链接是外部导航菜单和列表,则应强调链接。单独使用颜色来区分链接是不足的,因为并不是每个人都能感知颜色。

用户必须能够判断是否链接文本是否悬停在链接上,是否专注于链接以及是否已经访问了链接。除非替换为更明显的焦点样式,否则不应删除焦点状态的默认浏览器样式。

可访问性的要求强调内容中的链接

跳过链接

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

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

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

这些链接最初可以使用适当的CSS技术,但应保持屏幕读取器用户的可用性,并在视力键盘导航器上可见。

跳过链接的最佳实践

可访问性的跳过链接要求

形式

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

在表格提交中

次要后响应(包括任何错误消息)总是可以感知到的。如果可能的话,应在访问后页面的顶部生成错误消息,以便用户立即意识到任何问题。读出上下文时,错误消息也应该是有意义的。

表格的最佳实践

表格的可访问性要求

强壮的

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

  • 即使用户同时禁用JavaScript和CSS,该网站的内容也应该可用
  • 确定哪个 浏览器 您的主题在不同的屏幕尺寸上使用这些浏览器来支持和测试主题

资源

使WordPress可以访问 是WordPress可访问性团队的官方博客,致力于使WordPress尽可能多地访问WordPress。任何人都可以参加讨论,错误磨砂和会议。您还可以通过电子邮件进行讨论,或订阅提要以获取帖子和评论。

ChangElog:

  • 重写和出版 2023-02-16

By zhuon

发表回复

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