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の設定から以下のように追加します。
{
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-autofocus
autofocus属性を設定した要素がないことを確認します。
no-distracting-elements
<blink>や<marquee>などの気の散る要素がないことを確認します。
no-onchange
@changeイベントを指定した場合は同様に@blurイベントも指定するか、@blurイベントだけの指定になっているかを確認します。
no-redundant-roles
デフォルトでrole属性をもつ要素に対して、更にrole属性を設定して冗長になっていないかを確認します。
no-static-element-interactions
インタラクティブなroleを持たない要素（divやspanなど）にインタラクティブな操作を指定していないことを確認します。
role-has-required-aria-props
あるrole属性に対して必要なARIA属性がすべて設定されていることを確認します。
tabindex-no-positive
tabindex属性で正の値（1以上）が設定されていないことを確認します。
活用事例
eslint-plugin-vuejs-accessibilityを実際に活用している事例を紹介します。
「Vue / Nuxt利用者が気軽に情報を得ることができ、またVue / Nuxt初学者がまずここを訪ねてみる」 と思える、そんなVue / Nuxtの情報が集まる広場。ハードルは低く、わちゃわちゃと知見が集まる広場へ。 ✍️ Articles: Vue, Nuxt, related libraries
Discussion