如何开发出闭着眼睛也能用的网页/应用?

255 阅读4分钟

前言

之前提到信息无障碍的概念,介绍了一些相关的应用。今天我们来了解,如何开发出残障人士也能使用的应用和网页。

有人会问:“我也想开发残障人士也能使用的应用/网页,但不知道有什么原则/标准能指导我,也不知道有什么工具能提示我,那怎么搞?”

这个问题可以拆分成两个子问题

  • 信息无障碍开发指导原则/标准
  • 信息无障碍开发辅助工具

我们先来看第一个问题。

标准

有个叫W3C的组织,制定了一套信息无障碍的标准,叫做WCAG,是Web无障碍的世界标准,被各国政府、各商业组织广泛使用。

有人会问:“这两个英文缩写代表啥?”

接下来我们来看看这两个英文缩写含义

W3C

  • 全称是World Wide Web Consortium - 万维网联盟
  • 工作是对 web 进行标准化
  • 创建并维护 WWW 标准

我们常见的HTML、CSS、XML等标准由这个组织来制定的。

说完W3C,我们再说说WCAG

  • 全称是Web Content Accessibility Guidelines - 全称是Web无障碍指南
  • 最新的版本是2.1,在2018年6月发布。预计2023年发布2.2版本
  • 这标准包括四部分
    • 四项原则
    • 13项准则,每项原则下都会列出对应准则
    • 成功标准,每项准则会列出对应的成功准则
    • 充分的和咨询性的技术,帮助解决可访问性障碍

工具

作为互联网大厂,Google开发了一些工具,帮助开发者打造适合残障人士的应用/网页。

Android 无障碍功能扫描仪 (Accessibility Scanner)。

  • 能扫描其他应用中的页面
  • 依据 WCAG 2.0 准则检查
  • 能快速确定需要改善的内容。

Lighthouse

  • 是一款开源、自动化的开发者工具
  • 可直接在 Chrome DevTool 中使用。
  • 依据 WCAG 准则来核查给定页面的无障碍体验,并给出分值

安卓端的实践

作为Android系统的开发厂商,Google为安卓应用的信息无障碍开发,提供了设计原则,改进建议和专门的测试框架。

设计原则如下

  • 让文字更清晰易辨,主要看字体和字体颜色对比度
  • 采用大且易用的控件
  • 描述每个界面元素(通常只需设置View中contentDescription对应的值)

可参照以下原则,改进信息无障碍的体验

  • 为各个View添加自己的标签,且能说明用途
  • 尽量使用原生控件
  • 除了颜色上提示,最好还有图案和位置的提示
  • 为视频或音频内容添加说明

Google也在开发工具和测试框架层面,为开发者提供支持。

Android Studio中集成了 Android 无障碍功能测试框架,简要介绍如下

  • 可查找布局中的无障碍功能问题
  • 找到布局编辑器,点错误报告按钮

除了Android Studio,还有以下框架能提供无障碍开发支持

  • UI Automator 查看器 - 可使用该工具帮助找出无障碍信息的问题根源,例如应包含却未包含可朗读的文本等问题
  • Lint - 会发出警告,并提供指向源代码中相关位置的链接
  • Espresso - 里面有个AccessibilityChecks,可在每个测试的init块中启用

后记

感谢科技发展,我们这些普通开发者,可以用上各科技大厂提供的信息无障碍框架/工具,更容易的为残障人士开发出适合他们的产品和服务了。

我相信,未来将会有更多残障人士可通过信息无障碍技术,去感受这个多彩的信息世界。这会给我们程序员带来新的发展契机。

参考资料

W3C 简介 www.w3school.com.cn/w3c/w3c_int…

Web内容无障碍指南(WCAG) 2.1 (w3.org) www.w3.org/Translation…

让每一个人受益,收获更大的成功 | 一文了解无障碍体验 mp.weixin.qq.com/s/_8pt1OmJg…

Make apps more accessible | Android Developers (google.cn) developer.android.google.cn/guide/topic…

更多文章和有用工具看这里