# 基礎

ウェブアクセシビリティ(a11y とも呼ばれる)とは、障害のある人、回線速度が遅い人、古かったり壊れたハードウェアを使用している人、単に芳しくない環境にいる人など、誰もが利用できるウェブサイトを作ることを指します。たとえば、ビデオに字幕を追加すると、聴覚障害のあるユーザと、大きな音がして電話の音が聞こえないユーザの両方に役立ちます。同様に、テキストのコントラストを低くしないようにすることで、目の見えないユーザと、明るい日光の下で携帯電話を使おうとしているユーザの両方に役立ちます。

アクセシビリティを始めたいけど、どこを参照すれば良いかわかりませんか？

World Wide Web Consortium (W3C) (opens new window) が提供する Planning and Managing Web Accessibility (opens new window) を参照してください。

# スキップリンク

ユーザが複数のウェブページで繰り返されるコンテンツをスキップできるように、各ページの上部にメインコンテンツエリアに直接行くリンクを追加する必要があります。

すべてのページで最初にフォーカス可能な要素になるため、通常これは App.vue の上部で使われます:

<ul class="skip-links">
  <li>
    <a href="#main" ref="skipLink">Skip to main content</a>
  </li>
</ul>

1
2
3
4
5

フォーカスされていない時にリンクを非表示にするには、以下のスタイルを追加します:

.skipLink {
  white-space: nowrap;
  margin: 1em auto;
  top: 0;
  position: fixed;
  left: 50%;
  margin-left: -72px;
  opacity: 0;
}
.skipLink:focus {
  opacity: 1;
  background-color: white;
  padding: .5em;
  border: 1px solid black;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

ユーザがルートを変更したら、スキップリンクにフォーカスを戻します。これは以下のように ref にフォーカスを呼ぶことで実現できます:

<script>
export default {
  watch: {
    $route() {
      this.$refs.skipLink.focus();
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9

See the Pen Skip to Main by Maria (@mlama007) on CodePen.

メインコンテンツへのスキップリンクについてのドキュメントを読む (opens new window)

# コンテンツの構造

アクセシビリティの最も重要な部分の1つは、デザインがアクセシブルな実装をサポートできることを確認することです。デザインは、色のコントラスト、フォントの選択、テキストのサイズ、言語だけでなく、アプリケーション内でのコンテンツの構造も考慮する必要があります。

# 見出し

ユーザは見出しを使ってアプリケーションをナビゲートできます。アプリケーションの各セクションに説明的な見出しをつけると、ユーザが各セクションの内容を予測しやすくなります。見出しに関しては、いくつかの推奨されるアクセシビリティの実践方法があります:

見出しを順番にネストする: <h1> - <h6>
セクション内の見出しをスキップしない
テキストのスタイル設定の代わりに実際の見出しタグを使用して、見出しの外観を設定する

見出しについてもっと読む (opens new window)

<main role="main" aria-labelledby="main-title">
  <h1 id="main-title">Main title</h1>
  <section aria-labelledby="section-title">
    <h2 id="section-title"> Section Title </h2>
    <h3>Section Subtitle</h3>
    <!-- Content -->
  </section>
  <section aria-labelledby="section-title">
    <h2 id="section-title"> Section Title </h2>
    <h3>Section Subtitle</h3>
    <!-- Content -->
    <h3>Section Subtitle</h3>
    <!-- Content -->
  </section>
</main>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# ランドマーク

ランドマークを使用すると、アプリケーション内のセクションへプログラムによるアクセスができます。支援技術に依存しているユーザは、アプリケーションの各セクションに移動し、コンテンツをスキップすることができます。これを実現するために、ARIA ロール (opens new window)を使用することができます。

HTML	ARIA ロール	ランドマークの目的
header	role="banner"	主な見出し：ページのタイトル
nav	role="navigation"	文書や関連文書をナビゲートする際に使用するのに適したリンク集
main	role="main"	文書の主な内容または中心的な内容。
footer	role="contentinfo"	親文書に関する情報:脚注/著作権/プライバシーポリシーへのリンク
aside	role="complementary"	メインコンテンツをサポートしながらも、それ自身コンテンツとして分離され、意味のあるものになっています
利用不可	role="search"	セクションに含まれるアプリケーションの検索機能
form	role="form"	フォーム関連の要素コレクション
section	role="region"	関連性があり、ユーザがナビゲートする可能性が高いコンテンツ。この要素にはラベルを指定する必要があります

Tip:

レガシーな HTML5 のセマンティック要素をサポートしていないブラウザ (opens new window)との互換性を最大限に高めるために、冗長なランドマークロール属性を持つランドマーク HTML 要素を使用することをお勧めします。

ランドマークについてもっと読む (opens new window)

← サーバサイドレンダリングセマンティクス →