无障碍访问网页
Web的力量在于它的普遍性。每个人不论残疾与否都能访问是一个最基本的方面。——Tim Berners-Lee
有的应用好用，有的勉强可用，但是对于部分群体，我们习以为常的交互却是他们最大的障碍，那么这些应用在他们面前，只有能用和不能用。作为早已接入互联网的一员，我们有责任提高互联网的可访问性，有能力帮助他们在屏幕上找到方向。
相关链接：
- Accessibility——概览；
- Learn Accessibility——谷歌的无障碍教程。
样式
某一元素被选中的方法（需要视觉焦点的情况）：
- 鼠标点击；
- 键盘 tab；
- 程序调用。
相关链接：
- Never remove CSS outlines——介绍了为什么不应该删除按钮聚焦后的外边框；
- :focus-visible——
focus-visible区分键盘和鼠标的 focus； - 交互元素的「:focus-visible」——百度前端顾轶灵的
focus-visible介绍，列出了视觉焦点的 3 种情况； - keyboard-focus.js——使用浏览器 js 事件区分键盘和鼠标的聚焦；
- border 和 outline——outline 不占据空间，用于无障碍聚焦样式。
模块
相关链接：
- tabbable——用于获取可以背 tab 到的元素；
- focus-trap——用于控制 tab 范围的组件；
- focus-trap-react——React 的 focus-trap。
弹窗的可访问性
- aria-modal——MDN 的介绍文档；
- react-aria-modal——React 可访问性弹窗介绍。
表单
相关链接：
- Forms-Accessibility——表单的可访问性。
图片
相关链接：
- Writing great alt text: Emotion matters——书写图片的 alt。
无障碍做的好的网站
问题
- toast 如何做可访问性？
- 无限滚动的“回到顶部按钮”如何被聚焦？
我的实践
TODO：
- Radio Group 的
TAB和“上下左右”； - 弹窗的 tabindex。
社会中的无障碍
相关链接：
- Braille Neue——阮一峰周刊介绍说到，“Braille Neue 是布里叶盲文系统与正常字母的结合，无障碍设计的典范……”，Braille Neue 是一种字体，可以同时用眼睛和手指阅读。
链接
实践：
- 初探 WAI-ARIA——京东的无障碍实践；
- 京喜小程序首页无障碍优化实践。
资料：
- Examples by Role——w3c 的 role 实例。
张鑫旭：
商业公司的无障碍实践：
相关链接：
- Creating valid and accessible links——如果有 onClick 之类的事件，更好的选择是 button；
- How do I make an accessible onClick handler for links in React?——a 标签如果加上了 onClick 就不再生效了；
- 移动无障碍清单——mdn 的介绍；
- 小程序无障碍，使用更有爱——微信介绍；
- 以人为本，人人受益：包容性设计实践指南 - 介绍与理解——知乎介绍包容性设计；
- 开发者必备 — Web 无障碍手册；
- 基于VoiceOver的移动web站无障碍访问实战——张鑫旭；
- WAI-ARIA无障碍网页应用属性完全展示——无障碍的角色、属性、属性值表格；
- What is accessibility?——MDN 的无障碍课程；
- 解决常见的无障碍问题——mdn 的介绍；
- Know your ARIA: ‘Hidden’ vs ‘None’——介绍了无障碍和 visibility hidden 相关内容；
- HTML 元素参考——MDN 的 html 语义标签列表。
规范：