マークアップ全般

これらのガイドラインは、マークアップ全般に関するもので、すべてのコンテンツが対象です。

これらのガイドラインは、すべての項目が[MUST]です。

[MUST]文書構造を適切にマークアップする

文書構造などのセマンティクスを表す適切なマークアップをする。

意図

スクリーン・リーダーなどの支援技術がコンテンツを正しく認識し、ユーザーに適切な形で提示できるようにする。

  • 適切なマークアップにより、スクリーン・リーダーで見出しや箇条書きの項目を探しやすくなる。

  • スクリーン・リーダーなどの支援技術には、見出しやリンクの一覧表示機能など、適切なマークアップを前提に実装されている機能がある。

対応するWCAG 2.1の達成基準

SC 1.3.1:

参考情報

チェック内容

チェックID:0541

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

見出しとして表現されるべきものが、設計資料で明確になっている。

チェックID:0542

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

設計資料で、箇条書き、表などとして表現されるべきものが明確になっていて、使用するべきHTMLの要素やデザイン・システムのコンポーネントが明示されている。

チェックID:0551

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

見出しが、設計資料に従って適切に実装されている。

実装方法の例:見出しの実装
Web

h1h6でマークアップする。

iOS

UIAccessibilityTraits.headerをセットする。

チェックID:0552

対象

コード

対象プラットフォーム

Web

重篤度

[MAJOR]

箇条書き、表などのセマンティクスが、設計資料に従って適切に実装されている。

実装方法の例:セマンティクスに応じた実装
Web
  • 箇条書き(uloldl)、表(table)などを使用する

  • デザイン・システムの適切なコンポーネントを使用する

チェックID:0561

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[NORMAL]

設計資料で見出しとして示されているものを、スクリーン・リーダーが見出しとして認識している。

NVDAによるチェック実施方法の例

以下の手順で見出しリストを表示して、ページ中の見出しが過不足なく表示されていることを確認する。

  1. ブラウズ・モードで要素リストを表示(NVDA+F7

  2. 「種別」を「見出し」に設定(Alt+H

axe DevToolsによるチェック実施方法の例

以下のいずれの問題も出ないことを確認する。

iOS VoiceOverによるチェック実施方法の例

ローター・ゼスチャーで「見出し」を選んだ上で、1本指の下および上方向のフリックですべての見出しに到達できることを確認する。

参考:1本指による上および下方向へのフリック

チェックID:0562

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

スクリーン・リーダーが、表を適切に認識していて、表中のセルも適切に認識している。

NVDAによるチェック実施方法の例
  • 以下の手順で表を発見可能:

    1. ブラウズ・モードでページの先頭に移動(Ctrl+Home

    2. 前後の表への移動(TまたはShift+Tキー)で、表に移動

  • 以下の手順で、表中のセル間を移動しながら読み上げが可能:

    1. ブラウズ・モードで表の先頭部分を探す

    2. 以下のキー操作でセル間を移動し、移動先のセルの内容が読み上げられることを確認する:

      • Ctrl+Alt+:左のセル

      • Ctrl+Alt+:右のセル

      • Ctrl+Alt+:下のセル

      • Ctrl+Alt+:上のセル

読み上げられる内容:

上記のセル間移動の操作を行った場合、以下の内容が読み上げられます。

  • 左右の移動:移動先のセルの列見出し、列の番号、セルの内容

  • 上下の移動:移動先のセルの行見出し、行の番号、セルの内容

単にカーソルキーを操作した場合は、以下のような内容が読み上げられます。

  • 上下矢印:前後のセルへ移動して読み上げ。ただしセル内で開業がある場合などは、セルの1部分だけが読み上げられることもある。

  • 左右矢印:1文字ずつ移動して読み上げ。空のセルでは、1つだけスペースがあるような挙動になる。

[MUST]文法的に正しいマークアップ

文法的に正しい、仕様に準拠したマークアップを行う。

意図

スクリーン・リーダーなどの支援技術が、Webページを正確に解析できるようにする。

HTML要素の開始タグと終了タグが適切に記述されていること、適切ナ入れ子構造になっていることで、様々なユーザー・エージェントや支援技術が期待した動作をする。

対応するWCAG 2.1の達成基準

SC 4.1.1:

参考情報

チェック内容

チェックID:0571

対象

コード

対象プラットフォーム

Web

重篤度

[MAJOR]

validatorやlinterでチェックが通る。

[MUST]コンポーネントをアクセシブルにする

標準的なHTMLとは違う挙動をするコンポーネントを使用する場合、以下を満たす。

  • 支援技術を含むユーザー・エージェントが取得できる形で、適切にAccessibleNameとroleを定義する。

  • 支援技術を含むユーザー・エージェントが、コンポーネントの状態、プロパティー、ユーザーが設定可能な値を設定でき、これらの変更を認知できるようにする。

意図

支援技術が、例えばJavaScriptで実装されているような独自のコンポーネントを問題なく扱えるようにする。

  • 例えば開閉できるメニュー、タブなど、標準的なHTMLだけでは実装できないようなコンポーネントについて、スクリーン・リーダーがそれはどのようなコンポーネントで、どのような状態にあのかを正確にユーザーに伝え、かつユーザーの操作を可能にする。

  • ユーザーの操作によってコンポーネントの状態が変化する場合は、その変化が認知できるようにする。

対応するWCAG 2.1の達成基準

SC 4.1.2:

参考情報

チェック内容

チェックID:0581

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

独自実装が必要なUIコンポーネントについて、スクリーン・リーダー利用時の挙動およびキーボードによる操作時の挙動が設計資料で示されている。

チェックID:0586

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

すべてのUIコンポーネントがキーボードによる操作、スクリーン・リーダー利用時の操作が可能になっている。

Webの場合
  • 適切なHTMLのマークアップをする。

  • デザイン・システムの適切なコンポーネントを用いる。

  • 独自実装のUIコンポーネントをアクセシブルにする。

モバイルの場合
  • 可能な限り適切な標準コンポーネントを用いる。

  • 独自実装のUIコンポーネントをアクセシブルにする。

チェックID:0587

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

複数の状態を持つコンポーネントは、その状態が視覚的にもスクリーン・リーダーでも分かるようになっている。(例:タブUIの現在選択されているタブ、状態に応じて変化するアイコンなど)

チェックID:0591

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

静的なテキストではない部分(例:開閉するメニュー、タブ・パネル、日付選択UI)も、スクリーン・リーダーで問題なく操作できる。

NVDAによるチェック実施方法の例

以下のすべてを満たしている:

  • ブラウズ・モードでその部分を読み上げさせたとき、何らかの操作を受け付けるものであることが分かる

  • その部分で提供されているすべての機能を、最低限フォーカス・モードにおいてキーボードで操作できる

  • 操作の結果表示が変わる場合、そのことが読み上げられる内容から理解できる

  • 操作の結果表示が変わる場合、ブラウズ・モードで変更後の表示内容を読み上げさせて確認できる

チェックID:0592

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

複数の状態を持つコンポーネントは、スクリーン・リーダー利用時にもその状態が分かるようになっている。(例:タブUIの現在選択されているタブ、状態に応じて変化するアイコンなど)