移动版无障碍检查清单

本文档提供了一份针对移动应用开发人员的简洁无障碍需求清单。随着更多模式的出现，它将不断发展。

颜色

  • 颜色对比度必须符合 WCAG 2.1 AA 级别要求
    • 正常文本（小于 18 点或 14 点粗体）的对比度比率为 4.5:1。
    • 大型文本（至少 18 点或 14 点粗体）的对比度比率为 3:1。
  • 通过颜色传达的信息必须通过其他方式（链接的下划线文本等）也能获得。

可见性

  • 内容隐藏技术（例如零透明度、z 索引顺序和屏幕外放置）不得单独用于处理可见性。
  • 除了当前可见屏幕外，所有其他内容必须真正不可见（尤其适用于包含多个卡片的单页应用程序）
    • 使用hidden属性或visibility或display样式属性。
    • 除非绝对不可避免，否则不应使用aria-hidden属性。

焦点

  • 所有可激活的元素都必须可聚焦
    • 标准控件（例如链接、按钮和表单字段）默认情况下是可聚焦的。
    • 非标准控件必须分配有适当的ARIA 角色，例如button、link或checkbox。
  • 焦点应以逻辑顺序和一致的方式处理。

文本等效项

  • 必须为应用程序中所有非严格呈现的非文本元素提供文本等效项。
    • 在适当的地方使用alt和title（阅读史蒂夫·福克纳关于使用 HTML title 属性的帖子，以获得良好的指南）
    • 如果上述属性不适用，请使用适当的ARIA 状态和属性，例如aria-label、aria-labelledby或aria-describedby。
  • 必须避免使用文本图像。
  • 所有用户界面组件，其可见文本（或文本图像）用作标签，都必须在组件的程序化名称中提供相同的文本。WCAG 2.1：标签在名称中。
  • 所有表单控件都必须有标签（<label>元素），以便屏幕阅读器用户使用。

处理状态

  • 标准控件（例如单选按钮和复选框）由操作系统处理。但是，对于其他自定义控件，状态更改必须通过ARIA 状态提供，例如aria-checked、aria-disabled、aria-selected、aria-expanded和aria-pressed。

方向

  • 内容不应局限于单一方向（例如纵向或横向），除非必不可少。WCAG 2.1：方向
    • 方向必不可少的情况的示例包括钢琴应用程序或银行支票。

一般指南

  • 必须提供应用程序标题。
  • 标题不得破坏层次结构
    html
    <h1>Top level heading</h1>
<h2>Secondary heading</h2>
<h2>Another secondary heading</h2>
<h3>Low level heading</h3>
  • ARIA 地标角色应用于描述应用程序或文档结构，例如banner、complementary、contentinfo、main、navigation、search。
  • 对于触控事件，请确保以下内容（WCAG 2.1：指针取消）
    • 下压事件不应用于执行函数的任何部分；
    • 如果上述条件不满足，则函数的完成应在抬起事件上发生，并且应提供一种机制，以便在函数完成之前中止操作或在函数完成之后撤消操作；
    • 如果上述条件不满足，则抬起事件应能够撤消在按下事件上触发的任何操作；
    • 如果需要在按下事件触发操作，通常是为了模拟现实世界体验或提供实时反馈，则以上所有规则可能会被违反。例如，游戏控制器、钢琴键盘或虚拟键盘。
  • 触摸目标必须足够大，以便用户进行交互（有关有用的触摸目标大小指南，请参阅BBC 移动设备无障碍指南）。