无障碍 (a11y)
Web 无障碍 (简称 a11y),是指确保没有任何障碍阻碍残疾人与万维网上的网站进行互动或访问的包容性做法。Vuetify 组件是为所有基于鼠标的操作提供键盘交互,并在适当的情况下利用 HTML5 语义元素。
激活器插槽
Vuetify 对许多组件使用激活插槽,如 v-menu
, v-dialog
等等。 在某些情况下,这些 activator 元素应该具有特定的 a11y 属性,将它们与它们的相应内容联系起来。 为了做到这一点,我们通过范围插槽 (slots scope) 传递必要的 a11y 选项。
html
<!-- Vue Template HTML Markup -->
<template>
<v-menu>
<template v-slot:activator="{ props }">
<v-btn text="Click me" v-bind="props"></v-btn>
</template>
<v-list>
<v-list-item @click="method">
<v-list-item-title>Option 1</v-list-item-title>
</v-list-item>
<v-list-item disabled>
<v-list-item-title>Option 2</v-list-item-title>
</v-list-item>
<v-list-item @click="method">
<v-list-item-title>Option 3</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</template>
当激活器元素被渲染时,它现在将包含绑定的 a11y 属性
html
<!-- Rendered `v-btn` HTML Output -->
<button aria-expanded="false" aria-haspopup="true" role="button" type="button">
Click me
</button>
焦点管理和键盘交互
除了属性之外,诸如 v-menu
等组件也支持通过按 ↑ 和 ↓ 在选项之间导航。
v-menu
当位于 v-menu
内时,v-list-item
将自动配置 role 为 menuitem 。有关组件功能的更多信息,请浏览 菜单。
额外资源
虽然 Vuetify 尽可能保证你在开发应用程序中轻松地使用 a11y,但有时候仍然需要额外的信息。 下面可以找到有用的资源列表。