1、为什么要设计无障碍访问？
Web 无障碍访问 (也称为 a11y) 是指创建可供任何人使用的网站：
- 无论是身患某种障碍
- 通过慢速的网络连接访问
- 使用老旧或损坏的硬件
- 仅处于某种不方便的环境
例如，在视频中添加字幕可以帮助失聪、有听力障碍或身处嘈杂环境而听不到手机的用户。同样地，确保文字样式没有处于太低的对比度，可以对低视力用户和在明亮的强光下使用手机的用户都有所帮助。
2、从哪些方面进行设计？
1. 跳过链接
每个页面的顶部添加一个直接指向主内容区域的链接，这样用户就可以跳过在多个网页上重复的内容。通常这个链接会放在 App.vue 的顶部，这样它就会是所有页面上的第一个可聚焦元素
xml
<ul class="skip-links">
<li>
<a href="#main" ref="skipLink" class="skip-link">Skip to main content</a>
</li>
</ul>比如电子报纸，可能会有搜索框，公司横条，侧边栏，小模块等。就可以在顶部放入一个连接，用来跳入到主要内容区域。在非聚焦模式下也可隐藏连接。
2. 内容结构
确保设计可以支持易于访问的实现是无障碍访问最重要的部分之一。设计不仅要考虑颜色对比度、字体选择、文本大小和语言，还要考虑应用中的内容是如何组织的。
1. 标题
用户可以通过标题在应用中进行导航。为应用的每个部分设置描述性标题，这可以让用户更容易地预测每个部分的内容。有几个推荐的无障碍访问实践：
- 按级别顺序嵌套标题：
<h1>-<h6> - 不要在一个章节内跳跃标题的级别
- 使用实际的标题标记，而不是通过对文本设置样式实现出来
2. Landmark
Landmark 会为应用中的章节提供访问规划。依赖辅助技术的用户可以跳过内容直接导航到应用的每个部分。你可以使用 ARIA role 帮助你实现这个目标。
| HTML | ARIA Role | 地标的目的 |
|---|---|---|
| header | role="banner" | 主标题：页面的标题 |
| nav | role="navigation" | 适合用作文档或相关文档导航的链接集合 |
| main | role="main" | 文档的主体或中心内容 |
| footer | role="contentinfo" | 关于父级文档的信息：脚注/版权/隐私声明链接 |
| aside | role="complementary" | 用来支持主内容，同时其自身的内容是相对独立且有意义的 |
| search | role="search" | 该章节包含整个应用的搜索功能 |
| form | role="form" | 表单相关元素的集合 |
| section | role="region" | 相关的且用户可能会导航至此的内容。必须为该元素提供 label |
3. 语义化表单
创建一个表单，可以i使用到以下几个语义化标签元素：<form>、<label>、<input>、<textarea> 和 <button>
label标签：描述所有表单控件的用途；使for和id链接起来aria-label：可以为 input 框配置一个带有aria-label的无障碍访问名- 使用
aria-labelledby类似于aria-label，除非标签文本在屏幕上可见。通过id与其他元素配对，可以链接多个id aria-describedby的用法与aria-labelledby相同，它提供了一条用户可能需要的附加描述信息。这可用于描述任何输入的标准- 避免使用占位符，默认情况下它们不符合颜色对比度标准；应当修改其颜色，让它看起来像是预先填入 input 框中的数据一样
- 在表单中使用按钮时，必须设置类型以防止提交表单，也可以使用一个 input 元素来创建按钮
ini
<form
class="demo"
action="/dataCollectionLocation"
method="post"
autocomplete="on"
>
<h1 id="billing">Billing</h1>
<div class="form-item">
<label for="name">Name: </label>
<input
type="text"
name="name"
id="name"
v-model="name"
:aria-label="nameLabel"
aria-labelledby="billing name"
aria-describedby="nameDescription"
/>
<p id="nameDescription">Please provide first and last name.</p>
</div>
<button type="submit">Submit</button>
</form>