Drupal 版 Editoria11y

コア機能

Drupal モジュールはチェッカーライブラリを編集バックエンドに接続し、レポート、ガバナンス、設定のための多数のサーバーサイドツールを追加します。

インラインのヒントが表示されたDrupalエディター
問題はフロントエンドの読み込み時と、CKEditor・Gutenberg での入力中の両方で検出されます。
リンクの名前が「click here」のみであることを示すヒント。
ツールチップにはエディターへジャンプする、アラートを無視する（現在のユーザーのみ）、または OK にする（全ユーザー対象）ためのボタンが追加されます。繰り返し発生するアラートには、ページ全体またはサイト全体に対するアクションも用意されます。
ヒントのタイトルと内容、要素セレクターと除外対象のフィールドが表示されたカスタムテストビルダーのインターフェース。

CSA サブモジュールでは以下が追加されます：

  • カスタムテストビルダー
  • 40 以上の開発者向けテスト
  • コントラストチェック
  • サイトクローラー
  • 読みやすさの分析
  • 開発者／編集者向けの分割設定
最近の問題と最も問題が多いページを表示するレポートダッシュボード。
サイト全体のダッシュボードでは、アラートと非表示設定のフィルタリング可能・エクスポート可能なレポートを提供します。

インストールと主要なセットアップ手順

Drupal.org のバンドルインストーラーには複数のモジュールが含まれています：

  • Editoria11y：コアコンテンツチェッカーとダッシュボード。
  • Editoria11y CSA：開発者テストとダッシュボードのメンテナンスツール。
  • Editoria11y Export：CSV レポートツール。

他のモジュールと同様にインストールし、以下の主要な手順を実行してください：

  1. 権限を確認する。 信頼できる作成者には「OK にする」、「無視としてマーク」、「ダッシュボードを表示する」の権限が必要です。
  2. 繰り返し表示される、または役に立たないアラートがないか主要ページを確認する。 ツールチップで OK としてマークするか、設定でセレクターによる要素の除外を調整してください。
  3. 見つけにくいヒント（画面外・切り詰め・他の要素の後ろ・非表示要素など）を確認する。以下の「非表示または画面外のヒントを修正する」のセクションを参考に対処してください。
  4. サイトにすでにコンテンツがあり、CSA サブスクリプションをお持ちの場合は、ダッシュボードの「再確認」タブを開き、サイトをクロールしてサイトレポートを事前に読み込んでください。任意ですが、古いページはクロールされるかログイン済みユーザーが訪問するまでレポートに表示されません。

設定オプションの動画紹介（v2.4）をご覧ください。

役に立たないアラートを非表示にする

適切な設定により不要なアラートを抑制し、コンテンツ作成者が本当に修正すべき問題に集中できるようになります。

テストを完全にオフにすることもできますが、通常は特定の要素やページのアラートのみを非表示にする方が適切です。

各テスト実行中、Editoria11yは「これらのコンテナ内のコンテンツを確認する」設定から要素の単一セットを収集し、それを何度かフィルタリングします。テスト実行の流れは次のとおりです：

  1. 設定がこのページまたはこのユーザーのチェックを禁止している場合、チェックをキャンセルする。
  2. 指定されたページ領域の要素を収集する。例：
    body > *:not('.ed11y-element')
    Editoria11y CSAユーザーの場合、これらは開発者テストタブの領域です。
  3. 無視セレクターに一致する要素を除外する。例：
    .widgets, .utility-menu
    Editoria11y CSAユーザーの場合、これらは開発者テストタブのセレクターです。
  4. テストを実行し、結果をダッシュボードに同期する。
  5. 分割設定が有効でユーザーがコンテンツエディターの場合、開発者の結果をフィルタリングする：
    • 「開発者のみ」に設定されたテストの結果を除外する。
    • 指定されたコンテンツ領域外の要素の結果を除外する。例：
      main, footer
    • コンテンツの無視セレクターに一致する要素の結果を除外する。
    2回目の「収集」フェーズはありません。開発者のページ領域にはコンテンツ領域を含める必要があります。
  6. 設定が自動開き設定と一致する場合、パネルを開きアラートを表示する。

アラートを非表示にする

テストはライブラリでエラーまたは警告（「手動チェック」）として設定できます。警告は非表示にできます。各ツールチップのフッターから2種類の非表示設定が利用できます：

  • 「無視」はユーザー設定として保存されます：アラートは現在のユーザーには非表示になりますが、そのユーザーのみです。
  • 「OK にする」はすべてのユーザーに対してアラートを非表示にします。

ユーザーがアラートを非表示にできるかどうかは、Drupal のユーザー権限のロールレベルで制御されます。ほとんどの作成者はアラートを非表示にできるべきです。アイテムを確認済みとしてマークできない場合、手動チェックを割り当てる意味がありません。

要素を無視する

これら2つの設定が最も重要です！

最初の設定には、コンテンツ作成者が編集できるページの任意の部分を含めてください。例えば、mainコンテンツエリア、.sidebar、.footer-column-twoを編集できる場合は、それらのセレクターをコンテンツ確認エリアとして設定します。

2番目の設定はサブセクションを「除外」するために使用します。例えば、mainに開発者のみが変更できるウィジェットや埋め込みが含まれている場合は、それらをリストアップします：.widget-1, .social-embed。

分割設定を使用している場合、開発者テストタブに同様の設定ペアが表示されます：

開発者チェックエリア

開発者チェックエリアについて知っておくべき重要なことは、コンテンツチェックエリアとは独立していないということです。分割設定では、開発者エリアがチェックされ、その結果がコンテンツエリアと一致するようにフィルタリングされます。開発者から除外されたエリアはコンテンツ編集者からも除外されます。編集可能なコンテンツエリアを除外しないでください！

一部のテストでは、影響を受ける要素の特定のアラートのみを非表示にするための、より精密な設定が可能です。以下から探してください：

  • コンテンツテスト：確認するリンク
  • コンテンツテスト：確認する埋め込み
  • コンテンツテスト：動的コンテンツとシャドウコンテンツの検出
  • 開発者テスト：コントラスト

特定のページまたはユーザーに対して非表示にする

最も簡単な方法は、CSSクラスまたはIDをこれらのオプションに渡すことです：

最初の設定はチェックの実行を防ぎ、ツールバーは表示されません。

2番目の設定はチェッカーを最小化した状態で起動し、エラーであっても（現在のユーザーに対して）すべての問題を自動的に「無視」としてマークします。これにより、ユーザーを煩わせることなくテストを実行してダッシュボードを更新できます。

チェッカーを表示するユーザーを制御するためにこれらを使用する場合、テーマを調整してクラスを出力する必要があるかもしれません。例：.user-247

サイト全体の結果を管理する

クロールと結果の更新

Editoria11y はリアルタイムの監視ツールであり、クローラーではありません。サイト全体のレポートは作成者がページを閲覧した際に更新されるため、定期的なクロールは通常不要です。CSA モジュールにはクローラーが含まれていますが、以下の 3 つの状況でのみ必要となります：

  1. 多くのページを持つ既存サイトにEditoria11yを最初にインストールするとき。ページはダッシュボードに表示される前に訪問される必要があるため、最初にクイッククロールを実行すると時間を節約できます。
  2. テーマやモジュールの大規模な更新は、訪問またはクロールされるまで表示されない多くのページの問題を修正（または引き起こす）する可能性があります。
  3. ページの削除やリダイレクトなどの管理インターフェースでの一括操作は、存在しなくなったページや移動したページの結果を残しがちです。このような場合、「更新」タブのメンテナンスアクションを使用してページURLを更新し、削除されたページを検出して除外することが役立ちます。

クロール中にサイトからデータが外部に送信されることはありません。CSA クローラーはクラウドツールではなく、ブラウザを使用してサイト上のページを読み込んでチェックします。このアプローチの注意点は、ブラウザがバックグラウンドタブを一時停止することです。クロール中はコンピューターの電源を入れたままにしておく必要があります。クローラー用に新しいウィンドウを開き、作業中はそのウィンドウをフォアグラウンドタブとして維持してください。別のウィンドウで他の作業を続けることは可能です。クローラーはページのバッチごとに進捗の見積もりを更新します。

レポートの表示

  • 最近では個別のアラートを探索できます。同じアラートタイプのすべての件数を絞り込んで確認したり、最近のコンテンツで頻出しているアラートを確認したり、同じミスを繰り返している作成者を特定したりできます。
  • ページではアラート数をページ別にまとめて表示します。問題の多いページを見つけたり、コンテンツタイプや公開ステータスなどのページ属性で絞り込んだりできます。
  • アラートでは問題をタイプ別に一覧表示します。
  • 非表示設定では作成者が適切に非表示にしているかどうかを確認でき、非表示にしたアラートを元に戻す「リセット」ボタンもあります。
  • エクスポートには、CSV ダウンロード用にフィルタリングできるページ・アラート・非表示設定の各レポートが含まれています。CSV エクスポートサブモジュールが提供
  • 更新には、削除されたページのアラートを除外したり、/search?query=example のようなパラメーター付き疑似ページのアラートを除外したり、保存済みのページタイトルと URL を更新したり、手動クロールを実行したりするダッシュボードのメンテナンスツールが含まれています。CSA サブモジュールが提供

非表示または画面外のヒントを修正する

モジュールはヒントの配置方法を変更するための設定フィールドを 2 つ提供します：

一部のテーマには、水平または垂直のオーバーフローを非表示にする列やウィジェットがあります。ライブラリはトグルがページの表示領域外に出てしまう場合を自動的に検出します。特定のコンテナがオーバーフローを非表示にすることをライブラリに伝えると、そのコンテナ内の要素のヒントもコンテナの境界内に収まるよう配置しようとします。

一部のテーマには、アコーディオン・タブ・スライドショーなどコンテンツの表示を切り替えるウィジェットがあります。これらの要素内のヒントも非表示になることがあります。これらのウィジェットのセレクターリストを指定すると、ユーザーが次へ・前へボタンでヒントにジャンプしようとした際に Editoria11y が一時的に処理を停止します。Drupal のテーマとモジュールは、ライブラリセクションの非表示コンテンツのヒントへの対応に関する説明に従って非表示コンテンツを表示できます。

独自の設定を記述する

PHP の場合：Drupal モジュールはモジュールまたはテーマで drupalSettings.editoria11y の内容を変更するための hook_editoria11y_alter_config を提供します。例：

drupalSettings の変更は、モジュールの JS がその値をライブラリに渡すよう設定されている場合にのみ有効です。追加のパラメーターを設定するには、JS の options オブジェクトを直接変更する必要があります。モジュールは editoria11yOptionsOverride というグローバル JS 変数を 1 つチェックします。これが設定されている場合、モジュールまたはテーマで提供した editoria11yOptions 関数に options オブジェクトを渡します。これでライブラリのパラメーターをすべて設定できます。

独自のテストを記述する

まず、モジュールの設定で「カスタムテスト」オプションに 1 を追加し、テストを監視するよう設定します。

次に、カスタムテストの記述に関するライブラリガイドを参照して、テーマまたはモジュールにテストを含む Drupal JS ライブラリを作成します。

以下は Princeton による Safe Links に関するアラートを出すカスタムテストの実際の動作例です。Drupal.Ed11y. を通じて Editoria11y クラスにアクセスしていることに注意してください。

サポートを受ける

コミュニティサポートのオプションについてはお問い合わせページをご確認ください。@itmaybejj は、西半球で太陽が昇っている時間帯なら通常 Drupal Slack にオンラインでいます。

多くの CSA 貢献プランには年次のチェックインが含まれており、セットアップや設定に関する直接のサポートを受けることもできます。