マークアップ全般

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

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

適切なマークアップ

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

ガイドライン

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

チェック内容
デザイン(チェックID: 0541
  • 見出し(h1h6)、箇条書き(ul, ol, dl)、表(table)など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。

コード(チェックID: 0551
  • 見出し(h1h6)、箇条書き(ul, ol, dl)、表(table)などを用いてセマンティクスが適切にマークアップされている。

意図

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

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

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

対応するWCAG 2.1の達成基準

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

ガイドライン

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

チェック内容
コード(チェックID: 0571
  • validatorやlinterでチェックが通る。

意図

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

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

対応するWCAG 2.1の達成基準

コンポーネント

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

ガイドライン

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

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

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

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

意図

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

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

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

対応するWCAG 2.1の達成基準