インストールと設定

設定済みバージョン

カスタムインストール

独自の実装を構築するには、言語パック・JS min ファイル・CSS min ファイルのローカルコピーをダウンロード（またはCDN バージョンを参照）して、新しい “Ed11y” インスタンスを作成してください。

ESM/JS モジュールのインポートの場合：

レガシーブラウザやシステムには .umd JavaScript ファイルを使用してください：

パラメーター

本番環境での実装では、ログイン中の編集者のみに対して呼び出されるようにし（サイト訪問者にチェッカーを表示したくはないでしょう）、デフォルトパラメーターの必要な項目を上書きできます。

すべてのパラメーターにはデフォルト値が設定されているため、変更したい項目のみ記述してください。

カスタマイズを多く施した実装の例：

ターンキー統合では、これらの変数を動的に設定するケースもよくあります。たとえば、最近編集されたページを “assertive” モードで読み込み、数分後に “polite” に切り替えるといった使い方です。

テーマ設定

いくつかのパラメーターを使って、テーマの選択・カラーの上書き・CSS の注入が行えます。

将来のアップデートを容易にするため、変更が必要なパラメーターのみ記述してください。

便利な JS イベント

テーマ開発者はこれらのイベントをフックして、ページへの変更や応答処理を実装できます。

通常の発生順序：

ed11yRunCustomTests：Results オブジェクトがカスタム結果の注入を受け付ける準備ができた際に発火します。このイベントが発火するには、customTests パラメーターを実行するカスタムテスト関数の数（おそらく1つ）に設定する必要があります。詳細は次のセクションをご覧ください。
ed11yResults：すべてのチェックが完了した際に発火します。API 統合では Ed11y.results オブジェクトからデータを取得できます。
ed11yPanelOpened：パネルが自動または手動で開いた際に発火します。
ed11yShowHidden：data-ed11y-result の番号と viaJump の boolean を提供します。”ed11yShowHidden” パラメーターが設定されかつ要素の親がセレクターに一致する場合のみ発火します。アコーディオン・タブ・カルーセルなど、まだ開いていないコンテナのアラートを表示するために使用します。使用例は次のセクションをご覧ください。
ed11yPop：data-ed11y-result の ID と result・tip オブジェクトへの参照を提供します。ツールチップが表示された際に発火し、実行時にツールチップを変更することができます。
ed11yShut：data-ed11y-result の ID を提供します。ツールチップが閉じた際に発火します。
ed11yDismissalUpdate：ユーザーがアラートを非表示にしたり復元したりした際に詳細情報を提供します。API 統合に使用します。イベントオブジェクトには以下が含まれます：
- dismissPage
- dismissTest
- dismissKey
- dismissAction

サンプルは以降のセクションでご確認いただけます。

ツールチップのカスタマイズ

ツールチップのテキストを変更するだけであれば、ed11yLang.en グローバル（ライブラリ呼び出し前）または Ed11y.M（ライブラリ呼び出し後）オブジェクト内の項目を直接上書きできます。たとえば、言語パックを Drupal.ed11yLang にエイリアスした Drupal モジュールの場合：

Drupal.ed11yLang.lang.testNames.title = “Please write shorter headings.”

これはローカライゼーションファイルのデフォルトキーにも、使用中の言語別翻訳にも適用されます。

Drupal モジュールは editLinks パラメーターを使って、ツールチップにカスタム編集リンクを追加することもできます。”Page editor” と “Layout editor” にご注目ください：

「Page editor」と「Layout editor」のリンクが挿入されたツールチップ。

そのパラメーターを設定するコードの簡略例：

Drupal モジュールはさらに、ed11yPop イベントを使用して、ツールチップ表示時のコンテキストに応じて編集リンクを動的に表示・非表示にします。

このイベントは result と tip オブジェクトへの参照を提供します：

カスタムテスト

customTests パラメーターが数値の場合、Editoria11y はチェック中に “ed11yRunCustomTests” イベントを発火し、指定した数の “ed11yResume” イベントを最大 500ms 待ち受けます。

これを活用して、カスタムテストを含む任意の数のスクリプトを呼び出し、ツールチップが描画される前に結果を結果配列に追加できます。

たとえば、メールから難読化された URL を含む貼り付けリンクにフラグを立てるツールチップを作成したい場合：

手順：

ed11yRunCustomTests イベントのリスナーを追加する
対象の要素を見つける
ツールチップメッセージを定義する
Editoria11y にツールチップを描画させるために “resume” イベントを発火する：

非表示またはサイズ制約のあるコンテンツのアラート対処

タブ・スライダー・アコーディオンなど多くのインタラクティブコンポーネントはコンテンツを非表示にします。Editoria11y の情報パネルには、問題箇所に直接ジャンプするための前後ボタンが含まれています。問題のツールチップが現在表示されていないと Editoria11y が判断した場合、ユーザーに問題があることを通知し、最初に見つかった表示中の親要素（例：アコーディオン周囲の div）をハイライトします。

理想的には、Editoria11y の可視性チェックが実行される前にテーマが該当要素を表示するようにして、カルーセルが自動的に進み、アコーディオンが自動的に開いて問題を表示するといった、シームレスな動作を実現することが望まれます。

パネルが最初に開いたとき（例：問題のあるすべてのアコーディオンパネルを展開する場合）にこれを行うには、ed11yPanelOpened の JS イベントリスナーを追加し、関連する ed11y-element-result 要素に対して querySelectorAll を実行して、テーマがそのページ部分を表示するために使用している関数をトリガーしてください。

jQuery を使った例です。パネルが開くと、固定メニューを無効化（要素が隠れないように）し、閉じているアコーディオンアイテム内の ed11y-element-result 要素を探してトグルボタンのクリックをシミュレートします：

パネルの「次へ」ボタンで特定のツールチップにジャンプする際のみコンテンツを表示する場合（例：閉じたタブや次のカルーセルスライド）、パラメーターで hiddenHandlers に対象の CSS セレクターを設定し、checkVisible を TRUE にしてください。その後 ed11yShowHidden イベントのリスナーを追加します。このイベントは、Editoria11y がオプションで指定した hiddenHandlers セレクターに一致するコンテナ内にツールチップがあると検知した際に発火します。この JS イベントには、これから表示しようとしているツールチップの ID が含まれます。Editoria11y はこのイベントを発火した後に短時間待機し、JS が要素を表示するための時間を確保します。

ペンシルベニア州立大学の実装例です。指定された ID に一致する要素を探し、その親のインタラクティブコンポーネントコンテナを特定して、トグルを有効化するイベントをトリガーします：

注意：一部のテーマは可視性チェックと互換性がありません。たとえば <main> コンテナの高さが 0px の場合などです。そのようなサイトでは、checkVisible を false に設定してすべての可視性チェックを無効化してください。