Vue3官网-无障碍（二十一）基础、语义（表单、标签、aria-label、aria-labelledby、aria-describedby、按钮）、标准、资源

Vue3官网-无障碍（二十一）基础、语义（表单、标签、aria-label、aria-labelledby、aria-describedby、按钮）、标准、资源

总结：

1. 基础

Web 可访问性 (也称为 a11y) 是指创建可供任何人使用的网站的实践方式——无论是身患某种障碍、通过慢速的网络连接访问、使用老旧或损坏的硬件，还是仅仅是处于不利环境中的人。例如，在视频中添加字幕可以帮助失聪、有听力障碍或身处嘈杂环境而听不到手机的用户。同样，请确保文字对比度不要太低，这对低视力用户和那些试图在强光下使用手机的用户都有帮助。

你是否已经准备开始却又无从下手？

可以先看看由万维网联盟 (W3C) 提供的规划和管理 web 可访问性。

跳过链接

你应该在每个页面的顶部添加一个直接指向主内容区域的链接，这样用户就可以跳过在多个网页上重复的内容。

通常这个链接会放在 App.vue 的顶部，这样它就会是所有页面上的第一个可聚焦元素：

<ul class="skip-links">
  <li>
    <a href="#main" ref="skipLink">跳到主内容</a>
  </li>
</ul>

若想在非聚焦状态下隐藏该链接，可以添加以下样式：

.skipLink {
  white-space: nowrap;
  margin: 1em auto;
  top: 0;
  position: fixed;
  left: 50%;
  margin-left: -72px;
  opacity: 0;
}
.skipLink:focus {
  opacity: 1;
  background-color: white;
  padding: .5em;
  border: 1px solid black;
}

一旦用户改变路由，请将焦点放回到这个跳过链接。通过用如下方式聚焦 ref 即可实现：

<script>
export default {
  watch: {
    $route() {
      this.$refs.skipLink.focus();
    }
  }
};
</script>

阅读关于跳过链接到主要内容的文档

组织内容

可访问性最重要的部分之一是确保设计可以支持易于访问的实现。设计不仅要考虑颜色对比度、字体选择、文本大小和语言，还要考虑应用程序中的内容是如何组织的。

标题

用户可以通过标题在应用程序中进行导航。为应用程序的每个部分设置描述性标题，这可以让用户更容易地预测每个部分的内容。说到标题，有几个推荐的可访问性实践：

• 按级别顺序嵌套标题：<h1> - <h6>
• 不要在一个章节内跳跃标题的级别
• 使用实际的标题标记，而不是通过对文本设置样式以提供视觉上的标题

阅读更多有关标题的信息

<main role="main" aria-labelledby="main-title">
  <h1 id="main-title">Main title</h1>
  <section aria-labelledby="section-title">
    <h2 id="section-title"> Section Title </h2>
    <h3>Section Subtitle</h3>
    <!-- 内容 -->
  </section>
  <section aria-labelledby="section-title">
    <h2 id="section-title"> Section Title </h2>
    <h3>Section Subtitle</h3>
    <!-- 内容 -->
    <h3>Section Subtitle</h3>
    <!-- 内容 -->
  </section>
</main>

地标

地标 (landmark) 会为应用中的章节提供访问规划。依赖辅助技术的用户可以跳过内容直接导航到应用程序的每个部分。你可以使用 ARIA role 帮助你实现这个目标。

HTML	ARIA Role	地标的目的
header	role=“banner”	主标题：页面的标题
nav	role=“navigation”	适合用作文档或相关文档导航的链接集合
main	role=“main”	文档的主体或中心内容
footer	role=“contentinfo”	关于父级文档的信息：脚注/版权/隐私声明链接
aside	role=“complementary”	用来支持主内容，同时其自身的内容是相对独立且有意义的
无对应元素	role=“search”	该章节包含整个应用的搜索功能
form	role=“form”	表单相关元素的集合
section	role=“region”	相关的且用户可能会导航至此的内容。必须为该元素提供 label

Tip：

在使用地标 HTML 元素时，建议加上冗余的地标 role attribute，以最大限度地与传统不支持 HTML5 语义元素的浏览器兼容。

2. 语义

表单

当创建一个表单，你可能使用到以下几个元素：<form>、<label>、<input>、<textarea> 和 <button>。

标签通常放置在表单字段的顶部或左侧：

<form action="/dataCollectionLocation" method="post" autocomplete="on">
  <div v-for="item in formItems" :key="item.id" class="form-item">
    <label :for="item.id">{{ item.label }}: </label>
    <input
      :type="item.type"
      :id="item.id"
      :name="item.id"
      v-model="item.value"
    />
  </div>
  <button type="submit">Submit</button>
</form>

注意如何在表单元素中包含 autocomplete='on'，它将应用于表单中的所有输入。你也可以为每个输入设置不同的自动完成属性的值。

标签

提供标签以描述所有表单控件的用途；链接 for 和 id：

<label for="name">Name</label>
<input type="text" name="name" id="name" v-model="name" />

如果你在 chrome 开发工具中检查这个元素，并打开 Elements 选项卡中的 Accessibility 选项卡，你将看到输入是如何从标签中获取其名称的：

警告：

虽然你可能已经看到这样包裹输入字段的标签：

<label>
Name:
<input type="text" name="name" id="name" v-model="name" />
</label>

辅助技术可以更好地支持用匹配的 id 显式设置标签。

aria-label

你也可以为输入配置一个带有 aria-label 的可访问名称。

<label for="name">Name</label>
<input
  type="text"
  name="name"
  id="name"
  v-model="name"
  :aria-label="nameLabel"
/>

请随意在 Chrome DevTools 中检查此元素，以查看可访问名称是如何更改的：

aria-labelledby

使用 aria-labelledby 类似于 aria-label，除非标签文本在屏幕上可见。它通过 id 与其他元素配对，你可以链接多个 id：

<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-labelledby="billing name"
    />
  </div>
  <button type="submit">Submit</button>
</form>

aria-describedby

aria-describedby 的用法与 aria-labelledby 相同，它提供了一条包含用户可能需要的附加信息的描述。这可用于描述任何输入的标准：

<form
  class="demo"
  action="/dataCollectionLocation"
  method="post"
  autocomplete="on"
>
  <h1 id="billing">Billing</h1>
  <div class="form-item">
    <label for="name">Full Name:</label>
    <input
      type="text"
      name="name"
      id="name"
      v-model="name"
      aria-labelledby="billing name"
      aria-describedby="nameDescription"
    />
    <p id="nameDescription">Please provide first and last name.</p>
  </div>
  <button type="submit">Submit</button>
</form>

你可以通过使用 Chrome 开发工具来查看说明：

占位符

避免使用占位符，因为它们可能会使许多用户感到困惑。

占位符的一个问题是默认情况下它们不符合颜色对比标准；修复颜色对比度会使占位符看起来像输入字段中预填充的数据。查看以下示例，可以看到满足颜色对比度条件的姓氏占位符看起来像预填充的数据：

最好提供用户在任何输入之外填写表单所需的所有信息。

用法说明

为输入字段添加用法说明时，请确保将其正确链接到输入。你可以提供附加用法说明并在 aria-labelledby 内绑定多个 id。这可以使设计更加灵活。

<fieldset>
  <legend>Using aria-labelledby</legend>
  <label id="date-label" for="date">Current Date:</label>
  <input
    type="date"
    name="date"
    id="date"
    aria-labelledby="date-label date-instructions"
  />
  <p id="date-instructions">MM/DD/YYYY</p>
</fieldset>

或者，你可以用 aria-describedby 将用法说明附加到输入。

<fieldset>
  <legend>Using aria-describedby</legend>
  <label id="dob" for="dob">Date of Birth:</label>
  <input type="date" name="dob" id="dob" aria-describedby="dob-instructions" />
  <p id="dob-instructions">MM/DD/YYYY</p>
</fieldset>

隐藏内容

通常，即使输入具有可访问的名称，也不建议在视觉上隐藏标签。但是，如果可以借助周围的内容来理解输入的功能，那么我们可以隐藏视觉标签。

让我们看看这个搜索字段：

<form role="search">
  <label for="search" class="hidden-visually">Search: </label>
  <input type="text" name="search" id="search" v-model="search" />
  <button type="submit">Search</button>
</form>

我们可以这样做，因为搜索按钮将帮助可视化用户识别输入字段的用途。

我们可以使用 CSS 在视觉上隐藏元素，但保持其可以用于辅助技术：

.hidden-visually {
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  height: 1px;
  width: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
}

aria-hidden=“true”

添加 aria hidden="true" 将隐藏辅助技术中的元素，但使其在视觉上对其他用户可用。不要把它用在可聚焦的元素上，而只用于装饰性的、重复的或屏幕外的内容。

<p>This is not hidden from screen readers.</p>
<p aria-hidden="true">This is hidden from screen readers.</p>

按钮

在表单中使用按钮时，必须设置类型以防止提交表单。你也可以使用输入创建按钮：

<form action="/dataCollectionLocation" method="post" autocomplete="on">
  <!-- Buttons -->
  <button type="button">Cancel</button>
  <button type="submit">Submit</button>

  <!-- Input buttons -->
  <input type="button" value="Cancel" />
  <input type="submit" value="Submit" />
</form>

功能图像

你可以使用此技术创建功能图像。

• Input 字段

  • 这些图像将作为表单上的提交类型按钮

  <form role="search">
    <label for="search" class="hidden-visually">Search: </label>
    <input type="text" name="search" id="search" v-model="search" />
    <input
      type="image"
      class="btnImg"
      src="https://img.icons8.com/search"
      alt="Search"
    />
  </form>
  

• 图标

<form role="search">
  <label for="searchIcon" class="hidden-visually">Search: </label>
  <input type="text" name="searchIcon" id="searchIcon" v-model="searchIcon" />
  <button type="submit">
    <i class="fas fa-search" aria-hidden="true"></i>
    <span class="hidden-visually">Search</span>
  </button>
</form>

3. 标准

万维网联盟 (W3C) 网络可访问性倡议 (WAI) 为不同的组件制定了 Web 可访问性标准：

• 用户代理无障碍指南 (UAAG)
  • 网络浏览器和媒体播放器，包括一些辅助技术
• 创作工具辅助功能指南 (ATAG)
  • 创作工具
• 网络内容无障碍指南 (WCAG)
  • web 内容——由开发人员、创作工具和可访问性评估工具使用

网络内容无障碍指南 (WCAG)

WCAG 2.1 在 WCAG 2.0 的基础上进行了扩展，以接纳 web 演进过程中的新技术。W3C 鼓励在开发或更新 Web 可访问性策略时使用 WCAG 的最新版本。

WCAG 2.1 四大指导原则 (缩写 POUR)：

• 可感知性
  • 用户必须能够感知所渲染的信息
• 可操作性
  • 表单界面，控件和导航是可操作的
• 可理解性
  • 信息和用户界面的操作必须为所有用户所理解
• 鲁棒性
  • 随着技术的进步，用户能够借助辅助设备访问内容

Web 可访问性倡议——可访问的富互联网应用程序 (WAI-ARIA)

W3C 的 WAI-ARIA 为如何构建动态内容和高阶用户界面控件提供了指导。

• 可访问的富 Internet 应用程序 (WAI-ARIA) 1.2
• WAI-ARIA 创造实践 1.2

4. 资源

文档

• WCAG 2.0
• WCAG 2.1
• 可访问的富 Internet 应用 (WAI-ARIA) 1.2
• WAI-ARIA 创作实践 1.2

辅助技术

• 屏幕阅读器
  • NVDA
  • VoiceOver
  • JAWS
  • ChromeVox
• 缩放工具
  • MAGic
  • ZoomText
  • Magnifier

测试

• 自动化工具
  • Lighthouse
  • WAVE
• 颜色工具
  • WebAim Color Contrast
  • WebAim Link Color Contrast
• 其他辅助性工具
  • HeadingMap
  • Color Oracle
  • Focus Indicator
  • NerdeFocus

用户

世界卫生组织估计，全世界 15%的人口患有某种形式的残疾，其中约 2 - 4%的人严重残疾。估计全世界有 10 亿人，使残疾人成为世界上最大的少数群体。

残疾的种类繁多，大致可分为以下四类：

• 视觉的 - 这些用户可以受益于使用屏幕阅读器、屏幕放大、控制屏幕对比度或盲文显示。
• 听觉的 - 这些用户可以从字幕、文字记录或手语视频中获益。
• 运动的 - 这些用户可以从一系列运动障碍辅助技术中受益：语音识别软件、眼球跟踪、单开关接入、头棒、sip 和 puff 开关、超大轨迹球鼠标、自适应键盘或其他辅助技术。
• 认知的 - 这些用户可以从补充媒体、内容的结构化组织、清晰和简单的写作中获益。

请从 WebAim 查看以下链接，以便用户了解：

• web 可达性透视：探索对每个人的影响和益处
• 网络用户的故事