ページ構造のアクセシビリティ

このルール群では、見出しの内容と階層、ランドマーク、フォームのラベル、iframe の説明、 画像の代替テキスト、音声・動画の字幕、操作する要素のフォーカスを確認します。 コンポーネントに新しい領域や埋め込みコンテンツ、画像、メディアプレイヤーを追加するときに、ページ構造を見直してください。

たとえば、見出しの階層では、見出しのレベルを飛ばした場合の変更例を確認できます。 悪い例と良い例を比較し、掲載された設定でルールを有効にして、vp run lint を実行してください。 アクセシビリティの全ルールでは、関連するルールも確認できます。

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

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

a11y/heading-has-content

見出しに支援技術で読める内容を用意します。

悪い例 · 良い例

既定の重大度: 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/heading-has-content": "warn"
      }
    },
  },
});

vp run lint

悪い

h2 でレベル 2 の見出しを宣言していますが、見出しの内容が空です。

<template>
  <h2></h2>
</template>

良い

同じ h2 に Billing settings の内容を入れます。

<template>
  <h2>Billing settings</h2>
</template>

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

実装 · 全ルール

a11y/heading-levels

見出しの階層を飛ばした指定を検出します。

悪い例 · 良い例

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

設定（Vite+）

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

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

vp run lint

悪い

見出しが h1 から h3 に飛び、レベル 2 を省略しています。

<template>
  <h1>Account</h1>
  <h3>Billing</h3>
</template>

良い

請求設定の見出しを h2 にし、階層を順に並べます。

<template>
  <h1>Account</h1>
  <h2>Billing</h2>
</template>

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

実装 · 全ルール

a11y/iframe-has-title

iframe に内容を説明する title を指定します。

悪い例 · 良い例

既定の重大度: 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/iframe-has-title": "warn"
      }
    },
  },
});

vp run lint

悪い

決済画面の iframe に URL はありますが、内容を説明する title がありません。

<template>
  <iframe src="/checkout"></iframe>
</template>

良い

title="Checkout preview" で iframe の内容を説明します。

<template>
  <iframe src="/checkout" title="Checkout preview"></iframe>
</template>

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

実装 · 全ルール

a11y/img-alt

画像に alt 属性を指定します。装飾画像は空の alt を使います。

悪い例 · 良い例

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

設定（Vite+）

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

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

vp run lint

悪い

アバター画像に alt 属性がなく、代替テキストが指定されていません。

<template>
  <img src="/avatar.png" />
</template>

良い

alt="User avatar" で画像の代わりとなる文字を指定します。

<template>
  <img src="/avatar.png" alt="User avatar" />
</template>

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

実装 · 全ルール

a11y/interactive-supports-focus

操作可能な 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/interactive-supports-focus": "warn"
      }
    },
  },
});

vp run lint

悪い

span に button のロールとクリックハンドラーを付けても、キーボードでフォーカスできる要素にはなりません。

<template>
  <span role="button" @click="open">Open</span>
</template>

良い

フォーカスできる標準の button に変更し、同じ open を実行します。

<template>
  <button type="button" @click="open">Open</button>
</template>

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

実装 · 全ルール

a11y/label-has-for

label を対象のフォーム部品と関連付けます。

悪い例 · 良い例

既定の重大度: 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/label-has-for": "warn"
      }
    },
  },
});

vp run lint

悪い

離れた label に for がなく、入力欄を囲んでもいないため関連付けがありません。

<template>
  <label>Email</label>
  <input id="email" />
</template>

良い

for="email" を入力欄の ID と一致させて関連付けます。

<template>
  <label for="email">Email</label>
  <input id="email" />
</template>

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

実装 · 全ルール

a11y/landmark-roles

ランドマーク role の配置と重複を検査します。

悪い例 · 良い例

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

設定（Vite+）

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

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

vp run lint

悪い

同じテンプレートに main が二つあり、主要な領域が重複しています。

<template>
  <main>Dashboard</main>
  <main>Settings</main>
</template>

良い

Dashboard を main として残し、Settings を名前付きの nav に変更します。

<template>
  <main>Dashboard</main>
  <nav aria-label="Settings">...</nav>
</template>

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

実装 · 全ルール

a11y/media-has-caption

音声・動画に字幕を用意します。

悪い例 · 良い例

既定の重大度: 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/media-has-caption": "warn"
      }
    },
  },
});

vp run lint

悪い

動画に再生操作はありますが、字幕の track がありません。

<template>
  <video src="/demo.mp4" controls />
</template>

良い

同じ動画に kind="captions" の track を追加して英語の字幕を指定します。

<template>
  <video src="/demo.mp4" controls>
    <track kind="captions" src="/demo.en.vtt" srclang="en" label="English" />
  </video>
</template>

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

実装 · 全ルール