Part BATAG 2.0

Part B: アクセシブルな
コンテンツの生成支援

オーサリングツールが、コンテンツ制作者によるアクセシブルなウェブコンテンツの作成を 支援・促進するための原則です。ツールの機能設計によって、ウェブ全体のアクセシビリティ向上に貢献できます。


B.1

アクセシブルなコンテンツの自動生成

Fully automatic processes produce accessible content

ツールが自動的にコンテンツを生成する場合、そのコンテンツはアクセシブルでなければなりません。

B.1.1自動生成コンテンツのアクセシビリティ

テンプレート、自動変換、自動フォーマットなどが生成するコンテンツがWCAGに準拠する必要があります。

実例:WordPress
テーマが生成するHTML構造がセマンティックで、自動挿入される画像ギャラリーにalt属性が含まれる。
B.1.2アクセシビリティ情報の保持

コンテンツの変換・コピー時に、既存のアクセシビリティ情報(alt属性、ラベル等)を保持します。

実例:Google Docs → HTML変換
Google Docsで設定した見出しレベルやalt属性が、HTML書き出し時にそのまま保持される。
B.2

アクセシブルなコンテンツ作成の支援

Authors are supported in producing accessible content

コンテンツ制作者がアクセシブルなコンテンツを作成できるよう、ツールが積極的に支援します。

B.2.1アクセシブルなコンテンツ作成を可能にする

テキストの代替(alt属性)、キャプション、ラベルなどを入力する手段をUIで提供します。

実例:WordPress メディアライブラリ
画像アップロード時に「代替テキスト」フィールドが表示され、入力を促すガイダンスが添えられる。
B.2.2アクセシビリティ情報の入力をガイドする

制作者がアクセシビリティ関連の情報を正しく入力できるよう、ヒントやガイダンスを提供します。

実例:Drupal CKEditor
画像挿入ダイアログで「代替テキストの書き方」のヘルプリンクと、具体例のプレースホルダーが表示される。
B.2.3自動テキスト生成時のアクセシビリティ保持

テキストの自動生成(日付、ファイル名の自動入力等)時にアクセシビリティ品質を維持します。

実例:Wix
自動生成されたボタンテキストが「ここをクリック」ではなく、具体的なアクション名になっている。
B.2.4アクセシブルなテンプレートの提供

テンプレートギャラリーにアクセシブルなテンプレートを含め、その情報を明示します。

実例:Squarespace
テンプレート選択画面でアクセシビリティ対応マークが付いたテンプレートが明示され、優先表示される。
B.2.5アクセシブルなプレ作成コンテンツの提供

ストック画像、アイコン、動画などのプレ作成コンテンツにアクセシビリティ情報を含めます。

実例:WordPress プラグイン
ストック画像プラグインが、画像にあらかじめ説明文を含め、挿入時にalt属性として自動設定する。
B.3

コンテンツのアクセシビリティ改善の支援

Authors are supported in improving the accessibility of existing content

作成済みコンテンツのアクセシビリティ問題を検出・修正する機能を提供します。

B.3.1アクセシビリティチェック機能

コンテンツのアクセシビリティ問題を自動検出し、制作者に報告する機能を提供します。

実例:WordPress(プラグイン)
Sa11y やWP Accessibility Checkerなどのプラグインが、公開前にalt未設定、コントラスト不足、見出し順序の問題を検出。
B.3.2修正の支援

検出された問題の修正方法を説明し、可能な場合は自動修正オプションを提供します。

実例:Drupal
アクセシビリティモジュールが問題を検出した際、「修正方法」のリンクとクイックフィックスボタンが表示される。
B.4

アクセシビリティ機能の推進・統合

Authoring tools promote and integrate their accessibility features

アクセシビリティ機能がツールに統合され、制作者に推進されるようにします。

B.4.1アクセシビリティ機能の利用を促進

アクセシビリティ関連の機能が目立つ場所に配置され、無効化されにくいようにします。

実例:Notion
画像ブロック追加時にalt属性入力欄がデフォルトで表示され、非表示にするオプションがない。
B.4.2アクセシビリティ機能のドキュメント

ツールのヘルプやドキュメントに、アクセシビリティ機能の使い方が含まれている必要があります。

実例:WordPress ドキュメント
公式ハンドブックに「アクセシブルなコンテンツの作成方法」セクションがあり、具体的な手順が記載されている。

インタラクティブデモ

画像アップロード時のalt属性入力支援の有無を比較してみましょう。 「ファイルを選択」ボタンからフローを開始してください。

画像アップロード時のalt属性支援

問題のあるCMS — 画像アップロード

画像をドラッグ&ドロップ

問題点:

  • 代替テキストの入力を求めない
  • alt属性なしで画像が挿入される
  • 装飾画像かどうかの選択肢がない

Part B 適合チェックリスト

オーサリングツールがPart Bの要件を満たしているか確認するためのチェックリストです。

テンプレートが生成するHTMLがセマンティックでWCAGに適合
画像アップロード時にalt属性の入力UIが表示される
alt属性未入力時に警告が表示される
装飾画像のオプション(alt="")が提供されている
動画にキャプション/字幕を追加する機能がある
コンテンツ変換時にアクセシビリティ情報が保持される
アクセシビリティチェック機能(組込み/プラグイン)がある
問題の自動修正または修正ガイダンスが提供される
アクセシブルなテンプレートが優先的に提供される
ドキュメントにアクセシビリティ関連の説明がある

Part Bのポイント

Part Bは、ツール開発者が「良いデフォルト」を設計することの重要性を強調しています。 制作者がアクセシビリティの専門知識を持たなくても、ツールの設計によって 自然とアクセシブルなコンテンツが作成される仕組みを目指しています。 これは「Accessibility by Default」のアプローチです。