MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey-2018-1

该文档为移动应用开发者提供一个无障碍需求的简要清单。此文档将随着技术模式的发展而不断演进。

颜色

  • 颜色对比度必须遵循 WCAG 2.0 AA 等级需求:
    • 普通文本的对比率为 4.5:1 (小于18磅或黑体14磅)
    • 大文本对比率为 3:1(大于等于18磅或黑体14磅)【译者注:字体单位为point、PT】
  • 颜色传递的信息,必须也通过其它方式标明(例如,链接文本中的下划线)

: Jon Snook 开发的 颜色对比度检查器 - Colour Contrast Checker 可以轻松检查前景和背景的对比度。同样,Tanaguru Contrast-Finder 这个工具能做类似的检查,并且会推荐你考虑使用类似的更好的对比度

可视化

  • 使用用于隐藏内容的技巧处理视觉效果,例如,不透明度为零,z-index 规则,离屏位置。
  • 当前可见的屏幕之外的内容,必须是不可见的。(特别是单一页面应用中包含多个卡片选项):
    • 使用 hidden 特性或 visibility 或 display 样式属性.
    • 除非不可避免,不应该使用 aria-hidden 特性。

焦点

  • 所有可激活元素必须可被聚焦:
    • 标准控件,如链接、按钮、表单域默认可被聚焦。
    • 非标准控件必须分配给它们一个适当的 ARIA Role 如 buttonlink 或者 checkbox
  • 焦点应该是有逻辑顺序,且方式一致。

文本等效

  • 应用中,每个展示的非文本元素都必须提供等效文本。
    • 恰当的位置使用 alt 和 title (请参考Steve Faulkner的帖子 - 关于 Using the HTML title attribute 。)
    • 如果上面的特性不适用,使用恰当的ARIA Properties,比如 aria-label, aria-labelledby, 或 aria-describedby.
  • 必须避免文本图像.
  • 所有的表单控件必须有标签 (<label> elements) ,以便于读屏用户的使用。

状态处理

  • 标准控件,如单选按钮和复选是通过操作系统处理的,而其它自定义控件的状态改变需要通过 ARIA States ,如 aria-checked, aria-disabled, aria-selected, aria-expanded,和 aria-pressed.

General Guidelines常规指南

  • 应用必须提供标题。【译者注:此处的标题为title】
  • 标题不能破坏层次结构。【译者注:此处的标题为headings】
    <h1>Top level heading</h1>
      <h2>Secondary heading</h2>
      <h2>Another secondary heading</h2>
        <h3>Low level heading</h3>
  • 应使用 ARIA Landmark Roles 描述应用或文档的结构,如 banner, complementary, contentinfo, main, navigation, search.
  • 触摸事件处理器,只能通过 touchend 事件触发。
  • 触摸目标必须足够大,方便用户交互(参考 BBC Mobile Accessibility Guidelines 关于触摸目标尺寸的指南)

: Tanaguru's automated accessibility testing service 提供一个有效的方法,排查网页上的,或者是可安装的Web应用中无障碍问题(如,Firefox OS)。tanaguru.org,你可以参与该项目或者发现更多技术实现。

: The 该文档的最初版本 - original version of this document 是由 Yura Zenevich 完成。

【译者声明】: 该版本翻译由Kenny Zhang完成,但不代表认同作者的所有技术观点。

文档标签和贡献者

 此页面的贡献者: hbwhzk
 最后编辑者: hbwhzk,