WordPress主题应当能够生成所有人都能使用的页面,包括那些无法看见内容或无法使用鼠标的人。
若要创建无障碍主题,就需要掌握HTML、CSS和JavaScript相关的网页标准知识。
同时还需要了解网页无障碍设计的最佳实践,并具备《网页内容无障碍指南》(即WCAG)的基础知识。
若要成功打造出无障碍主题,应从项目一开始就将无障碍性作为项目需求的一部分来考虑。如果在最初就做出正确的决策,就能避免在最后阶段进行代价高昂、耗时且效果不佳的调整。
无障碍团队在其手册中记录了许多关于开发、设计及内容方面的最佳实践与资源。在该手册中,还可以了解到有关无障碍测试的相关内容。
主题团队为提交到WordPress.org主题目录的主题设定了两套无障碍要求:
“无障碍准备就绪”的要求是基于WCAG制定的,但已针对WordPress主题进行了调整。“无障碍准备就绪”并不意味着该主题已达到AA级的WCAG标准,它仅表示该主题满足了主题审核团队设定的最低标准。
网页无障碍的四大原则
尽管网页无障碍可能是一个复杂的主题,但其实只需遵循四大原则即可。内容必须满足以下要求:
可感知
内容必须对所有人开放,不应依赖于特定的设备或浏览器,也不应要求用户具备视力或听力等特定的感官能力。
可操作
无论用户使用键盘、鼠标还是辅助技术,都必须能够顺利浏览并操作最终生成的网站。
可理解
内容的呈现方式应当便于理解,包括为屏幕阅读器用户提供有助于构建网站结构认知的信息。同样,网站的各项功能(如导航菜单、链接、表单等)也应当易于理解。在设计主题时融入用户常见的操作习惯(例如在主要内容区域下划线显示链接),有助于实现这一目标。
稳健性
内容必须在各种不同的用户代理环境中都能正常显示。残障用户可能会使用各种硬件和软件解决方案(通常称为“辅助技术”)来访问网页,包括屏幕阅读器与语音识别软件、盲文阅读器以及单输入设备等。
若在设计时牢记这四大原则,就能更轻松地打造出无障碍网站。
可感知与可理解
颜色与颜色对比度
背景色与前景色之间具备足够的对比度,能让内容更易于阅读。主题开发者必须确保纯文本内容的所有背景色/前景色对比度都符合《网页内容无障碍指南》(WCAG)2.0中规定的AA级颜色亮度对比度标准(4.5:1)。
- 颜色并非识别控件、文本内容中的链接或错误信息的唯一方式。
- 如果链接文本没有文字装饰,那么除了满足其他颜色对比度要求外,链接文本颜色与周围非链接文本颜色之间还必须具备3:1的对比度。
对于嵌在其他文本中的链接以及集中在导航菜单中的链接,有不同的要求。如果从上下文中就能明显看出某组元素是链接,那么就无需为其添加下划线。
可调整大小的文本
用户有多种方式可以调整文本大小,包括通过浏览器设置来实现。即便用户将文本大小放大到原始大小的200%,所有的内容与功能都应当依然可用。
- 调整文本大小时不应触发多维度滚动。
- 放大后的文本不应出现内容溢出或重叠的情况。
为避免这些问题,建议:
- 使用相对单位来设置字体大小和行高。
- 在不同的浏览器及屏幕宽度下测试主题。
图片
非装饰性图片
示例:
- 用于替代标题文本的页头图片。
- 用于替代文字实现导航功能的图片。
包含在img元素中的非装饰性图片应当设置alt属性。
装饰性图片
示例:
- 与标题文本一同使用的页头图片。
- 伴随导航文本链接出现的图片与图标。
在可能的情况下,装饰性图片应当通过CSS来呈现。
- 包含在
img元素中的装饰性图片应当设置为空的alt属性:alt=""。 - 与文本一同显示的装饰性图片应当通过
aria-hidden属性隐藏,以避免被屏幕阅读器读取。
特色图片
特色图片的alt属性是在媒体库中设定的。
- 如果特色图片没有链接,其
alt属性应当描述该图片的内容。 - 如果特色图片链接到了某篇文章,其
alt文本应当使用该文章的标题。
可操作
控件
在所有屏幕尺寸下,所有的控件都必须能够通过键盘进行操作,这些控件包括用于打开和关闭菜单、子菜单以及各类对话框、模态框和弹出窗口的按钮等。
标题
标题是将内容划分为逻辑性子部分的重要方式。标题的层级能够体现内容的重要性。屏幕阅读器用户可以通过阅读标题来浏览页面内容,并通过标题直接跳转到相应部分。因此,标题必须合理使用,而非仅出于展示目的。
链接
链接文本
无论在何种上下文中,链接文本都应当能够描述其所指向的资源。有些辅助软件会扫描页面中的链接,并以简单列表的形式呈现给用户。在这种情况下,所有的链接都会在脱离上下文的情况下被读取,因此链接文本的描述性非常重要。绝不能仅使用纯URL作为链接文本。
“无障碍准备就绪”要求:避免重复使用“阅读更多”或“继续阅读”之类的文本。
链接的下划线显示及链接状态样式
一般来说,如果链接位于导航菜单和列表之外,就应当为其添加下划线。仅依靠颜色来区分链接是不够的,因为并非所有人都能察觉颜色差异。
用户必须能够在将鼠标悬停在链接上、将焦点置于链接上,以及已经访问过该链接时,都能判断出该文本是否为链接。除非使用了更醒目的焦点样式,否则不应移除浏览器默认的焦点状态样式。
跳过链接
跳过链接提供了一种机制,让用户能够在进入页面时直接跳转到内容或导航部分。例如,一个“跳至内容”链接可以让用户直接跳过页头区域,进入主要内容。
在具有多个菜单和内容区域的页面设计中,可以使用多个跳过链接:
- 跳至主导航。
- 跳至内容区域。
- 跳至页脚。
这些链接最初可以通过适当的CSS技术隐藏在屏幕之外,但必须对屏幕阅读器用户保持可见,同时对于使用键盘导航的视障用户来说,在获得焦点时也应当可见。
表单
- 需提供足够的信息,以便用户能够完成表单填写。
- 所有的输入字段都必须配有标签。占位符文本不能替代标签,而且输入字段还必须具备可见的焦点样式。
- 应当使用
fieldset和legend元素,将属于同一组的控件(例如一组相关的复选框)组合在一起。 - 表单中的标签顺序必须与输入字段的视觉顺序保持一致:不得让焦点意外移动或跳过某些输入字段。
表单提交时
提交后的反馈信息——包括任何错误消息——都必须是可感知的。如果可能的话,错误消息应当显示在表单提交页面的顶端,这样用户就能立即了解存在的问题。错误消息在脱离上下文的情况下也应当依然具有意义。
稳健性
应当选择与内容最为匹配的HTML元素。执行操作时使用按钮,而在导航到页面的某个部分或新页面时则使用链接。
- 即便用户同时禁用了JavaScript和CSS,网站的内容也应当依然可以访问。
- 需明确说明您的主题支持哪些浏览器,并使用这些浏览器在不同屏幕尺寸下对主题进行测试。
资源
Make WordPress Accessible是WordPress无障碍团队的官方博客,致力于让尽可能多的人能够使用无障碍功能的WordPress。任何人都可以参与其中的讨论、错误排查以及会议。您还可以通过电子邮件关注相关讨论,或订阅文章与评论的推送。
更新日志:
- 重新撰写并发布于2023-02-16