eslint-plugin-vuejs-accessibilityとは何か
eslint-plugin-vuejs-accessibilityは、Vue.jsのコンポーネントにおけるアクセシビリティの問題点を検出するためのESLintプラグインです。
類似するものとしてeslint-plugin-jsx-a11yがあります。これはReactのJSXにおけるアクセシビリティの問題を検出するためのESLintプラグインです。今あるルールはこのプラグインから参考になっている部分がいくつかあります。
eslint-plugin-vue-a11yとの違い
元々は個人で開発していたeslint-plugin-vue-a11yというものがあります。
こちらのeslint-plugin-vue-a11yは現在メンテナンスがされておりません。今回紹介するeslint-plugin-vuejs-accessibilityはvue-a11yというOrganizationsにて現在メンテナンスされているのでこちらを使うことをお勧めします。
インストール
それぞれのパッケージマネージャからインストールします。
npm
npm install --save-dev eslint-plugin-vuejs-accessibility
yarn
yarn add --dev eslint-plugin-vuejs-accessibility
pnpm
pnpm add -D eslint-plugin-vuejs-accessibility
設定
ESLintの設定から以下のように追加します。
Flat Config（ESLint v9以降）
eslint.config.js ファイルに以下のように追加します。
import pluginVueA11y from "eslint-plugin-vuejs-accessibility";
export default [
...pluginVueA11y.configs["flat/recommended"],
{
rules: {
// 個別でオーバーライドしたいルールは以下のように設定できます。
"vuejs-accessibility/alt-text": "warn"
}
}
];
ESLint v9以前
.eslintrc.* ファイルに以下のように追加します。
{
plugins: [
'vuejs-accessibility'
],
}
適応したいルールを個別で設定できます。
{
rules: {
'vuejs-accessibility/label-has-for': 'error',
// ...
}
}
個別指定ではなく、extends より推奨となっているルールをまとめて使うこともできます。
{
extends: [
'plugin:vuejs-accessibility/recommended'
],
}
推奨となっているルールはRule Overviewより確認できます。
ルールについての説明
それぞれのルールについて簡単に説明します。
alt-text
代替テキストを必要とするすべての要素に必要な属性が設定されていることを確認します。
anchor-has-content
<a> 要素がコンテンツを持っていることを確認します。
aria-props
存在する正しいARIA属性で設定されていることを確認します。
aria-role
存在する正しい role 属性で設定されていることを確認します。
aria-unsupported-elements
ARIA属性をサポートされていない要素にARIA属性が設定されていないことを確認します。
click-events-have-key-events
@click イベントを指定する要素は、同様に @keyup 、@keydown、@keypress のいずれかのイベントを指定されていることを確認します。
form-control-has-label
フォーム要素が対応する <label> 要素をもつ、あるいは aria-label 属性か aria-labelledby 属性が設定されていることを確認します。
heading-has-content
見出し（<h1>〜<h6>）要素がコンテンツを持っていることを確認します。
iframe-has-title
<iframe> 要素に title 属性が設定されていることを確認します。
interactive-supports-focus
インタラクティブな要素がフォーカス可能であることを確認します。
label-has-for
フォーム要素が <label> 要素内でネストされており、<label> 要素の for 属性にフォーム要素のID値が設定されていることを確認します。
media-has-caption
メディア要素が字幕データを挿入できる <track> 要素を持っていることを確認します。muted 属性が設定されている場合は除外されます。
mouse-events-have-key-events
いずれかのマウスイベント（@mouseenter、@mouseover、@mouseout、@mouseleave、@hover）を持つ要素には、同様に @focus 、@blur のいずれかのイベントを指定しているかを確認します。
no-access-key
accesskey 属性を設定した要素がないことを確認します。
no-aria-hidden-on-focusable
aria-hidden="true" がフォーカス可能な要素やその要素の親に指定されていないことを確認します。
no-autofocus
autofocus 属性を設定した要素がないことを確認します。
no-distracting-elements
<blink> や <marquee> などの気の散る要素がないことを確認します。
no-onchange
@change イベントを指定した場合は同様に @blur イベントも指定するか、@blur イベントだけの指定になっているかを確認します。
no-redundant-roles
デフォルトで role 属性をもつ要素に対して、更に role 属性を設定して冗長になっていないかを確認します。
no-role-presentation-on-focusable
role="presentation" がフォーカス可能な要素やその要素の親に指定されていないことを確認します。
no-role-presentation-on-focusable | eslint-plugin-vuejs-a11y
no-static-element-interactions
インタラクティブな role を持たない要素（div や span など）にインタラクティブな操作を指定していないことを確認します。
role-has-required-aria-props
ある role 属性に対して必要なARIA属性がすべて設定されていることを確認します。
tabindex-no-positive
tabindex 属性で正の値（1 以上）が設定されていないことを確認します。
活用事例
eslint-plugin-vuejs-accessibilityを実際に活用している事例を紹介します。
Discussion