前端无障碍开发
设置屏幕朗读语言
<html lang="en">
给元素设置 lang 属性
语义化的 HTML
<address>
<article>
<aside>
<footer>
<header>
无障碍表单
标记
使用 for 属性
<label for="namedInput">Name:</label>
<input id="namedInput" type="text" name="name"/>
键盘焦点及焦点轮廓
不要使用 CSS 移除这个轮廓，比如设置 outline: 0
跳过内容机制
使用瞄点
- 在页面顶部提供可见链接
- 在页面其他位置提供可见链接
- 使链接不可见
- 使链接不可见，直到获得键盘焦点
使用程序管理焦点
使用js设置焦点在合适的DOM上
<input
type="text"
ref={this.textInput}
/>
focus() {
// 使用原始的 DOM API 显式地聚焦在 text input 上
// 注意：我们通过访问 “current” 来获得 DOM 节点
this.textInput.current.focus();
}
鼠标和指针事件
确保任何可以使用鼠标和指针完成的功能也可以只通过键盘完成。只依靠指针会产生很多使键盘用户无法使用你的应用的情况。
使用 onBlur 和 onFocus 事件
<div onBlur={this.onBlurHandler} onFocus={this.onFocusHandler} />
// 我们在下一个时间点使用 setTimeout 关闭弹窗。
// 这是必要的，因为失去焦点事件会在新的焦点事件前被触发，
// 我们需要通过这个步骤确认这个元素的一个子节点
// 是否得到了焦点。
onBlurHandler() {
this.timeOutId = setTimeout(() => {
this.setState({
isOpen: false
});
});
}
// 如果一个子节点获得了焦点，不要关闭弹窗。
onFocusHandler() {
clearTimeout(this.timeOutId);
}
