2024年10月10日木曜日

Oracle APEX 24.1のアクセス可能な読取専用アイテムの効果を確認する

Oracle APEX 24.1ではアクセシビリティに関する改良として、読み取り専用のページ・アイテムのレンダリング方法が変更されています。

読み取り専用のページ・アイテムのレンダリング方法は、アプリケーション定義のプロパティのアクセス可能な読取り専用アイテム（英語ではAccessible Read-Only Items）をオンにすることにより、有効になります。オフの場合は、24.1以前と同じレンダリングが行われます。

リリース・ノートのアイテムの読取り専用処理の説明を引用します。

アイテムの読取り専用処理

アプリケーション定義の編集時に、「アクセス可能な読取り専用アイテム」という新しいスイッチを使用できます。オンにすると、APEXは従来のSPANベースの要素ではなく、readonly入力要素またはtextarea要素として要素をレンダリングします。これらの要素は、スクリーン・リーダーのユーザーがフォーカス可能で、より簡単に検出できるようになりました。

この属性は、下位互換性のために「オフ」に設定され、新しいアプリケーションでは「オン」に設定されているため、新しいアプリケーションではすぐに改善されたアクセシビリティ・サポートを利用できます。

Webアプリケーションの文脈では、アクセシビリティやアクセシブルという単語に特別な意味があるため、カタカナ表記が良いのではとは思います。「アクセス可能な読取り専用アイテム」という名前なので、若干、どのような機能なのか掴みにくくなっています。

プロパティ「アクセス可能な読取り専用アイテム」を切り替えることにより、読取り専用に設定されたページ・アイテムのレンダリングがどのように変わるかを、APEXアプリケーションを作成して確認してみました。

色々なタイプのページ・アイテムを作成し、属性の読取り専用を常時に設定しています。作成したページ・アイテムのタイプは以下になります。

カラー・ピッカー、コンボボックス、日付ピッカー、数値フィールド、ポップアップLOV、選択リスト、１つ選択、複数選択、切替え、テキスト・フィールド、テキスト領域、オートコンプリートが有効なテキスト・フィールド


プロパティ「アクセス可能な読取り専用アイテム」を切り替えた後に、生成されたHTMLを確認するのには手間がかかるため、静的コンテンツのリージョンを作成し、HTMLコードとして以下を記述します。

<div id="log"></div>
<script defer>
const logArea = document.getElementById("log");
const items = ["P1_COLOR", "P1_COMBO", "P1_DATE", "P1_NUM", "P1_POPUPLOV", "P1_SELECT_LIST", "P1_SELECT_ONE", "P1_SELECT_MANY", "P1_SWITCH", "P1_TEXT", "P1_TEXTAREA", "P1_TEXT_AUTO" ];
items.forEach( (item) => {
const e = document.getElementById(item);
logArea.innerHTML += `<span>${item} is ${e.tagName} type="${e.type}" class="${e.className}" value="${e.value}"</span> : `;
/*
* 表示用のSPAN要素が作成されているかどうか確認する。
* アプリケーション定義のアクセス可能な読み取り専用アイテムがオンの場合は、
* _DISPLAYが付いたSPAN要素は作成されれない。
*/
const item_d = item + "_DISPLAY";
const d = document.getElementById(item_d);
if (d) {
logArea.innerHTML += `<span>${item_d} is ${d.tagName}</span><br>`;
}
else
{
logArea.innerHTML += `<span>${item_d} does not exist.</span><br>`;
}
});
</script>
view raw read-only-inspect.html hosted with ❤ by GitHub

最初にAPEX 24.1以前のレンダリングとなる、「アクセス可能な読取り専用アイテム」がオフのHTML出力を確認します。


代表例として、テキスト・フィールドとして出力されたHTMLを確認します。

ページ・アイテムとして保持している値は、INPUT要素のVALUE属性に保持されていますが、TYPE属性はhiddenであり、画面には表示されません。画面への表示は、ページ・アイテム名に接尾辞として_DISPLAYが付けられたIDを持つSPAN要素によって行われています。
<div class="t-Form-itemWrapper">
   <input type="hidden" id="P1_TEXT" name="P1_TEXT" value="表示されるテキスト">
   <input type="hidden" data-for="P1_TEXT" value="1TzVCixQgh3b7B-i1cRePMGuDQH5ECqIevTQxwxWFXmDqU73_pLIzIur0rPaaxEyRXNslvEpO3CFitA3ddPamg">
   <span id="P1_TEXT_DISPLAY" class="display_only apex-item-display-only" data-escape="true">
   表示されるテキスト
   </span>
</div>
先ほどの静的コンテンツのリージョンには、以下が出力されます。選択リストだけはUL要素ですが、それ以外は表示用のSPAN要素が出力されています。

P1_COLOR is INPUT type="hidden" class="" value="#ffff00" : P1_COLOR_DISPLAY is SPAN
P1_COMBO is INPUT type="hidden" class="" value="Return1:Return2" : P1_COMBO_DISPLAY is SPAN
P1_DATE is INPUT type="hidden" class="" value="2024/10/10" : P1_DATE_DISPLAY is SPAN
P1_NUM is INPUT type="hidden" class="" value="23115023" : P1_NUM_DISPLAY is SPAN
P1_POPUPLOV is INPUT type="hidden" class="" value="Return1:Return2" : P1_POPUPLOV_DISPLAY is SPAN
P1_SELECT_LIST is INPUT type="hidden" class="" value="Return1:Return2" : P1_SELECT_LIST_DISPLAY is UL
P1_SELECT_ONE is INPUT type="hidden" class="" value="Return1" : P1_SELECT_ONE_DISPLAY is SPAN
P1_SELECT_MANY is INPUT type="hidden" class="" value="Return1:Return2" : P1_SELECT_MANY_DISPLAY is SPAN
P1_SWITCH is INPUT type="hidden" class="" value="Y" : P1_SWITCH_DISPLAY is SPAN
P1_TEXT is INPUT type="hidden" class="" value="表示されるテキスト" : P1_TEXT_DISPLAY is SPAN
P1_TEXTAREA is INPUT type="hidden" class="" value="表示されるテキスト" : P1_TEXTAREA_DISPLAY is SPAN
P1_TEXT_AUTO is INPUT type="hidden" class="" value="表示されるテキスト" : P1_TEXT_AUTO_DISPLAY is SPAN

「アクセス可能な読取り専用アイテム」をオンにします。


ページを再描画すると、以下のように表示されます。


先ほどど同じく、テキスト・フィールドとして出力されたHTMLを確認します。

表示のためのSPAN要素は生成されず、INPUT要素のクラスにjs-accessible-readonly apex-item-text-readonlyが設定されています。
<div class="t-Form-itemWrapper">
   <input type="hidden" data-for="P1_TEXT" value="cv4OZwoNmEsuZADcdvsLrXrwzQ-iahzJ5pcbCLOtElh9pffxvBItrK0FBk7pngQNendqMGWq-HlZiY2lm0kRfw">
   <input id="P1_TEXT" name="P1_TEXT" class="js-accessible-readonly apex-item-text-readonly" aria-readonly="true" spellcheck="false" inputmode="none" autocomplete="off" value="表示されるテキスト" size="30">
</div>
静的コンテンツのリージョンには、以下が出力されます。表示に使用されているHTML要素は、INPUTまたはTEXTAREAであることが分かります。

P1_COLOR is INPUT type="text" class="js-accessible-readonly apex-item-color-picker-readonly" value="#ffff00" : P1_COLOR_DISPLAY does not exist.
P1_COMBO is INPUT type="text" class="js-accessible-readonly apex-item-combobox-readonly" value="Display1, Display2" : P1_COMBO_DISPLAY does not exist.
P1_DATE is INPUT type="text" class="js-accessible-readonly apex-item-datepicker-readonly" value="2024/10/10" : P1_DATE_DISPLAY does not exist.
P1_NUM is INPUT type="text" class="js-accessible-readonly apex-item-number-readonly u-textStart" value="23115023" : P1_NUM_DISPLAY does not exist.
P1_POPUPLOV is INPUT type="text" class="js-accessible-readonly apex-item-popup-lov-readonly" value="Display1, Display2" : P1_POPUPLOV_DISPLAY does not exist.
P1_SELECT_LIST is TEXTAREA type="textarea" class="js-accessible-readonly apex-item-select-readonly" value="Display1 Display2" : P1_SELECT_LIST_DISPLAY does not exist.
P1_SELECT_ONE is INPUT type="text" class="js-accessible-readonly apex-item-select-one-many-readonly" value="Display1" : P1_SELECT_ONE_DISPLAY does not exist.
P1_SELECT_MANY is INPUT type="text" class="js-accessible-readonly apex-item-select-one-many-readonly" value="Display1, Display2" : P1_SELECT_MANY_DISPLAY does not exist.
P1_SWITCH is INPUT type="text" class="js-accessible-readonly apex-item-group-readonly" value="オン" : P1_SWITCH_DISPLAY does not exist.
P1_TEXT is INPUT type="text" class="js-accessible-readonly apex-item-text-readonly" value="表示されるテキスト" : P1_TEXT_DISPLAY does not exist.
P1_TEXTAREA is TEXTAREA type="textarea" class="js-accessible-readonly apex-item-textarea-readonly" value="表示されるテキスト" : P1_TEXTAREA_DISPLAY does not exist.
P1_TEXT_AUTO is INPUT type="text" class="js-accessible-readonly apex-item-autocomplete-readonly" value="表示されるテキスト" : P1_TEXT_AUTO_DISPLAY does not exist.

そのため、APEX 24.1以前とは異なり、読取り専用であってもページ・アイテムをフォーカスできます。


Oracle APEX 24.1以前に作成したアプリケーションは、「アクセス可能な読取り専用アイテム」はオフになっています。

Oracle APEX 24.1で新規に作成したアプリケーションの「アクセス可能な読取り専用アイテム」はデフォルトでオンです。

以前に作成したAPEXアプリケーションの「アクセス可能な読取り専用アイテム」をオンに変更する、または、APEX 24.1で新規にアプリケーションを作成したときは、読取り専用になっているページ・アイテムがある場合、ページ・アイテムにフォーカスが当たること、および接尾辞に_DISPLAYが付いた、表示向けのSPAN要素が生成されないことに注意して、アプリケーションに、それらに依存したカスタムのJavaScriptコードが含まれていないことを確認する必要があります。

ページ・アイテム・タイプの表示のみは、「アクセス可能な読取り専用アイテム」の設定に影響を受けないようです。設定のページ送信時に送信がオンのときは、INPUT要素とSPAN要素が生成され、オフのときはINPUT要素は生成されず、ページ・アイテムがSPAN要素として生成されます。

今回の記事は以上になります。

今回の検証に使用したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/accessibility-check.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完
投稿者 時刻:
ラベル: