1. アクセシビリティ・ガイド
  2. アクセスしやすいアプリケーションの開発
  3. リージョン

4.3 リージョン

ページ・リージョンを構成して、ユーザーにナビゲーション情報を提供します。

親トピック: アクセスしやすいアプリケーションの開発

4.3.1 ページ構造

ページ構造は、ユーザーが関心のあるコンテンツにナビゲートするのに役立ちます。

アシスティブ・テクノロジのユーザーは、APEXページに明確に定義されたページ構造がある場合、非常に役立ちます。ページが明確に定義され、優れた見出しおよびランドマーク構造が含まれている場合、アシスティブ・テクノロジのユーザーは、ページを簡単にスキャンして方向を決め、関心のあるコンテンツにすぐに移動できます。

この項では、APEXで明確に定義されたページ構造を作成する方法について説明します。

  • ランドマーク
    ランドマーク・ロールとラベルについて学習します。
  • 見出し
    見出しと見出しレベルについて学習します。

親トピック: リージョン

4.3.1.1 ランドマーク

ランドマーク・ロールとラベルについて学習します。

ランドマークは、APEXアプリケーションの構造を識別するための強力な方法を提供します。ランドマークは、見出し構造を置き換えるのではなく、補足するために使用する必要があります。ランドマークの定義には、ランドマーク・ロールおよび一意のランドマーク・ラベルの定義が含まれます。
  • ランドマーク・ロール:
    • 開発者がページ上の特定のセクションの目的を定義できるようにします
    • 「ナビゲーション」、「検索」、「メイン」などを含みます
  • ランドマーク・ラベル:
    • スクリーン・リーダー・ユーザーに対してロールとともに通知されます
    • 状況によっては必ずしも必要ではありません
たとえば、applicationラベルの付いたsearchランドマークは、「アプリケーション検索」として通知されます。

ランドマークでは、レベルはページ構造から自動的に導出されるため、見出しと同様に階層レベルを定義する必要はありません。正しく実装されたランドマークは、見出しよりもはるかに強力です。

例4-1 単純なランドマーク

この例では、ランドマーク・ロールのみを表示する単純なランドマークを示します。
  • バナー
  • ナビゲーション
  • メイン
  • 補完
  • コンテンツ情報

例4-2 ネストされたランドマーク

この例では、ネストされたランドマークを示しています。カッコ内にランドマーク・ラベルが付いたランドマーク・ロールを表示します。
  • バナー
  • ナビゲーション(ブレッドクラム)
  • メイン
    • 検索
    • リージョン(従業員レポート)
    • リージョン(四半期のKPI)
    • リージョン(期限超過タスク)
    • リージョン(従業員パフォーマンス・チャート)
  • コンテンツ情報

親トピック: ページ構造

4.3.1.1.1 ランドマーク・ロール

異なるランドマーク・ロールには異なる目的があります。

バナー
バナー・ランドマークは、APEXアプリケーション内の各ページの先頭で(通常はページのヘッダーとして)アプリケーション指向のコンテンツを識別します。APEX内では、通常、これは上部バーに含まれるすべてですが、アプリケーション、アプリケーション・テーマまたはテンプレートによって異なります。たとえば、バナーには、アプリケーション・ロゴ、名前およびナビゲーション・バーのコントロールを含むことができます。

ページには通常、バナー・ランドマークが1つのみ含まれます。APEXページの最も一般的なパターンは、このバナー・ランドマークがページ・テンプレートから取得される場合です。APEXでページ・リージョンをバナー・リージョンとして手動で定義することはまれです。

補完
補完的なランドマークは、メイン・コンテンツとしてDOM階層内の同様のレベルのページのサポート・セクションですが、メイン・コンテンツから分離しても意味があります。

コンテンツ情報
コンテンツ情報のランドマークでは、各アプリケーション・ページの下部(つまりフッター)に共通情報が識別されます。

ページには通常、コンテンツ情報ランドマークを1つのみ含んでいます。APEXページの最も一般的なパターンは、このコンテンツ情報ランドマークがページ・テンプレートから取得される場合です。APEXでページ・リージョンをコンテンツ情報リージョンとして手動で定義することはまれです。

フォーム
フォーム・ランドマークは、ページ・アイテムやボタンなどの要素のコレクションを含むリージョンを識別します。

メイン
メイン・ランドマークは、ページのプライマリ・コンテンツを識別します。

各ページには、メイン・ランドマークを1つのみ含める必要があります。APEXページの最も一般的なパターンは、このメイン・ランドマークがページ・テンプレートから取得される場合です。通常、個々のリージョンをメイン・ランドマークとして手動で定義する必要はありません。

ナビゲーション
ナビゲーション・ランドマークは、アプリケーションまたはページ・コンテンツ・ナビゲーションに使用されるリンクのグループ(リストなど)を識別する方法を提供します。

リージョン
リージョン・ランドマークは、特定の目的に関連するコンテンツを含む認識可能なセクションであり、ユーザーがセクションに簡単にナビゲートし、セクションをページの要約にリストしておくことは十分に重要です。これは、APEXリージョンで最も一般的なランドマーク・タイプです。

リージョン・ランドマークを使用して、他の名前付きランドマークが適切に記述されていないコンテンツを識別できます。

検索
検索ランドマークには、アプリケーション内のコンテンツの検索機能を作成する要素(通常はページ・アイテムおよびボタン)のコレクションが含まれます。

親トピック: ランドマーク

4.3.1.1.2 APEXでのランドマーク・サポート

APEXでのランドマーク・サポートについて学習します。

APEXでは、ランドマークはフレームワークの様々な場所(通常はページ・テンプレート、特定のコンポーネント内およびリージョン・レベル)で定義されます。APEX開発者として、適切なランドマークを使用してリージョンを定義することが、適切なページ・ランドマーク構造を実現するために不可欠です。

リージョンを操作する場合、これらのリージョンをページのランドマークとして含める(または含めない)方法に柔軟性があります。これには、ページ・デザイナでの次のオプションが含まれます。

  • ランドマークの使用: リージョンをランドマークとして公開するかどうかを切り替えます。たとえば、ページ・デザイナでレイアウト目的でのみ使用され、スクリーン・リーダー・ユーザーに公開する価値がない場合は、リージョンをランドマークとして公開しないこともできます。
  • ランドマーク・タイプ: ランドマークのタイプを定義します。これは、現在のリージョンのテンプレート・デフォルトまたはカスタムのいずれかです。これは、テンプレートのデフォルトか、現在のリージョンのカスタムのどちらかになります。
  • ランドマーク・ラベル: ランドマークにラベルを付ける場合は、リージョン・タイトル(デフォルト)を使用するか、リージョンにカスタム・ランドマーク・ラベルを定義できます。

    ノート:

    ラベルが定義されていない場合、リージョン・タイトルがランドマーク・ラベルとして使用されます。
ユーザー・エクスペリエンスを本当に向上させる優れたラベルを提供することが重要です。良いラベルは次のとおりです。
  • ページ上で一意
  • 長すぎない(3語以下)
  • リージョン・コンテンツの目的の正確な説明。たとえば、Edit Employee SmithまたはUseful Linksです。

ヒント:

ランドマーク・ロールはラベルに使用しないでください。たとえば、navigationを2回通知するスクリーン・リーダーを回避するには、ナビゲーション・ランドマークのラベルをApplication NavigationではなくApplicationにする必要があります。

landmark_toggle.pngの説明が続きます
図landmark_toggle.pngの説明

ノート:

ページのリージョンにこれらのオプションが表示されない場合は、現在のテーマのリージョン・テンプレートで「テンプレート」、「定義」の下に#REGION_LANDMARK_ATTRIBUTES#置換文字列が定義されていないためです。

テーマ開発者は、ランドマークを完全にサポートするために、テンプレートに「デフォルト・ランドマーク・タイプ」および「リージョン・タイトルHTML ID」プロパティを定義する必要があります。ユニバーサル・テーマを使用する場合は、テーマを最新バージョンにリフレッシュしてください。最新バージョンのユニバーサル・テーマでは、すべてのリージョン・テンプレートに対してこれらの属性が定義されています。

関連項目:

実行時開発者ツールバー**(Oracle APEXアプリケーション・ビルダー・ユーザー・ガイド)。

テンプレート・オプションとの相互作用

リージョン・テンプレート・オプション「ヘッダー」は、リージョンのランドマーク定義に影響します。このテンプレート・オプションが「非表示」に設定されている場合、APEXでは、このリージョン・タイトルをアシスティブ・テクノロジに公開せず、ランドマークを非表示にするとみなされます。


landmark_visibility_options.pngの説明が続きます
図landmark_visibility_options.pngの説明

開発ツールバーを使用したページ構造の視覚化

開発者ツールバーには、ページに含まれるランドマークを視覚化するオプションがあり、適切なランドマークが定義されているかどうかのテストに役立ちます。


図landmark_dev_toolbar.pngの説明が続きます
図landmark_dev_toolbar.pngの説明

「ランドマークの表示」を選択すると、ページに定義されているランドマーク(タイプおよびラベルを含む)を表示するオーバーレイがページの実行時に作成されます。ページ・ランドマークをレビューする際の注意事項は次のとおりです。

  • 「バナー」、「コンテンツ情報」および「メイン」ランドマークをページごとに1回定義します。ページにこれらが複数ある場合は、ランドマーク・タイプを変更します。
  • ラベルが適切なラベルのガイドライン(ページ上では一意、長すぎず、ラベルにランドマーク・ロールを含めない)を満たしていることを確認します。
  • 最上位レベルで「バナー」、「メイン」、「補足」および「コンテンツ情報」を定義します。これらのランドマークは、ページの他のどのランドマークにも含まれていてはいけません。これらのいずれかが他のランドマークに含まれている場合は、それらを移動するか、ランドマーク・タイプを変更する必要があります。
  • 各ランドマーク・タイプがコンテンツに適していることを確認してください。たとえば、フォーム・アイテムは「フォーム」ランドマークにあり、検索機能は「検索」ランドマークにあります。
  • アイテム、ボタン、リージョン、メニューなど、認識可能なすべてのコンテンツがランドマークに含まれているため、ユーザーが誤ってコンテンツを見逃すことはありません。ランドマーク・リージョン外のコンテンツはアクセシビリティの問題点です。この問題は、コンテンツを適切なランドマーク内に再配置することで修正できます。

親トピック: ランドマーク

4.3.1.2 見出し

見出しと見出しレベルについて学習します。

スクリーン・リーダーのユーザーは、ページのすべての見出し要素を確認して、ページ構造を理解できます。見出しの定義には、見出しレベルと見出しテキストの定義が含まれます。見出しレベルは、Hの後にレベル番号を付けて示されます。たとえば、第3レベルの見出しはH3です。

見出しのレベルは、ページ・コンテンツを一意に識別するためにページ上に1つのH1を使用し、次にH2 (および後続の)要素を階層的にネストする必要があります。

H1ヘッダー

ページにブレッドクラム・リージョンを含めて一意のH1を作成します。アプリケーションの作成ウィザードを使用して、ウィザードで定義されたページの階層に基づいてブレッドクラムを自動的に生成するか、手動でアプリケーションにブレッドクラムを構成できます。デフォルトでは、ページの最後のブレッドクラム・エントリはH1となります。

あるいは、ユニバーサル・テーマのヒーロー・リージョン・テンプレートを使用します。リージョン・テンプレートでは、デフォルトでページにリージョン・タイトルをH1テキストとしてレンダリングします。これは、現在のアプリケーションのレイアウトおよびデザインがブレッドクラムを保証しない場合に便利です。

ヒント:

2つ以上のH1要素を作成しないよう、各ページに1つのみのヒーロー・リージョンを使用してください。

H2ヘッダー

H1の後、ユニバーサル・テーマのリージョン・テンプレートの多くは、ページのその他のコンテンをリージョン・タイトルのまわりにH2でレンダリングします


h2_regions.pngの説明が続きます
図h2_regions.pngの説明

H2は、次の見出し構造の例のような、ページ上のネストされていないリージョンに適しています。
H1: Charts
	H2: Region 1
	H2: Region 2
	H2: Region 3
	H2: Region 4
このセマンティック構造は、すべてのユーザーが、現在のページを目で視覚的に、またスクリーン・リーダーを使用して聴覚的にスキャンするうえで役に立ちます。

H3およびその他のサブリージョン・ヘッダー

ユニバーサル・テーマでは、H2リージョン内でネストされたサブリージョンがある場合など、H2より後のヘッダーは自動的にサポートしません。

h2_regions_with_h3_regions.pngの説明が続きます
図h2_regions_with_h3_regions.pngの説明

デフォルトでは、APEXは、H2を標準リージョン・テンプレート内のネストされたサブリージョン(上の例ではリージョン4.1および4.2)に適用します。これは、スクリーン・リーダーのユーザーがこれらのサブリージョンが親リージョンと同様に重要である、またはリージョンが親リージョンの祖先ではないと間違って信じてしまう可能性があるため、アクセシビリティの問題が生じます。 

H1: Charts
	H2: Region 1
	H2: Region 2
	H2: Region 3
	H2: Region 4
	H2: Region 4.1
	H2: Region 4.2

これらのサブリージョンを適切に構造化するには、標準リージョン・テンプレートを複製し、コード・エディタを使用してテンプレート定義のH2タグをH3に手動で置き換える必要があります。

ヒント:

リージョンをコピーするには、Oracle APEXアプリケーション・ビルダー・ユーザーズ・ガイドの「新しいテンプレートの作成」を参照し、「既存のテンプレートのコピーとして」オプションを選択します。

サブリージョンをH3に変更しても、要素の構造に影響するのみで、アクセシビリティのために必要なスタイルには影響しません。


region_definition.pngの説明が続きます
図region_definition.pngの説明

この結果、次のヘッダー構造になります。

H1: Charts
	H2: Region 1
	H2: Region 2
	H2: Region 3
	H2: Region 4
		H3: Region 4.1
		H3: Region 4.2

重要:

標準リージョン・テンプレートをコピーする際には、次の問題点に注意してください。
  • コピーされたテンプレートがテーマのサブスクリプションを保持し、APEXをアップグレードした後にテーマをリフレッシュできる間は、コピーされたテンプレートは自動的にアップグレードされません。このテンプレートのマークアップを変更した場合には、リフレッシュ後にテンプレートを手動で変更するか再コピーすることが必要な場合があります。
  • アプリケーションのさらに深いヘッダー・レベル(H3, H4, H5...)のそれぞれに対して、手動でテンプレートを追加する必要があります。今後のAPEXリリースでは、テンプレートを追加しなくてもヘッダー・レベルを容易に制御できるようにすることを計画しています。

リージョン・タイトル

ユニバーサル・テーマはリージョン・タイトルをリージョンのヘッダー・テキストとして使用するため、ほとんどのリージョン・タイプに対して意味のあるタイトルを定義する必要があります。

わかりやすいタイトルはアクセシビリティにとって不可欠です。デフォルトでは、タイトルは画面に表示されます。ただし、目の見えるユーザーがリージョンのコンテンツを周囲のページ・コンテンツからすばやく見分けられるときなど、リージョンの可視タイトルが不要な場合があります。このような場合にも、スクリーン・リーダーのユーザーに対してはヘッダー・テキストを提供する必要があります。このためには、リージョンを選択します。プロパティ・エディタで、「テンプレート・オプション」を開き、「ヘッダー」属性を非表示だがアクセス可能に設定します。

ヒント:

「リージョン・タイトルの編集」ページを使用して、アプリケーション内のすべてのリージョン・タイトルを確認および更新できます。すべてのタイトル、特にコンテキストに応じて問題となる可能性のある同じページにある同じタイトルの付いたリージョンに対して、正確性および意味を確認する必要があります。

関連項目:

Oracle APEXアプリケーション・ビルダー・ユーザーズ・ガイドの「ページ固有のユーティリティへのアクセス」

親トピック: ページ構造

4.3.2 レポート・リージョン

レポート行ヘッダー列を定義すると、レポート・リージョンにアクセスしやすくなります。

クラシック・レポート、対話モード・レポートおよび対話グリッドでは、レポート行ヘッダー列を定義する方法が用意されています。それにより、スクリーン・リーダーのエクスペリエンスが大幅に改善されます。行ヘッダー列は、「値で行を識別」列属性を使用して定義されます。

データ行の識別に役立つ列値または列値の組合せを定義します。これは、個人データの場合は姓と名、顧客データの場合は顧客名などになります。

スクリーン・リーダー・ユーザーがレポートの異なる行に移動した場合、新しい行に移動するとすぐに、行を識別するように定義された列が行ヘッダーとして通知されます。「値で行を識別」が定義されていない場合、レポートを移動するときに、これらのユーザーが自分の位置を確認することは非常に困難です。

親トピック: リージョン

4.3.3 対話グリッド・リージョン

対話グリッドにキーボードで完全にアクセスできます。

Oracle Application Express 5.1で導入された対話グリッドは、強力なレポートとグリッドベースの編集を1つのコンポーネントに結合します。ユーザーはすべての対話グリッド機能にキーボードのみでアクセスできるため、すべてのユーザーがグリッドをナビゲートして、キーボードを使用してデータを編集できます。対話グリッドでのキーボード・サポートをすべて示すリストについては、「対話グリッド・リージョン」を参照してください。

親トピック: リージョン

4.3.4 対話モード・レポート・リージョン

対話モード・レポートでは、データ表ラベルおよび編集アイコンの行固有のテキストを利用できます。

データ表のアクセスしやすいラベル

Oracle APEXはレンダリングされたデータ表に対して次のSUMMARYテキストを生成します。

Region = [region title], Report = [current saved report name], View = [current View], Displayed Rows Start = [current start of rows displayed, Displayed Rows End = [current end of rows displayed], Total Rows = [total number of rows]

このテキストはデータ表を識別するため、アシスティブ・テクノロジのユーザーに対して多くのコンテキスト情報を提供します。

編集アイコン・リンク・テキスト

レポートとフォームを作成する際、APEXでは2つのページ間にリンクを生成して、特定のレコードを編集できるようにします。すべての行に対して生成されたリンク・テキストは、デフォルトでEditとなります。このテキストは、(現在のページのすべてのリンクを聞く)スクリーン・リーダーのユーザーが、リンクの目的およびリンクがどこに飛ぶかを理解できるように、意味のあるラベルにする必要があります。リンク・テキストは、レポートの現在の行に固有のものである必要があります。たとえば、お客様のレポートに対しては、リンク・テキストはEdit Customer: SMITHなどとすることができます。

「属性」ノードを選択して対話モード・レポートのリージョンのリンク・テキストを定義し、プロパティ・エディタで「リンク」列を開き、「リンク列」を「単一行ビューへのリンク」または「カスタム・ターゲットへのリンク」に設定して、「リンク・アイコン」フィールドの代替テキストを更新できます。

見えるリンク・テキストが使用されていないため、リンクはインライン・イメージの代替テキストをリンク用のテキストとして使用します。#CUSTOMER_NAME#などの置換文字列を使用して、現在の行を最適に識別している列をターゲットにできます。

関連項目:

Oracle APEXアプリケーション・ビルダー・ユーザーズ・ガイドの「対話モード・レポート属性の編集」

親トピック: リージョン

4.3.5 クラシック・レポート・リージョン

クラシック・レポートでは、データ表ラベルおよび編集アイコンの行固有のテキストを利用できます。

データ表

デフォルトでは、Oracle APEXはリージョン・タイトルと同じSUMMARYテキストを生成します。これは、アシスティブ・テクノロジのユーザーに対してデータ表を特定します。

リンクの編集テキスト

レポートとフォームを作成する際、APEXでは2つのページ間にリンクを生成して、特定のレコードを編集できるようにします。すべての行に対して生成されたリンク・テキストは、デフォルトでEditとなります。このテキストは、(現在のページのすべてのリンクを聞く)スクリーン・リーダーのユーザーが、リンクの目的およびリンクがどこに飛ぶかを理解できるように、意味のあるラベルにする必要があります。リンク・テキストは、レポートの現在の行に固有のものである必要があります。たとえば、お客様のレポートに対しては、リンク・テキストはEdit Customer: SMITHなどとすることができます

「属性」ノードを選択して対話モード・レポートのリージョンのリンク・テキストを定義し、プロパティ・エディタで「リンク」列を開き、「リンク列」を「単一行ビューへのリンク」または「カスタム・ターゲットへのリンク」に設定して、「リンク・アイコン」フィールドの代替テキストを更新できます。

見えるリンク・テキストが使用されていないため、リンクはインライン・イメージの代替テキストをリンク用のテキストとして使用します。#ENAME#などの置換文字列を使用して、現在の行を最もよく識別する列をターゲットにできることに注意してください。

親トピック: リージョン

4.3.6 JETチャート・リージョン

JETチャート・リージョンには、アクセシビリティを向上させるための複数の設定があります。

Oracle Application Express 5.1では、Oracle JETデータ視覚化コンポーネントに基づくチャート(JETチャート)を導入しています。5.1より前のリリースではAnyChartに基づくチャートが使用されていましたが、多くのアクセシビリティの問題がありました。

キーボードおよびタッチのサポートを含むOracle JETデータ視覚化コンポーネントの詳細は、Oracle JETドキュメントを参照してください。

次の項では、チャートのアクセシビリティを確保するために特に役立つチャート設定の一部を説明します。

チャート・タイトル

チャート・タイトルは、チャートの横のチャート・リージョンに表示されます。これは、チャート・ページ・セクションに対するアクセスしやすいラベルでもあります。ページ・デザイナでは、チャート・タイトルはチャートの「属性」ノードに定義されます。

リージョン内に1つのみのチャートが表示されている場合には、視覚的な重複を避けるため、リージョン・タイトルを非表示にすることを検討してください。「テンプレート・オプション」ダイアログのヘッダー・リージョンの外観設定を「Hidden but accessible」に変更してリージョン・タイトルを変更できます。これにより、リージョン・タイトルがページから消えますが、アシスティブ・テクノロジのヘッダーは保持されます(ユーザーがページの現在のヘッダーをざっと読み取って理解する場合、このタイトルを認識できます)。

ツールチップ

ツールチップは、マウスが特定のチャート・セクション上に重ねられるか、キーボードがこのセクションにフォーカスがあるときに表示されます。さらに、ツールチップはチャートのセクションに対するアクセスしやすいラベルです。たとえば、スクリーン・リーダーのユーザーがチャート・セクションをナビゲートしてるときには、このツールチップが通知されます。

ツールチップを表示するには、プロパティ・エディタの「Rendering」ツリーのチャートの「属性」ノードを選択して、「表示」フィールドを「はい」に設定し、最後にツールチップに含める情報を選択します。これは、次の2つの方法で定義できます。
  • ページ・デザイナの「ツールチップ」グループに表示されたその他の属性を調整します。これにより、必要に応じてチャートに対する「シリーズ名」、「グループ名」、「値」および「ラベル」情報の表示を制御できます。たとえば、チャートにシリーズが1つのみで、ツールチップのシリーズ名を除外する場合には、「シリーズ名の表示」を「いいえ」に設定します。
  • 高度にカスタマイズされたツールチップには、データベース表の列がツールチップのソースとして使用されるように設定します。これは、「Rendering」ツリーのチャートの下にネストされた個々の「シリーズ」ノードで構成できます。

自動リフレッシュ機能

開発者は、チャート属性で自動リフレッシュ、間隔を定義できます。これにより、定義された間隔に従ってチャート・リージョンが自動的にリフレッシュされます。このタイプの自動リフレッシュは、アシスティブ・テクノロジのユーザーの混乱を招くため、アクセシビリティのためには、この機能を回避することをお薦めします。

親トピック: リージョン

4.3.7 ユニバーサル・テーマのカルーセル・リージョン

カルーセル・コンテナには、アクセシビリティに重要な関係を持つタイマー設定があります。

ユニバーサル・テーマを使用する場合は、カルーセル・コンテナ・リージョン・テンプレートを複数のサブリージョンと組み合せて、カルーセル・スタイル機能をアプリケーションに組み込みます。

カルーセル・コンテナで、タイマー・テンプレート・オプションを使用して、ユーザーがボタンを選択したときにカルーセルが更新されるかどうか、または定義された間隔後にカルーセルが自動的に更新されるかどうかを選択します。定義した間隔オプションのいずれかを選択した場合、ユーザーはアニメーションを一時停止または停止できません。

アクセシビリティを向上させるには、デフォルト・オプションのタイマーなしを使用する必要があります。これにより、ユーザーはカルーセルの次のサブリージョンに切り替えるタイミングを選択できます。

親トピック: リージョン