マークアップ全般

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

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

適切なマークアップ

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

ガイドライン

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

チェック内容
  • マークアップ: 見出し、段落、箇条書きなどが適切にマークアップされている。(事例参照)

意図

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

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

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

対応するWCAG 2.1の達成基準

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

ガイドライン

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

チェック内容
  • マークアップ: validatorやlinterでチェックが通る。

意図

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

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

対応するWCAG 2.1の達成基準

コンポーネント

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

ガイドライン

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

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

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

チェック内容
  • マークアップ: Reactコンポーネントなど、標準的なHTML以外を用いて実装されているコンポーネントについて、スクリーン・リーダーで問題なく利用できることを確認している。

意図

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

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

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

対応するWCAG 2.1の達成基準