操作とフォーカスのアクセシビリティ

このルール群では、キーボード操作に関わる指定、フォーカス、マウスのイベント処理、支援技術から隠す要素、要素同士の参照を確認します。 独自の操作部品を追加したり、表示の切り替えやイベントの処理を変更したりするときに確認してください。

たとえば、フォーカスと aria-hidden の関係では、フォーカスできる要素を支援技術から隠してしまう指定の例を確認できます。 悪い例と良い例を比較し、掲載された設定を使って、vp run lint を実行してください。 アクセシビリティの全ルールでは、関連するルールも確認できます。

このページに、各ルールの目的・前提・設定と、省略のない悪い例・良い例をまとめています。変更箇所は行の色で示します。コードをコピーすると、ソースコード全体を取得できます。各例に現在の対応範囲も明記しています。

全ルール · ルールのオプション · ESLint 移行対応表 · プロジェクトの検査 · 子への属性の継承

a11y/mouse-events-have-key-events

マウス操作と対応する focus / blur 操作を用意します。

悪い例 · 良い例

既定の重大度: warning
プリセット: happy-path, nuxt, ecosystem, opinionated
自動修正: なし。修正内容を確認してください
適用範囲: Vue SFC のテンプレートと各ブロック。ルールに必要な script の文脈も例に含めています。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "a11y/mouse-events-have-key-events": "warn"
      }
    },
  },
});

vp run lint

悪い

プレビューの表示切り替えを mouseenter と mouseleave だけに指定しています。

<template>
  <div @mouseenter="showPreview" @mouseleave="hidePreview">Preview</div>
</template>

良い

フォーカスできる button で、同じ操作を focus と blur からも実行します。

<template>
  <button
    type="button"
    @focus="showPreview"
    @blur="hidePreview"
    @mouseenter="showPreview"
    @mouseleave="hidePreview"
  >
    Preview
  </button>
</template>

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール

a11y/no-access-key

環境のショートカットと衝突し得る accesskey を検出します。

悪い例 · 良い例

既定の重大度: warning
プリセット: happy-path, nuxt, ecosystem, opinionated
自動修正: なし。修正内容を確認してください
適用範囲: Vue SFC のテンプレートと各ブロック。ルールに必要な script の文脈も例に含めています。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "a11y/no-access-key": "warn"
      }
    },
  },
});

vp run lint

悪い

accesskey="s" がブラウザーや支援技術のショートカットと競合する可能性があります。

<template>
  <button accesskey="s">Save</button>
</template>

良い

accesskey を取り除き、通常の Save ボタンは残します。

<template>
  <button>Save</button>
</template>

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール

a11y/no-aria-hidden-on-focusable

フォーカス可能な要素を aria-hidden で支援技術から隠す指定を検出します。

悪い例 · 良い例

既定の重大度: error
プリセット: happy-path, nuxt, ecosystem, opinionated
自動修正: なし。修正内容を確認してください
適用範囲: Vue SFC のテンプレートと各ブロック。ルールに必要な script の文脈も例に含めています。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "a11y/no-aria-hidden-on-focusable": "error"
      }
    },
  },
});

vp run lint

悪い

フォーカスできる Close ボタンを aria-hidden="true" でアクセシビリティ ツリーから隠しています。

<template>
  <button aria-hidden="true" @click="close">Close</button>
</template>

良い

aria-hidden を取り除いてボタンを支援技術から参照できる状態にし、aria-label に Close を指定します。

<template>
  <button aria-label="Close" @click="close">Close</button>
</template>

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール

a11y/no-autofocus

意図せずフォーカスを移動させる autofocus を検出します。

悪い例 · 良い例

既定の重大度: warning
プリセット: happy-path, nuxt, ecosystem, opinionated
自動修正: なし。修正内容を確認してください
適用範囲: Vue SFC のテンプレートと各ブロック。ルールに必要な script の文脈も例に含めています。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "a11y/no-autofocus": "warn"
      }
    },
  },
});

vp run lint

悪い

検索の入力欄に autofocus があり、表示時に利用者の操作なしでフォーカスを要求します。

<template>
  <input autofocus name="query" />
</template>

良い

autofocus を取り除き、検索欄はそのまま残します。

<template>
  <input name="query" />
</template>

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール

a11y/no-distracting-elements

marquee や blink などの注意をそらす要素を検出します。

悪い例 · 良い例

既定の重大度: warning
プリセット: happy-path, nuxt, ecosystem, opinionated
自動修正: なし。修正内容を確認してください
適用範囲: Vue SFC のテンプレートと各ブロック。ルールに必要な script の文脈も例に含めています。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "a11y/no-distracting-elements": "warn"
      }
    },
  },
});

vp run lint

悪い

marquee を使って文字を自動的に動かしています。

<template>
  <marquee>Limited offer</marquee>
</template>

良い

同じ案内を p に入れ、自動的に動く要素を使いません。

<template>
  <p>Limited offer</p>
</template>

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール

a11y/no-i-for-icon

アイコン用の i 要素を検出し、意味に合う要素を勧めます。

悪い例 · 良い例

既定の重大度: warning
プリセット: happy-path, nuxt, ecosystem, opinionated
自動修正: なし。修正内容を確認してください
適用範囲: Vue SFC のテンプレートと各ブロック。ルールに必要な script の文脈も例に含めています。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "a11y/no-i-for-icon": "warn"
      }
    },
  },
});

vp run lint

悪い

アイコンの表示に i 要素を使っています。i が持つテキスト上の意味は、アイコンだけのボタンが行う操作を説明するものではありません。

<template>
  <button>
    <i class="material-icons">delete</i>
  </button>
</template>

良い

装飾用の span に aria-hidden を指定してアイコンを支援技術から隠し、別の Delete item の文字でボタンの操作を説明します。

<template>
  <button>
    <span class="material-icons" aria-hidden="true">delete</span>
    <span class="sr-only">Delete item</span>
  </button>
</template>

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール

a11y/no-redundant-roles

要素本来の意味と重複する ARIA role を検出します。

悪い例 · 良い例

既定の重大度: warning
プリセット: happy-path, nuxt, ecosystem, opinionated
自動修正: 対応している診断で利用できます
適用範囲: Vue SFC のテンプレートと各ブロック。ルールに必要な script の文脈も例に含めています。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "a11y/no-redundant-roles": "warn"
      }
    },
  },
});

vp run lint

悪い

button は元から button の役割を持つため、同じ role を重複して指定しています。

<template>
  <button role="button">Save</button>
</template>

良い

重複する role を取り除き、HTML の標準の役割を使います。

<template>
  <button>Save</button>
</template>

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール

a11y/no-refer-to-non-existent-id

文書内に存在しない ID への参照を検出します。

悪い例 · 良い例

既定の重大度: warning
プリセット: happy-path, nuxt, ecosystem, opinionated
自動修正: なし。修正内容を確認してください
適用範囲: Vue SFC のテンプレートと各ブロック。ルールに必要な script の文脈も例に含めています。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "a11y/no-refer-to-non-existent-id": "warn"
      }
    },
  },
});

vp run lint

悪い

aria-labelledby が save-label を参照していますが、その ID の要素がありません。

<template>
  <button aria-labelledby="save-label">Save</button>
</template>

良い

一致する ID の span を追加し、ボタンの名前を参照できるようにします。

<template>
  <span id="save-label">Save changes</span>
  <button aria-labelledby="save-label">Save</button>
</template>

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール