互联网无障碍学习参考.md

互联网无障碍学习参考

这篇列表英文资源居多，中文内容在【无障碍相关的有趣资源】里有更多。

• 通用
  • 无障碍标准
  • 培训/团队合作
  • 证书
  • 书籍推荐
  • 中国的无障碍相关机构
• 产品/设计
  • 参考资料
  • 设计工具
  • 用户研究资源
• 网络内容创作与发布
• 开发
  • 网页开发
  • 安卓开发
  • iOS开发
• 测试
  • 网页测试
  • 安卓测试
  • iOS测试
• 研究文献
• 产品案例

---

通用

无障碍标准

• WCAG 2.1 | 授权中文翻译：Web内容无障碍指南 (WCAG) 2.1：最权威的互联网无障碍标准，涵盖设计/内容/开发

  • Accessibility Guidelines Summary - Kin + Carta Create：用简单语言写的易读版WCAG要求

  • WCAG 2.1 Checklist-Guide to Accessibility - UX Tricks：为设计师写的WCAG指南，包含易懂的范例

  • Cognitive Accessibility at W3C

  • Mobile Accessibility at W3C

  • Accessibility of Virtual Reality

• UI设计

  • Material Design - accessibility | MDUI民间汉化版

  • Apple Human Interface Guidelines - accessibility

• 游戏无障碍

  • CIPT Accessibility Reference Guide：游戏无障碍指南

• 互联网内容

  • Accessibility Testing for Electronic Documents - Section 508：文档无障碍指南，包括Word类文档、pdf、ppt类演讲稿、spreadsheet表格

  • Create Accessible Video, Audio and Social Media - Section 508：音频、视频、社交网络内容无障碍指南

  • BBC Subtitle Guidelines：BBC字幕指南

  • Netflix - English Timed Text Style Guide：Netflix英文字幕样式规范

培训/团队合作

• SiteImprove academy：有免费内容也有收费内容

• Deque university：收费

• W3C introduction to web accessibility：免费，证书收费

• Accessibility for teams - Google Developers：在产品开发团队的工作流程中嵌入无障碍的指南（英语）

证书

• 508 trusted tester：免费，发证书

• IAAP认证：收费，对找工作有帮助
  IAAP的学习资料：https://www.accessibilityassociation.org/prepareforcpacc

书籍推荐

• Mismatch by Kat Holmes（中文版预计2021年出版）

• Building for Everyone by Annie Jean-Baptiste

• Accessibility for Everyone by Laura Kalbag - A Book Apart

• The Laws of Simplicity by John Maeda（中文版：《简单法则》— 前田约翰）- 并非直接与无障碍有关，但简单的产品往往更包容也更容易做好无障碍

中国的无障碍相关机构

• 中国残疾人信息和无障碍技术研究中心（浙大&残联）
• 清华大学无障碍发展研究院&未来实验室
• 中国信息无障碍评测中心
• 包容性设计研究中心
• 信息无障碍研究会
• 一同信息科技公司
• 声波残障社会服务集团

---

产品/设计

参考资料

流程与设计方法

• Microsoft Inclusive Design：微软包容性设计工具箱

• 包容性设计实践指南 - 夏冰莹 [ 公众号链接 ]
  完整的包容性设计实操方法，主要章节：了解残障用户，包容性设计准则，应用包容性使用场景，无障碍设计标准，相关工具，包容性用户调研，无障碍标注文档交接

• Accessibility Guidance-by 小菁鱼
  群内@小菁鱼撰写，公司内部用无障碍设计推广指南，主要章节：无障碍为什么重要，UX/内容/开发的最佳实践（best pratices），测试工具，法律和WCAG简介。

• Bluelines: Documenting Accessible Designs
  UW HCDE活动录像，微软无障碍PM介绍accessibility spec的基础制作，对a11y刚起步的产品非常友好

设计规范

• Material Design - accessibility | MDUI民间汉化版

• Apple Human Interface Guidelines - accessibility

• Windows UWP Design Guidelines - Accessibility

• Designing for accessibility is not that hard - Pablo Stanley

• Do’s and Don’ts on Designing for Accessibility | 官方繁中版
  UK Home Office发布的无障改设计规范海报系列，推荐打印贴在办公区。

• 7 Things Every Designer Needs to Know about Accessibility

• Designing for Accessibility and Inlusion - Smashing Magazine：非常全面的无障碍设计考量

配色无障碍

• My struggle with colors - Demystifying colors for accessible digital experiences Part I | Part II：色彩系统制订的无障碍考量

• Chart accessibility best practices：图表设计中的无障碍考量

• How to Use Color Blind Friendly Palettes to Make Your Charts Accessible：色盲友善的图表配色方案

• Choosing High Contrast Color Schemes for Low Vision：低视力用户专用的高对比度配色介绍

• The Myths of Color Contrast Accessibility：有趣的探讨 - 有时对比度更高的配色反而更难看清？

  • There is no “myths of color contrast accessibility” ：另一位设计师的反驳与回应

为可读性与阅读障碍设计

• Legibility, Readability, and Comprehension: Making Users Read Your Words | 中文翻译：易读性、可读性与可理解性：让用户读你的文字

• Legibility And Readability In Typographic Design

• How to make better websites for people with dyslexia

• Designing for Dyslexia

• 6 Surprising Bad Practices That Hurt Dyslexic Users

设计工具

参考：助你轻松做好无障碍的15个UI设计工具推荐

色彩对比度

• Stark：Figma, Sketch, Adobe XD，可推荐最接近的符合标准的配色（此功能付费），包括色盲模拟

• Contrast：Mac

• Polypane color contrast：可推荐最接近的符合标准的配色

• Tanaguru color finder：可推荐最接近的符合标准的配色

• Color review：在色彩选取器里直接标注对比度分界线

批量替换颜色

• Figma: Find and Replace Colors

• Sketch：Sketch Replace Colour

配色生成

• Randoma11y：随机生成一对符合对比度标准的潮配色

• Cloudflare Design - color：根据网站或图片提取颜色、自动生成符合对比度标准的UI配色

• Accessible Color Palette Builder：输入项目的所有颜色，告诉你哪些搭配符合对比度标准

• ColorBox：管理已有色彩系统

• Data color picker：数据可视化配色生成器

残障模拟

• Color Oracle：色盲模拟，mac / win / linux

Chrome插件：

• Web Disability Simulator：残障模拟，包括针对每种残障推荐的设计方案

• NoCoffee：视障模拟很全面

• Funkify：付费但简单好用，涵盖障碍多

用户研究资源

• Level Access：提供无障改测试和调研服务

---

开发

网页开发

• MDN可访问性/无障碍学习区

• ARIA - 无障碍 | MDN (mozilla.org) ： 如何添加对屏幕阅读器友好的label

• A11ycasts：Chrome Developer web无障碍开发教程系列

• Chrome开发工具里的Accessibility（无障碍）工具简介

• Chrome DevTools - Accessibility reference

• Building websites for Safari Reader Mode and other reading apps. | by Mandy Michael | Medium ： 让网页添加对阅读模式的支持，方便阅读障碍者浏览

• 写给Web开发者使用的无障碍设计指南 （付费阅读）

安卓开发

• 安卓开发者文档：构建无障碍功能更出色的应用

• Developing accessible apps for users with motor impairments

• Adding accessibility features to apps for blind and visually-impaired users

iOS开发

• Accessibility on iOS - Apple Developer

---

测试

网页测试

• Siteimprove accessibility checker

• Accessibility insights for web - Microsoft

• Axe - web accessibility testing - deque

• WAVE evaluation tool

• Which Chrome DevTools improve accessibility?

安卓测试

• Google Accessibility Scanner：自动检测你的app中的无障碍错误

• 安卓开发者文档 - 测试应用的无障碍功能

iOS测试

• About Accessibility Verification on iOS：用VoiceOver与Accessibility Inspector测试无障碍的操作说明

---

研究文献

• Screen Recognition: Creating Accessibility Metadata for Mobile Applications from Pixels
  #苹果无障碍 #图像识别 #视障辅助

• What Makes Videos Accessible to Blind and Visually Impaired People?
  #视频产品 #视障辅助 #图像识别

• Accessibility Issues in Android Apps: State of Affairs, Sentiments, and Ways Forward #app无障碍现状 #常见无障碍问题分析

---

产品案例

• Clubhouse Is A Club So Exclusive, It Excludes Disabled People By Design
  #反面案例