你是否尝试过使用辅助技术浏览网页？大多数操作系统都自带集成解决方案，在 macOS 中，你可以通过按下 cmd + F5 打开 VoiceOver，在 Windows 中，你可以通过按下 Windows logo key + Ctrl + Enter 启动 Narrator。

当我们使用上述任一辅助技术与这个自动完成组件交互时，它只会告诉我们这是一个文本字段，而不会告知我们选项列表的存在。

我们可以通过 ARIA 属性来改变这种情况。ARIA 规范定义了如何通过提供一组属性来使网页内容对残障人士可用，这些属性允许辅助技术软件理解内容的语义。

标签很重要

你会惊讶于一个简单的标签能多大地提升可用性。

让我们快速将组件设置到一个应用中，并使用 VoiceOver 与其交互。

<template>
<div id="app">
  <div>
    <label>Choose a fruit:</label>

    <autocomplete
      :items="[ 'Apple', 'Banana', 'Orange', 'Mango', 'Pear', 'Peach', 'Grape', 'Tangerine', 'Pineapple']"
    />
  </div>
</div>
</template>

当我们启用 VoiceOver 与组件交互时，我们只知道有一个文本字段的存在，但不知道它的用途，因为标签没有被辅助技术识别。

通过添加 aria-label 或 aria-labelledby 属性，我们就能让用户知道这个输入框的用途。

让我们为自动完成组件添加一个用于 aria-labelledby 属性的 prop。请注意，你也可以选择提供 aria-label，但因为大多数自动完成组件附近都有一个 label 元素，我将利用这一点：

<script>
export default {
  ...
  props {
    ...
    ariaLabelledBy: {
      type: String,
      required: true,
    },
  };
};
</script>
<template>
  ...
  <input
    type="text"
    v-model="search"
    @input="onChange"
    :aria-labelledby="ariaLabelledBy"
  />
  ...
</template>

我将其设置为必需属性，以确保没有人会忘记添加它。如果你的应用中不会在组件周围使用 label 元素，那么使用 aria-label 属性可能更明智。

我们只需要给 label 添加一个 id，并将其作为 prop 提供即可：

<template>
<div id="app">
  <div>
    <label id="fruitLabel">Choose a fruit:</label>

    <autocomplete
      :items="[ 'Apple', 'Banana', 'Orange', 'Mango', 'Pear', 'Peach', 'Grape', 'Tangerine', 'Pineapple']"
      aria-labelled-by="fruitlabel"
    />
  </div>
</div>
</template>

现在辅助技术能够告诉我们，这个文本输入的意图是选择一种水果：

ARIA 属性

尽管标签能极大地提升可用性，但还不够，用户仍然不知道这是一个自动完成元素。要做到这一点，我们需要使用其他 ARIA 属性。

让我们先了解 role 属性是如何工作的。

role 定义了元素的类型。在这里你可以查看所有不同类型的 role。

对于我们的自动完成组件，最合适的 role 是 combobox：

一个复合控件，包含一个单行文本框和另一个元素（如列表框或网格），可以动态弹出以帮助用户设置文本框的值。

因为我们在组件中输入文本时会显示结果列表，所以我们还需要在文本框元素上设置 aria-autocomplete 属性。

aria-autocomplete 属性允许三个不同的值：inline 值表示值补全将发生在文本输入框内部；list 值表示值将出现在与文本输入框相邻的单独元素中弹出；both 值表示将显示值列表，并且当显示时，列表中的一个值会被自动选中并在文本输入框内可见。

因为我们的选项列表在单独的元素中，我们需要使用 list 值。

仅这个属性并不能神奇地知道我们的值列表在文档中的位置，因此我们需要使用 aria-controls 属性来指定。

我们还需要确保自动完成组件使用 aria-haspopup 属性进行标识，并且当结果列表可见时，我们的容器具有 aria-expanded 属性。

最后但同样重要的是，我们还需要为 input 添加 role 属性并设置为 searchbox，为 ul 元素设置为 listbox，为每个 li 设置 role 值。

有了这些属性，辅助技术软件现在能够理解我们正在向用户呈现一个 combobox，它会显示建议值的列表。

<template>
  <div
    class="autocomplete"
    role="combobox"
    aria-haspopup="listbox"
    aria-owns="autocomplete-results"
    :aria-expanded="isOpen"
  >
    <input
      type="text"
      @input="onChange"
      v-model="search"
      @keyup.down="onArrowDown" @keyup.up="onArrowUp" @keyup.enter="onEnter" aria-multiline="false"
      role="searchbox"
      aria-autocomplete="list"
      aria-controls="autocomplete-results"
      aria-activedescendant=""
      :aria-labelledby="ariaLabelledBy"
    />
    <ul
      id="autocomplete-results"
      v-show="isOpen"
      class="autocomplete-results"
      role="listbox"
    >
      <li class="loading" v-if="isLoading">
        Loading results...
      </li>
      <li
        v-else
        v-for="(result, i) in results"
        :key="i"
        @click="setResult(result)" class="autocomplete-result"
        :class="{ 'is-active': i === arrowCounter }"
        role="option"
      >
        {{ result }}
      </li>
    </ul>
  </div>
</template>

箭头键支持

记得我们为自动完成组件添加了键盘支持吗？我们也需要用 ARIA 属性来管理它。

为了让辅助技术知道使用箭头键时哪个选项被选中，我们需要设置两个属性：

aria-activedescendant 需要设置在输入字段中，它将包含视觉上被标识为具有键盘焦点的选项的 ID。

aria-selected 需要设置在视觉上突出显示为选中的选项的 li 属性中。

我们组件中需要更新的一件重要事情是监听器，为了让辅助技术正确识别哪个选项是活动的，我们需要监听 keydown 事件而不是 keyup 事件。

你可以在下面的代码片段中或这个 codepen 中查看完整的源代码。

<script>
  export default {
    name: 'autocomplete',
    props: {
      items: {
        type: Array,
        required: false,
        default: () => [],
      },
      isAsync: {
        type: Boolean,
        required: false,
        default: false,
      },
      ariaLabelledBy: {
        type: String,
        required: true
      }
    },

    data() {
      return {
        isOpen: false,
        results: [],
        search: '',
        isLoading: false,
        arrowCounter: 0,
        activedescendant: ''
      };
    },

    methods: {
      onChange() {
        this.$emit('input', this.search);
        if (自动补全无障碍访问速查表

在这里您可以找到制作自动补全组件无障碍访问所需的所有 ARIA 属性速查表。



元素
属性
值
用法




div
role
combobox
将元素标识为组合框


div
aria-haspopup
listbox
标识元素将弹出包含建议值的列表框


div
aria-owns
IDREF
标识包含建议列表值的元素


div
aria-expanded
true
指示建议值列表当前是展开还是折叠


input
role
searchbox
将元素标识为搜索框


input
aria-labelledby
IDREF
为组合框元素提供标签


input
aria-autocomplete
list
指示当用户输入时，将显示包含建议值列表的元素


input
aria-controls
IDREF



input
aria-activedescendant
IDREF
当结果列表中的某个选项被视觉标识为具有键盘焦点时，将引用该选项


ul
role
listbox
将元素标识为列表框


li
role
option
将元素标识为列表框选项


li
aria-selected
true
将元素标识为被视觉标识为已选中的




IDREF：对元素 ID 属性的引用