Editoria11y アクセシビリティチェッカー
コンテンツ作成者がアクセシビリティの問題を特定し修正できるよう、ページ読み込み時に自動実行されるユーザーフレンドリーなアクセシビリティチェッカー。
editoria11y
インストール
composer require 'drupal/editoria11y:^2.2'
概要
Editoria11y（editorial accessibility ally：編集者のアクセシビリティ支援ツール）は、コンテンツ作成者向けに特別に設計された包括的なアクセシビリティチェッカーです。手動実行が必要な従来のアクセシビリティツールとは異なり、Editoria11yは最新のスペルチェックのようにページ読み込み時に自動的に実行されます。
このモジュールは、コンテンツ作成者が容易に理解し修正できる明確な問題のみに焦点を当て、技術的なコードレベルの問題で圧倒されることを避けます。コンテンツをコンテキスト内でチェックするため、CKEditor単体では見逃してしまうViews、Layout Builder、Paragraphs、その他の組み立てられたページコンポーネント全体の問題を検出できます。
主な機能には、画像のaltテキストの問題、見出し構造の問題、リンクのアクセシビリティ、テーブルヘッダー、埋め込みコンテンツのアクセシビリティ、テキストフォーマットの問題のチェックが含まれます。結果はサイト全体のダッシュボードに同期され、管理者がすべてのコンテンツの問題を追跡できます。また、誤検出を管理するために、問題を却下したりOKとしてマークしたりできます。
Features
- 手動操作なしでページ読み込み時に自動的にアクセシビリティチェックを実行
- コンテンツ編集中にCKEditor5およびGutenbergエディタボックス内でリアルタイムチェック
- 右下隅の視覚的なトグルボタンで問題数を表示し、展開可能な詳細パネルを提供
- ページ全体の見出し階層を表示するドキュメントアウトラインビジュアライザー
- すべての画像の代替テキスト属性を表示する画像altテキストビジュアライザー
- ソートとフィルタリング機能付きのサイト全体のダッシュボードですべてのコンテンツのアクセシビリティ問題を追跡
- レポート用に問題、ページサマリー、却下のCSVエクスポート
- 誤検出を管理するために問題をOK（グローバル）としてマークしたり非表示（ユーザーごと）にする機能
- 画像、リンク、見出し、テーブル、埋め込み、テキストをカバーする25以上の設定可能なアクセシビリティテスト
- コンテンツコンテナ、無視する要素、非表示コンテンツハンドラー用のカスタマイズ可能なセレクター
- Drupalの翻訳システムを介したインターフェース文字列の翻訳による多言語サポート
- 新しいテーブルにテーブルヘッダーを自動追加するCKEditor5統合
- テーマ開発者がエラーを含む非表示コンテンツ（アコーディオン、タブ）を表示するためのJavaScriptイベント
- 最新のフロントエンドフレームワーク用のWeb ComponentシャドウDOMスキャンサポート
- スマートアラートモード：常に表示、初回検出時に表示、または自動表示しない
- 3つのビジュアルテーマ：Sleek、Classic、Dark
Use Cases
コンテンツエディターの日常ワークフロー
コンテンツエディターがページを作成または編集すると、Editoria11yは保存とプレビュー時にコンテンツを自動的にチェックします。右下のトグルが問題数を表示し、クリックすると各問題の詳細と、それが重要な理由と修正方法の説明が表示されます。エディターは誤検出をOKとしてマークしたり、既に対処した手動チェックリマインダーを非表示にできます。
サイト全体のアクセシビリティ監査
管理者は/admin/reports/editoria11yのダッシュボードを使用して、サイト全体のすべてのアクセシビリティ問題を確認できます。ダッシュボードには種類別の上位の問題、最も問題が多いページ、最近の発見が表示されます。CSVエクスポートにより、チームは修正計画を作成し、時間の経過とともに進捗を追跡できます。
コンテンツエディターのトレーニング
説明的なツールチップは、コンテンツエディターが作業しながらアクセシビリティについて学ぶのに役立ちます。各問題には問題の説明と修正のガイダンスが含まれており、アクセシビリティチェックを学習の機会に変えます。
リリース前の品質保証
新しいセクションやリデザインのリリース前に、チームは影響を受けるページでフラグが立てられたすべての問題を確認できます。コンテンツタイプでフィルタリングしレポートをエクスポートする機能により、公開前のアクセシビリティコンプライアンスの確保が容易になります。
誤検出の管理
警告をトリガーする正当なコンテンツ（意図的に短いブロック引用や、意図的に装飾的な画像など）について、権限のあるユーザーは問題をOKとしてマークしてすべてのユーザーに対して抑制でき、一般のエディターは自分自身に対してのみアラートを非表示にできます。
カスタムテーマ統合
テーマ開発者はJavaScriptイベントを使用して、Editoria11yをアコーディオン、タブ、カルーセルコンポーネントと統合できます。ユーザーがそのようなコンポーネント内に隠れた問題にジャンプしようとすると、テーマJSはEditoria11yがフォーカスする前にコンテンツを自動的に表示できます。
Tips
- デフォルト設定から始めて、テーマとコンテンツ構造に基づいて必要に応じてのみ調整する
- より集中的なスキャンのために、「body」ではなく「main」または「#main-content」をコンテンツルートとして使用する
- テーマのローカルタスクに編集リンクを追加して、ツールチップで便利な編集/レイアウトリンクを有効にする
- CKEditorフィールドのカスタム見出しレベルを設定して、本文コンテンツがH2レベルから始まるようにする
- 初期修正後の通知を控えめにするために「初回検出時」アラートモードを使用する
- 時間の経過とともにアクセシビリティ改善の傾向を追跡するために、毎月CSVレポートをエクスポートする
- 「OKとしてマーク」は恒久的な例外用、「非表示」は個人的な好み用であることをコンテンツエディターにトレーニングする
- テーマがシャドウルートを持つWeb Componentを使用している場合、シャドウDOMコンポーネントセレクターを追加する
- テーマJSでed11yHiddenHandlerイベントを使用して、エラーを含むアコーディオンを自動的に開く
- ed1refクエリパラメータはパネルの即時オープンをトリガーし、ダッシュボードから特定のページへのリンクに便利
Technical Details
Admin Pages 5
/admin/config/content/editoria11y
スキャンするページ要素、実行するテスト、表示オプション、同期設定など、アクセシビリティチェッカーのすべての側面を設定します。
/admin/reports/editoria11y
すべてのコンテンツで検出されたアクセシビリティ問題を表示するサイト全体のダッシュボード。種類別の上位の問題、問題が最も多いページ、最近の問題、最近の却下を表示します。すべてのデータのCSVエクスポート機能を提供します。
/admin/reports/editoria11y/page
特定のページのすべてのアクセシビリティ問題を表示し、ページへの移動または結果のパージが可能
/admin/reports/editoria11y/issue
特定のアクセシビリティ問題タイプを含むすべてのページを表示
/admin/reports/editoria11y/dismissals
サイト全体のすべての却下されたアクセシビリティ問題を表示・管理し、却下タイプと古さでフィルタリング可能
権限 5
Hooks 3
hook_page_attachments
表示権限を持つユーザーに対してEditoria11yライブラリと設定をページにアタッチします。ルート検出、却下の読み込み、同期設定を処理します。
hook_entity_predelete
コンテンツEntityが削除されたときにEditoria11yの結果と却下をクリーンアップします
hook_ckeditor5_plugin_info_alter
テーブル挿入時にデフォルトのヘッダー行/列を設定するようCKEditor5テーブルプラグインを変更します
Troubleshooting 6
Drupalキャッシュをクリアし、ユーザーロールに「View Editoria11y checker」権限があることを確認し、CSSがed11y-element-panelコンテナを隠していないか確認し（z-indexまたはoverflow:hiddenの問題）、ブラウザコンソールでJavaScriptエラーを確認し、「スキャナーを無効化...」設定がすべてのページの要素に一致していないことを確認してください。
「これらのコンテナ内のコンテンツをチェック」設定にコンテンツエリアが含まれていることを確認してください。多くのサイトでは「body」ではなく「main」が必要です。「これらの要素をスキップ」設定がコンテンツを除外していないか確認してください。ホームページやViewsはmain要素の外にコンテンツを挿入することがよくあります。
結果は正規のEntityルート（例：/node/123）を表示しているときのみ同期されます。編集ページ、プレビュー、リビジョンは新しい問題を同期しません。設定で同期が無効になっていないことを確認してください。ブラウザコンソールでAPIエラーを確認してください。
問題のある要素（ソーシャルフィード、サードパーティウィジェット）のCSSセレクターを「これらの要素をスキップ」設定に追加してください。オプションで「これらの埋め込みコンテンツに手動レビューが必要であることを編集者に通知」に追加して、完全に無視する代わりに手動チェック用にフラグを立てることもできます。
テーマがコンテナでoverflow:hiddenを使用している場合、それらのセレクターを「overflow hiddenを持つ要素」に追加してください。パネルが他の要素で覆われている場合、#ed11y-panelのz-indexをCSSで調整するか、「これらの他のウィジェットを覆わない」設定を使用してください。
「これらの要素をスキップ」の長いセレクターリストは、すべての要素に対してチェックされるためパフォーマンスを低下させる可能性があります。属性セレクター（[aria-hidden]）はクラス/IDセレクターよりもはるかに遅いです。セレクターリストを簡素化して短くしてください。
Security Notes 6
- 「Administer Editoria11y checker」権限は制限付きアクセスとしてマークされており、信頼できる管理者にのみ付与すべき
- 「Manage Editoria11y results」権限は、ダッシュボードですべてのサイトコンテンツのパスとタイトルを表示できる
- APIエンドポイントはCSRFトークンで保護され、認証が必要
- モジュールはインジェクション攻撃を防ぐためにすべてのAPI入力を検証
- CSVエクスポートはCSVインジェクション攻撃を防ぐために文字列をサニタイズ
- パス検証により存在しないURLでのレポートを防止