Part AATAG 2.0

Part A: オーサリングツール自体の
アクセシビリティ

オーサリングツールのUI自体が、障害のあるコンテンツ制作者にとってアクセシブルであることを求めるパートです。 ツールのUIがアクセシブルでなければ、障害のある人はコンテンツを作成・編集できません。


A.1

ツールのUIがアクセシビリティガイドラインに適合

Web-based functionality is accessible

ウェブベースのオーサリングツールは、WCAGの適合レベルに準拠しなければなりません。

A.1.1ウェブベースの機能がWCAGに適合

オーサリングツール自体のUIがウェブベースの場合、WCAG 2.0のレベルAおよびAAに適合する必要があります。

例:CMSの管理画面が適切なコントラスト比を持ち、すべてのフォーム要素にラベルが付与されている。
A.1.2非ウェブベースの機能もアクセシブル

デスクトップアプリ等の場合は、プラットフォームのアクセシビリティガイドラインに従います。

例:デスクトップ版エディタがOS のアクセシビリティAPIに対応し、スクリーンリーダーで操作可能。
A.2

編集ビューが知覚可能

Editing-views are perceivable

コンテンツの編集画面は、制作者が知覚できる方法で情報を提示しなければなりません。

A.2.1代替コンテンツが編集ビューで利用可能

画像のalt属性やキャプションなど、代替コンテンツを編集ビュー上で確認・編集できるようにします。

例:WYSIWYG エディタで画像にカーソルを合わせると、設定済みのalt属性がツールチップで表示される。
A.2.2編集ビューでプレゼンテーション情報がプログラム的に利用可能

太字、見出しレベルなどの書式情報が、支援技術に正しく伝えられる必要があります。

例:見出しに設定したテキストが、スクリーンリーダーで「見出しレベル2」として読み上げられる。
A.3

編集ビューが操作可能

Editing-views are operable

編集画面のすべての機能がキーボードで操作可能であり、十分な時間が提供されなければなりません。

A.3.1キーボードでの編集操作が可能

ツールバーのボタン、メニュー、ドラッグ&ドロップなど、すべての編集機能にキーボード代替手段が必要です。

例:ドラッグで並べ替えるブロックエディタに、Ctrl+上下矢印キーでブロックの順序変更が可能。
A.3.2十分な時間の提供

自動保存のタイムアウトや操作制限時間を調整・延長できるようにします。

例:セッションタイムアウト前に警告ダイアログを表示し、延長オプションを提供する。
A.3.3閃光による発作の回避

編集ビューで1秒に3回以上の閃光を発するコンテンツを表示しません。

例:プレビュー時にアニメーションGIFの閃光頻度をチェックし、危険な場合は自動停止する。
A.3.4コンテンツのナビゲーションと構造化が可能

編集中のコンテンツ内を効率的にナビゲートする手段を提供します。

例:ドキュメントアウトラインパネルで見出し一覧を表示し、クリックでジャンプ可能。
A.3.5テキスト検索が可能

編集中のコンテンツ内でテキスト検索が可能であること。

例:Ctrl+Fで検索・置換ダイアログが開き、ヒット箇所がハイライトされる。
A.3.6プリファレンス設定の管理

表示設定(フォントサイズ、カラーテーマなど)をカスタマイズでき、設定が保持されること。

例:エディタの配色テーマ(ライト/ダーク/ハイコントラスト)が選択でき、次回アクセス時も維持される。
A.3.7プレビュー機能のアクセシビリティ

プレビュー機能が、編集中のコンテンツの代替表現へのアクセスを提供すること。

例:プレビューモードで画像のalt属性がツールチップとして確認可能。
A.4

編集ビューが理解可能

Editing-views are understandable

編集画面のUIは一貫性があり、エラーを回避・修正する手段が提供されなければなりません。

A.4.1操作ミスの回避と修正の支援

元に戻す(Undo)機能、確認ダイアログ、入力バリデーションなど、エラー防止と回復手段を提供します。

例:コンテンツ全削除時に確認ダイアログが表示され、Ctrl+Zで操作を取り消せる。
A.4.2UIの動作を文書化

ツールの操作方法やショートカットキーが文書化され、ユーザーが参照できること。

例:ヘルプメニューにキーボードショートカット一覧ダイアログがあり、いつでも呼び出せる。

インタラクティブデモ

アクセシブルでないCMSエディタと、適合したCMSエディタの違いを体験してみましょう。

CMSエディタ比較デモ

問題のあるエディタ
B
I
U
H

ここにテキストを入力...

問題点:

  • ツールバーボタンに aria-label がない
  • キーボードでフォーカスできない(div を使用)
  • フォーカスインジケーターがない
  • ボタンの役割(role)が定義されていない

Tabキーでツールバーのボタンにフォーカスを移動してみてください。 適合版ではキーボードだけで操作でき、スクリーンリーダーがボタンの機能を読み上げます。

Part A 適合チェックリスト

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

管理画面がWCAG 2.x レベルAAに適合している
すべてのツールバーボタンにアクセシブルな名前がある
キーボードだけですべての編集機能が操作可能
フォーカスインジケーターが視覚的に明確
編集ビューの書式情報がスクリーンリーダーで読み上げられる
Undo/Redo機能がキーボードで利用可能
セッションタイムアウトの延長オプションがある
ヘルプ・ドキュメントが提供されている
ダーク/ハイコントラストテーマが選択可能
プレビュー機能がアクセシブル

Part Aのポイント

Part Aは基本的にWCAG 2.xの要件をオーサリングツールのUIに適用するものです。 ただし、編集ビュー固有の要件(書式情報の支援技術への公開、コンテンツ構造のナビゲーション等)が 追加されている点がWCAGとの違いです。