a11y
- a11y 由 “accessibility” 这个单词的首字母 a，最后一个字母 y，以及中间的 11 个字母（c、c、e、s、s、i、b、i、l、i、t）组成
- a11y 就是 accessibility（可访问性）的缩写，指的是让网页、应用、产品等对所有人都“可访问”，尤其是对残障人士（如视障、听障、肢体障碍、认知障碍等）也能无障碍使用
服务人群
- 视觉障碍者
- 全盲：适配屏幕阅读器
- 色弱：良好的对比度
- 低视力：放大缩小/字体调整
- 听觉障碍者
- 重要信息不能只通过声音传递，还需要文字等视觉提示
- ex.视频音频提供字幕/手语翻译
- 肢体障碍者
- 支持更多的设备种类进行操作，ex.键盘/其他辅助设备...
- 支持语音操作
- 认知障碍者
- 需对网页进行较好的无障碍设计
- ex.页面结构清晰/信息分组合理...
设备
移动端
- 访问方式
- 滑动/点击
- 访问顺序
- 基于可访问树先同级后子级进行遍历
桌面屏幕阅读器
- 访问方式
- 键盘
- 访问顺序
- 基于可访问树顺序线性遍历
- 配合快捷键跳跃
- 用户可以通过快捷键进行“跳跃式”导航
- 如 H 跳标题、D 跳 landmark、Tab 键切换可聚焦元素等
- Narrator
- window 上自带的屏幕阅读器
- Win + Ctrl + Enter 启动
可聚焦元素
- 原生可聚焦元素：
<a href="..."><button><input><select><textarea>
- 具有 tabindex 属性的元素
- tabindex="0"：
- 元素可以聚焦
- 按照 DOM 顺序参与键盘导航
- 最常用的值
- tabindex="-1"：
- 元素可以聚焦
- 不会参与键盘导航（Tab 键无法到达）
- tabindex="正数"：
- 元素可以聚焦
- 按照数值大小顺序参与键盘导航
- 不推荐使用，因为会打乱自然的导航顺序
- tabindex="0"：
可访问树
定义
- 浏览器在解析网页时，基于 DOM 结构、语义化标签、ARIA 属性等信息，专门为辅助技术（如屏幕阅读器、放大镜、语音助手等）生成的一棵“无障碍视图树”
- 它是 DOM 的一个“投影”或“子集”，只包含对无障碍有意义的节点和属性
查看
- F12
- 开发者工具右上角，点击 >> 按钮
- 选择 “Accessibility”（可访问性）面板
- Enable full-page accessibility tree
- Elements 面板右上角切换 dom tree & 可访问树
构建依据
- HTML 语义化标签（如
<nav>、<main>、<button>、<h1>等） - ARIA 属性（如 role、aria-label、aria-labelledby、aria-hidden 等）
- 可交互元素（如
<a>、<input>、<select>、<button>等） - 可感知内容（如带 alt 的图片、表格、列表等）
- 包含文本内容的元素
HTML 语义化标签
指那些本身带有明确语义、能够表达内容结构和功能的 HTML 标签 不仅仅用于页面布局，还能让浏览器、搜索引擎、辅助技术（如屏幕阅读器）等更好地理解网页内容的含义和结构
| 标签 | 名称 | 描述 |
|---|---|---|
<header> | 页眉/头部 | 页面或区块的头部信息 |
<nav> | 导航栏 | 主导航、菜单 |
<main> | 主内容区 | 页面主体内容 |
<footer> | 页脚/底部 | 页面或区块的底部信息 |
<article> | 独立内容块 | 文章、博客、新闻等独立内容 |
<section> | 章节/区块 | 内容分组、主题区块 |
<aside> | 侧边栏/补充内容 | 侧边栏、广告、相关链接等 |
<h1>-<h6> | 标题（1~6级） | 内容层级结构 |
<figure> | 媒体内容分组 | 图片、图表等及其说明 |
<figcaption> | 媒体说明 | 图片、图表的标题或说明 |
<address> | 联系方式 | 作者、公司等的联系信息 |
<time> | 时间 | 文章发布时间、活动时间等 |
<mark> | 高亮文本 | 搜索关键词高亮、重点内容 |
<em> | 强调 | 语气强调 |
<strong> | 重要 | 重要内容 |
<code> | 代码 | 程序代码片段 |
<blockquote> | 引用 | 长段落引用 |
<cite> | 引用来源 | 书籍、文章、作者等 |
ARIA 属性
来增强网页的可访问性
role
- 用于定义元素的语义角色，让辅助技术知道这个元素的用途
- 常见值有：button、navigation、main、dialog、tab、alert、menu、checkbox 等
<div role="button">提交</div>
// 屏幕阅读器会朗读 “提交 按钮”
aria-label
为元素提供一个可访问名称，辅助技术会朗读这个名称
<button aria-label="关闭">×</button>
// 屏幕阅读器会朗读 “关闭 按钮”
aria-labelledby
- 通过 ID 引用其他元素，可以引用多个元素，ID 之间用空格分隔
- 屏幕阅读器会按照引用的顺序朗读这些元素的内容
<div aria-labelledby="title description">
<h2 id="title">产品名称</h2>
<p id="description">产品描述</p>
</div>
// 屏幕阅读器会朗读 “产品名称 产品描述”
aria-describedby
- 为表单控件提供更详细的说明或提示信息
- 这些信息会在屏幕阅读器朗读完标签后，作为补充说明被朗读出来
<label for="password">密码：</label>
<input
type="password"
id="password"
aria-describedby="password-hint"
/>
<span id="password-hint">密码必须包含至少8个字符，包括大小写字母和数字</span>
aria-hidden="true"
添加 aria-hidden="true" 在无障碍访问时被隐藏，但对其他可视用户仍然是可见的
<p aria-hidden="true">This is hidden from screen readers.</p>
可访问性检测
- axe DevTools（Chrome/Firefox 插件）
- 强大的自动化检测工具，能检测大部分常见可访问性问题
- Lighthouse（Chrome 内置）
- 在“审查”面板中可直接运行，生成可访问性报告
- ESLint 插件
- 对前端代码进行静态可访问性检查
- eslint-plugin-jsx-a11y
- eslint-plugin-vuejs-accessibility
