Web accessibility (a11y for short), is the inclusive practice of ensuring there are no barriers that prevent the interaction with, or access to, websites on the World Wide Web by people with disabilities. Vuetify components are built to provide keyboard interactions for all mouse-based actions and utilize HTML5 semantic elements where applicable.
Google が a11y を念頭に置いてコンポーネントを作成する方法について詳しく説明しています。また、アプリケーションの作成時にベスト プラクティスを使用していることを確認する方法の例も示します（Vuetify でデフォルトでサポートされている範囲を超えています）。アクセシビリティの実装の詳細については、implementing accessibility を参照してください。
Vuetifyは v-menu や v-dialogなどの多くのコンポーネントにアクティベータスロットを使用します。場合によっては、これらの activator 要素は、対応するコンテンツに関連付ける特定の a11y 属性を持つ必要があります。これを実現するために、スロットスコープを介して必要なa11yオプションを渡します。
activator要素がレンダリングされると、バインドされたa11y属性が含まれるようになります。
コンポーネントのスロットを利用し、要素にバインドするために適切な aria 属性が必要な場合があります。(v-slot) を使用する場合、上記のv-menuの例のように、スロットスコープでこの方法が受け渡されます。ただし、適切なサポートを確実にするために属性を適切なコンポーネントにバインドする必要がある、より複雑なコンポーネントもあります。
v-select コンポーネントは、必要なすべての a11y 属性を自動的に構成します。各項目は、デフォルトで対応するid、aria-labelledby、aria-selectedおよびrolesを生成します。
レンダリングされると、v-selectコンポーネントのコンテンツは次のようになります:
しかし、スロットを使用する場合、適切なアリアのセットアップを取得するために、渡されたプロパティを利用する必要がある条件があります。この情報は、v-autocomplete、v-combobox、およびv-overflow-btnにも適用され、それらがすべてv-selectコンポーネントを拡張します。
スロットにv-list-item コンポーネントを提供する場合、aria属性は attrs データプロパティを通じて渡され、v-bindでバインドできます。
ラベルを正しい option に適切に関連付けるには、attrs.id をv-list-item-titleの aria-labelled-by にバインドする必要があります。これにより、テキストが適切に関連付けられます。スロットを使用していない場合は、自動的に行われます。
属性以外にも、v-menu などのコンポーネントで↑と↓のキーによるオプション間移動のような操作もサポートされます。
v-list-item-groupコンポーネントは、tabキーを押したときにv-list-itemを対話可能かつナビゲート可能にします。また、v-list-itemがlistitemのロールを持つように設定します。コンポーネント機能の詳細については、List-item group に移動してください。
Vuetify は、アプリケーションで a11y をできるだけ簡単にしようと試みますが、追加の情報が必要な場合があります。役に立つリソースのリストを以下に示します。