← すべてのドキュメント

ダイアログのアクセシビリティ

スクリーンリーダーに必要な名前とロールを、エディターのダイアログに付けます。この機能がないと、一部のダイアログはメニューとして読み上げられ、テキストフィールドには名前がありません（「edit, blank」）。有効にすると、Insert Link は「Insert Link」という名前のダイアログになり、フィールドは「URL」「Text」と読み上げられます。既定で有効で、見た目は変わりません。

選択した単語に対して Ctrl+K で開いた Insert Link ダイアログ。https://example.com/ が入力された URL フィールドにキーボードフォーカスがあります
Ctrl+K で開いた Insert Link ダイアログです。URL フィールドにフォーカスがあり、そのアクセシブルな名前は「URL」です。

有効にする

この機能は dialoga11y.js プラグインで提供されます（plugins/all_plugins.js にも含まれます）。dialogA11y の既定値は true なので、読み込むだけで有効になります。ボタンはありません。

<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<div id="editor"><p>Select some text and press Ctrl+K to open the link dialog.</p></div>
<script>
var editor = new RichTextEditor("#editor", { toolbar: "full" });   // dialogA11y: false turns it off
</script>

オプション

オプション既定値動作
dialogA11ytruefalse にするとプラグインを無効にします。

editor.applyDialogAccessibility() は、ページ上のすべてのポップアップに対して処理を 1 回実行します。たとえば、開いているポップアップに独自のコードでフィールドを追加した後に使います。

動作

プラグインはページ上でエディターのポップアップ（rte-dropdown-panel、rte-dialog-float、.rte-panel-general）を監視します。タイトルバー（rte-dialog-header）を持つポップアップそれぞれに、次の処理を行います。

  • ロール。タイトルとテキストフィールドを持つポップアップには、コアが付ける role="menu" の代わりに role="dialog" を付けます。メニューにテキストフィールドは含められないためです。タイトルがありコマンドのみを一覧にするポップアップは、メニューのままです。ダイアログには、メニューの aria-orientation を残しません。
  • 名前。ダイアログに名前がなければ、タイトルのテキストから aria-label を設定します。末尾の「(Ctrl+K)」などのショートカット表記は除きます。
  • フィールドのラベル。名前のないフィールドには aria-label を付けます。読み上げる名前と画面の表示を合わせるため、まず隣に表示されているラベルを使います。表示ラベルがない場合は、フィールドのラッパー（rte-dialog-line-ALT なら「Alternative text」、rte-dialog-line-WIDTH なら「Width」など）、プレースホルダー、近くのテキスト、最後にダイアログ名の順で使います。

色やフォントの選択など、タイトルバーのないポップアップは変更しません。例外として、タイトルのないメニューに表示中のテキストボックスがある場合は、role="dialog" に変更します。

Insert Image、Insert Emoji、Image editor など、editor.createDialog() で作成された rte-dialog-outer フレーム内のダイアログは変更しません。コアがすでに role="dialog"、aria-label、aria-modal="true" を設定しているためです。

確認したダイアログについて、プラグインの無効時と有効時のアクセシビリティツリーを、Playwright の報告に基づいて示します。

ダイアログdialogA11y: false既定値
Insert Link（ツールバーボタン）role="menu"、フィールドは textbox、textboxrole="dialog"、フィールドは textbox "URL"、textbox "Text"
Insert Link（Ctrl+K）dialog "Insert Link"、フィールドは textbox、textboxdialog "Insert Link"、フィールドは textbox "URL"、textbox "Text"
Find and Replacedialog "Find and Replace"、フィールドは textbox、textboxdialog "Find and Replace"、フィールドは textbox "Find"、textbox "Replace"

ツールバーの Insert Link ダイアログは次のマークアップになります（スタイルとアイコンは省略しています）。

<rte-dropdown-panel role="dialog" aria-label="Insert Link" class="rte-panel-general rte-panel-insertlink">
  <rte-dialog-header><rte-dialog-header-text>Insert Link</rte-dialog-header-text></rte-dialog-header>
  …
  <rte-dialog-line-url …><rte-dialog-input-label>URL</rte-dialog-input-label><input type="text" aria-label="URL">…</rte-dialog-line-url>
  <rte-dialog-line-text …><rte-dialog-input-label>Text</rte-dialog-input-label><input type="text" aria-label="Text"></rte-dialog-line-text>
  …
</rte-dropdown-panel>

このプラグインが行わない処理

フォーカスの制御は、このプラグインではなくコアエディターが担当します。Insert Link ダイアログでプラグインの無効時と有効時を確認し、同じ結果になりました。

  • マウスまたは Ctrl+K で開くと、URL フィールドにフォーカスが移ります。
  • Tab と Shift+Tab は、URL、Text、Open in new tab、Cancel、Insert を巡回し、ダイアログ内にとどまります。
  • Escape を押すとダイアログが閉じ、ツールバーの Insert Link ボタンにフォーカスが戻ります。

プラグインは aria-modal も設定しません。コアは Insert Image、Insert Emoji、Image editor に aria-modal="true" を設定します。文書の編集を続けられる Find and Replace には aria-modal="false" を設定します。ツールバーの Insert Link パネルには aria-modal がありません。

注意点

  • 文書の HTML には何も追加しません。属性を付けるのはエディター自体のダイアログです。
  • 名前は表示中のタイトルやラベルから取得するため、言語パックを使うとその言語になります。代替の名前（「Alternative text」「Width」など）は英語です。
  • 2.6.12 では、ツールバーボタン上で Enter または Space を押して Insert Link を開くと、URL フィールドではなく Cancel にフォーカスが移ります。Ctrl+K またはマウスクリックでは URL フィールドから始まります。

関連情報：アクセシビリティステートメント、アクセシビリティチェッカー、createDialog。