ヘッダーをスキップ
Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド
11gリリース1（11.1.1）
B52029-02
  目次
目次		 索引
索引
戻る
戻る 		 次へ
次へ		  

22 アクセス可能なADF Facesページの開発

この章では、キーボードのショートカット、およびコンポーネント名や状態に関するテキストの説明を含むアクセシビリティ・サポートを、ADF Facesコンポーネントに追加する方法を説明します。部分ページ・レンダリング、スクリプト、スタイル、特定ページおよびナビゲーション構造を使用するADFページのアクセシビリティ・ガイドラインについても説明されています。

この章に含まれる項は次のとおりです。

22.1 アクセス可能なADF Facesページの概要

アクセシビリティとは、弱視や全盲、難聴またはその他の身体的な制限などの障害を持つユーザーが、アプリケーションを使用できるようにすることです。つまり、マウスなし（キーボードのみ）で使用でき、全盲または弱視のユーザーはスクリーン・リーダーを使用でき、音、色またはアニメーションやタイミングに依存せずに使用できるアプリケーションを作成することです。

Oracleソフトウェアには、http://www.oracle.com/accessibility/standards.htmlにある標準の解説を使用した、Web Content Accessibility Guidelines（WCAG）1.0 AAの標準が実装されています。

クライアント側のスクリプト、特に非同期のJavaScriptおよびXML（AJAX）を使用した場合に生じていたフレームワークとプラットフォームのさらなる問題は、オラクル社のアクセシビリティ・ストラテジで対応しています。

ADF Facesのユーザー・インタフェース・コンポーネントには、視覚的および身体的な障害のあるユーザーのために、組込みのアクセシビリティ・サポートが用意されています。スクリーン・リーダーのような非視覚的なメディアへのレンダリングを行うWebブラウザなどのユーザー・エージェントにより、コンポーネントのテキスト説明が読み上げられ、障害を持つユーザーに有益な情報が提供されます。アクセス・キー・サポートは、キーボードのみを使用してコンポーネントやリンクにアクセスする代替の方法を提供します。ADF Facesのアクセシビリティ監査ルールにより、アクセス可能なHTMLマークアップを使用して、アクセス可能なイメージ、表、フレーム、フォーム、エラー・メッセージおよびポップアップ・ウィンドウの作成が指示されています。

提供されている、コンポーネント固有のADF Facesのアクセシビリティ・ガイドライン、ページやナビゲーション構造に従うのは便利ですが、アクセシビリティ標準に関する理解を深めることや、支援技術を使用したアクセシビリティのテスト実行のかわりにはなりません。

22.2 アクセス可能なADF Facesコンポーネントおよびページの開発

コンポーネント固有のアクセシビリティのガイドラインは、表22-1「ADF Facesコンポーネントのアクセシビリティ・ガイドライン」に説明されています。ガイドラインでは、例やヒントとともに、関連するプロパティが説明されています。ADF Facesのアクセシビリティ・ルールに準拠していることを監査する方法の詳細は、22.2.2項「ADF Facesのアクセシビリティ・ルールの監査実行方法」を参照してください。

アクセス可能なページおよびナビゲーション構造を開発するには、次に示す追加のアクセシビリティ・ガイドラインに従います。

22.2.1 ADF Facesコンポーネントのアクセシビリティ・ガイドラインの使用

アクセス可能なADF Facesコンポーネントを開発するには、表22-1に説明されているガイドラインに従います。リストされていないコンポーネントには、アクセシビリティ・ガイドラインはありません。


注意:

アクセシビリティ・ガイドラインでlabelプロパティが参照される場合、可能な場合はlabelAndAccessKeyプロパティが使用されます。これが推奨オプションです。

特に記載がないかぎり、次のようにして、ADF Facesの入力および選択のコントロールにもラベルを設定できます。

  • af:outputLabelコンポーネントにforプロパティを指定

  • af:panelLabelAndMessageコンポーネントにforプロパティを指定

表22-1 ADF Facesコンポーネントのアクセシビリティ・ガイドライン

コンポーネント ガイドライン

af:chooseColor

すべてのaf:chooseColorコンポーネントに、af:chooseColorコンポーネントを指すchooseIdプロパティを含むaf:inputColorコンポーネントが1つ以上存在する必要があります。

af:chooseDate

すべてのaf:chooseDateコンポーネントに、af:chooseDateコンポーネントを指すchooseIdプロパティを含むaf:inputDateコンポーネントが1つ以上存在する必要があります。

af:commandButton

text、textAndAccessKeyまたはshortDescのいずれかのプロパティが指定されている必要があります。テキストは実行するアクションを指定し、コンテキスト外で読んでも意味がわかる必要があります。たとえば、「ここをクリック」ではなく、「索引へ移動」とします。

af:commandLink

textプロパティを指定します。テキストは、ユーザーが移動するリンク先を指定し、コンテキスト外で読んでも意味がわかる必要があります。たとえば、「ここをクリック」ではなく、「索引へ移動」とします。同じ場所に移動する複数のリンクには同じテキストを使用し、一意のリンクには一意のテキストを使用する必要があります。

af:commandMenuItem

af:commandNavigationItem

af:comandToolbarButton

text、textAndAccessKeyまたはshortDescのいずれかのプロパティが指定されている必要があります。

af:dialog

af:document

titleプロパティを指定します。

af:goButton

text、textAndAccessKeyまたはshortDescのいずれかのプロパティが指定されている必要があります。テキストは実行するアクションを指定し、コンテキスト外で読んでも意味がわかる必要があります。たとえば、「ここをクリック」ではなく、「索引へ移動」とします。

af:goLink

textプロパティを指定します。テキストは、ユーザーが移動するリンク先を指定し、コンテキスト外で読んでも意味がわかる必要があります。たとえば、「ここをクリック」ではなく、「索引へ移動」とします。同じ場所に移動する複数のリンクには同じテキストを使用し、一意のリンクには一意のテキストを使用する必要があります。

af:image

shortDescプロパティを指定します。イメージを修飾目的のみで使用し、伝える情報がない場合は、shortDescを空の文字列に設定します。

複雑な説明が必要なイメージには、longDescURLプロパティを使用します。たとえば、グラフには、グラフを構成するすべての詳細を含む説明ファイルが必要です。

af:inlineFrame

shortDescプロパティを指定します。

af:inputColor

af:inputComboboxListOfValues

af:inputDate

af:inputFile

af:inputListOfValues

af:inputNumberSlider

af:inputNumberSpinbox

af:inputRangeSlider

af:inputText

labelプロパティを指定します。

af:inputComboboxListOfValuesおよびaf:inputListOfValuesコンポーネントには、searchDescも指定する必要があります。

af:outputFormatted

valueプロパティに有効なHTMLを指定する必要があります。

af:outputLabel

ADF Facesの入力または選択コントロールへのラベル設定に使用する場合は、forプロパティを指定する必要があります。

af:panelBox

af:panelHeader

textプロパティを指定します。

af:panelLabelAndMessage

ADF Facesの入力または選択コントロールへのラベル設定に使用する場合は、forプロパティを指定する必要があります。

af:panelSplitter

af:panelStretchLayout

22.2.6項「ページ構造およびナビゲーションの使用方法」を参照してください。

af:panelWindow

titleプロパティを指定します。

af:poll

コンテンツを更新するためにポーリングを使用する場合は、エンド・ユーザーが間隔を制御できるようにするか、ポーリングではなく更新を明示的に開始できるようにします。

af:query

headerTextプロパティを指定します。

af:quickQuery

searchDescプロパティを指定します。

af:richTextEditor

labelプロパティを指定します。

af:selectBooleanCheckbox

af:selectBooleanRadio

text、textAndAccessKeyまたはlabelのいずれかのプロパティが指定されている必要があります。

af:selectItem

labelプロパティを指定します。af:outputLabelおよびaf:panelMessageAndLabelコンポーネントのfor属性を使用しても、かわりにはなりません。

af:selectManyCheckbox

af:selectManyChoice

af:selectManyListbox

af:selectManyShuttle

af:selectOneChoice

af:selectOneListbox

af:selectOneRadio

af:selectOrderShuttle

labelプロパティを指定します。

af:selectManyShuttleおよびaf:selectOrderShuttleコンポーネントには、leadingHeaderおよびtrailingHeaderプロパティを指定する必要があります。

af:showDetailHeader

textプロパティを指定します。

af:showDetailItem

text、textAndAccessKeyまたはshortDescのいずれかのプロパティが指定されている必要があります。

af:table

af:treeTable

summaryプロパティを指定します。summaryは表の目的を説明します。表をレイアウト目的で使用する場合は、summaryプロパティに空の文字列を指定する必要があります。

すべての表の列に列ヘッダーを作成する必要があります。

22.2.2 ADF Facesのアクセシビリティ・ルールの監査実行方法

JDeveloperには、ADF Facesのアクセシビリティ監査ルールが用意されており、表22-1「ADF Facesコンポーネントのアクセシビリティ・ガイドライン」で説明されている、多くの一般的な要件に準拠しているかどうかが調査および報告されます。監査レポートの実行では、監査プロファイルを作成および実行します。

監査プロファイルを作成する手順:

  1. メイン・メニューから「ツール」→「設定」を選択します。

  2. 「コード監査: プロファイル」ダイアログで、「ADF Facesアクセス・ルール」を除く、すべてのチェック・ボックスの選択を解除します。

  3. 一意の名前でプロファイルを保存して、「OK」をクリックします。

監査レポートを実行する手順:

  1. メイン・メニューから「ビルド」→「コード監査 - target」を選択します。

  2. 作成した監査プロファイルをリストから選択します。

  3. 「OK」をクリックしてレポートを生成します。

監査レポートの結果は、ログ・ウィンドウに表示されます。レポートが完了したら、ログ・ウィンドウのツールバーにある「エクスポート」アイコンをクリックして、結果をHTMLにエクスポートできます。

22.2.3 部分ページ・レンダリングの使用方法

スクリーン・リーダーでは、部分ページ・リクエストでページ全体は再読み上げされません。部分ページ・レンダリング（PPR）によって、スクリーン・リーダーが部分アクションをトリガーしたコンポーネントからページを読み上げます。そのため、部分リクエストをトリガーするコンポーネントの次にターゲット・コンポーネントを配置します。そうしないと、スクリーン・リーダーで更新されたターゲットが読み上げられません。

たとえば、最も一般的なPPRのユースケースは、マスター/ディテール・ユーザー・インタフェースで、マスター・コンポーネントで値を選択すると、ディテール・コンポーネントのページの一部が置き換えられます。このような場合、ドキュメントの順番において、マスター・コンポーネントが常にディテール・コンポーネントの前にあることが必要です。

スクリーン・リーダーやスクリーン・マグニファイアのユーザーには、部分ページ・レンダリング・アクティビティの結果、どのコンテンツが変更されたかを正確に特定するのが難しい場合があります。ページ内のキー・コンポーネント間の関係を識別するインライン・テキスト説明という形で、説明を用意すると役に立ちます。たとえば、マスター/ディテール・シナリオで、マスター・コンポーネントで行が選択されたため、ディテール・コンポーネントが更新されることを示すテキストがあれば助けになります。または、ページの構造やコンポーネント間の関係を説明するヘルプ・トピックも参考になります。

22.2.4 スクリプトの使用方法

クライアント側スクリプトは、宣言的ソリューションがあるアプリケーションの問題にはお薦めできないため、最低限にする必要があります。

スクリプトを使用する際には、次のアクセシビリティ・ガイドラインに従ってください。

  • コンポーネントDOM（Document Object Model）とは直接通信しないでください。

    ADF Facesコンポーネントは、DOMが変更されると、スクリーン・リーダーと自動的に同期します。DOMとの直接の通信は許可されていません。

  • JavaScriptのタイムアウトは使用しないでください。

    スクリーン・リーダーは、JavaScriptのsetTimeout()またはsetInterval() APIを使用して実装されたタイムアウトへのレスポンスとして行われた変更を確実に追跡するわけではありません。これらのメソッドをコールしないでください。

  • キーボードに相当するものを用意してください。

    マウスを使用できないユーザーもいます。たとえば、キーボードしか使用できないユーザー、または代替の入力デバイスや音声認識ソフトウェアなどのテクノロジを使用するユーザーもいます。クライアント側リスナーを使用して機能を追加する場合、その機能には、デバイスに依存しない方法でアクセスできる必要があります。事実上、これは次のことを意味します。

    • すべての機能にキーボード・イベントを使用してアクセスできる必要があります。

    • クリック・イベントはmouseupまたはmousedownより優先される必要があります。

    • mouseupまたはmousedownイベントは、クリック・イベントを介して追加で使用できる必要があります。

  • フォーカスを変更しないでください。

    フォーカスを変更すると、コンテキストが変更されるため、スクリーン・リーダーのユーザーが混乱する可能性があります。アプリケーションではプログラムによるフォーカスの変更を避け、フォーカス・イベントへのレスポンスとしては実行しないでください。また、標準のタブ移動が中断されるため、フォーカス変更へのレスポンスとしてポップアップ・ウィンドウを表示しないでください。

  • ポップアップ・トリガーを明示的に指定してください。

    スクリーン・リーダーは、インライン・ポップアップの起動に自動的には応答しません。スクリーン・リーダー・モードの際に、スクリーン・リーダーがポップアップ・コンテンツを読み上げるよう強制するため、ポップアップ・ウィンドウが開かれた直後に、リッチ・クライアント・フレームワークによりキーボード・フォーカスがそのウィンドウに明示的に移動されます。リンクやボタンなどの明示的なポップアップ・トリガーを用意するか、キーボードやスクリーン・リーダーでアクセスできるその他の方法で同じ情報を使用できる必要があります。

22.2.5 スタイルの使用方法

ADF Facesコンポーネントはすでにスタイル設定されているため、Cascading Style Sheet（CSS）を使用して直接デフォルトの外観を変更しないでください。

スタイルを使用する際には、次のアクセシビリティ・ガイドラインに従ってください。

  • コンポーネントのデフォルトの外観をオーバーライドしないでください。

    CSSを使用して、ADF Facesコンポーネントのデフォルトの外観を変更しないでください。CSSを使用してコンポーネントの外観を変更すると、アクセシビリティに影響する可能性があります。たとえば、色を変更すると色の対比の問題が発生します。

  • 拡大縮小が可能なサイズ単位を使用します。

    CSSを使用してサイズを指定する場合は、絶対単位ではなく、フォント・サイズに対して拡大縮小が可能なサイズ単位を使用します。たとえば、pxではなく、em、exまたは%の単位を使用します。弱視のユーザーはフォント・サイズを拡大することがあり、高さが固定または絶対に制限されているコンテンツが欠ける原因になるため、CSSを使用して高さを指定する場合は特に重要です。

  • CSSの位置設定は使用しないでください。

    CSSの位置設定は、拡大されたレイアウト・コンポーネントの位置設定の場合にのみ使用します。それ以外にはCSSの位置設定を使用しないでください。

22.2.6 ページ構造およびナビゲーションの使用方法

ページ構造およびナビゲーション・ツールを使用する際には、次のアクセシビリティ・ガイドラインに従ってください。

  • af:panelStretchLayoutコンポーネントではなく、af:panelSplitterコンポーネントを使用します。

    ジオメトリ管理レイアウトを実装する際、可能な場合はaf:panelStretchLayoutではなく、af:panelSplitterを優先します。これにより、ユーザーは次の操作を実行できます。

    • 必要に応じて領域を再配分できます。

    • すぐに使用しないコンテンツを非表示にするか閉じることができます。

    これらのページ構造の特性はすべてのユーザーに便利です。特に、弱視のユーザーやスクリーン・リーダーを使用するユーザーの役に立ちます。

    たとえば、ページ上部にあるクロム・ナビゲーション・バーは、af:panelStretchLayoutコンポーネントのtopファセットではなく、垂直のaf:panelSplitterコンポーネントのfirstファセットに配置する必要があります。これにより、ユーザーは、バーが使用する領域を減らすことや、すべてを非表示にすることができます。同様に、左、中央または右ペインがあるレイアウトでは、水平のスプリッタを使用してペインをレイアウトします。

  • フロー・レイアウト・コンテンツのスクロールを有効化します。

    af:panelSplitterまたはaf:panelStretchLayoutなど、ジオメトリ管理される親コンポーネント内のレイアウト・コントロールなどのフロー・レイアウト・コンテンツをネストさせる際には、layout="scroll"が指定されたaf:panelGroupLayoutをフロー・レイアウト・コンテンツでラップします。これにより、コンテンツが収まらないほどにフォント・サイズが拡大された場合に、スクロールバーが表示されます。これを実行しないと、コンテンツの欠落や切捨ての原因になります。

  • ページ構造の識別には、ヘッダーベースのコンポーネントを使用します。

    HTMLヘッダー要素は、画面の可読性において重要な役割を果します。通常、スクリーン・リーダーを使用すると、HTMLヘッダー全体を調査または移動して、ユーザーはページの全体的な構造を理解できます。次のコンポーネントを含め、HTMLヘッダーのコンテンツをレンダリングするコンポーネントを介して、ページの主要部分を確認します。

    • af:panelHeader

    • af:showDetailHeader

    • af:panelAccordionのaf:showDetailItem（ペインの各アコーディオンによりタイトル領域のHTMLヘッダーがレンダリングされます。）

  • ページ位置の識別には、af:breadCrumbsコンポーネントを使用します。

    アクセシビリティ標準では、ユーザーがWebサイトまたはアプリケーション内での位置を確認できる必要があります。af:breadCrumbsを使用するとこれを実現できます。

22.3 ADF Facesコンポーネントへのアクセス・キーの定義

af:inputText、af:commandButtonおよびaf:goLinkなど、ADF Facesの入力、コマンドおよび実行コンポーネントに対するアクセス・キー・サポートには、ラベルの定義およびキーボード・ショートカットの指定が含まれます。[Tab]キーを使用してWebアプリケーションのあるコントロールから次のコントロールへ移動することが可能ですが、キーボード・ショートカットはより便利で効率的です。

コンポーネントのアクセス・キーを指定するには、コンポーネントのaccessKey属性を、コンポーネントに簡単にアクセスするために使用するキーボード文字（またはニーモニック）に設定します。属性は、プロパティ・インスペクタ、または&ampエンコーディングを使用してページ・ソースで設定できます。


注意:

アクセシビリティ・モードがscreenReaderモードに設定されている場合は、アクセス・キーは表示されません。詳細は、22.4項「アクセシビリティ・モードの選択」を参照してください。

同じアクセス・キーを複数のコンポーネントにバインドできます。同じアクセス・キーが同一ページ内の複数の場所に表示される場合、レンダリング・エージェントは同じキーでアクセスできるコンポーネントを巡回します。つまり、アクセス・キーが押されるたびに、フォーカスがコンポーネント間を移動します。最後のコンポーネントに到達すると、フォーカスは最初のコンポーネントに戻ります。

af:goButtonおよびaf:goLinkコンポーネントでアクセス・キーを使用すると、一部のブラウザではアクセス・キーがすぐにアクティブ化されます。ブラウザによっては、ページの2つ以上の実行コンポーネントに同じアクセス・キーが割り当てられている場合、同じアクセス・キーでアクセスできるコンポーネントを巡回せずに、最初のコンポーネントがアクティブ化されます。

22.3.1 ADF Facesコンポーネントのアクセス・キーの定義方法

アクセス・キーを定義するコンポーネントのプロパティ・インスペクタで、accessKey属性フィールドにニーモニック文字を入力します。テキスト、ラベル、値およびニーモニック文字を同時に設定する場合は、関連する属性フィールドのニーモニック文字の前にアンパサンド（&）文字を使用します。

ADF Facesの入力、コマンドおよび実行コンポーネントにキーボード文字を指定するには、次の4つの属性のいずれか1つを使用します。

  • accessKey: コンポーネントへの簡単なアクセスを可能にするために使用するニーモニック文字の設定に使用します。コマンドおよび実行コンポーネントの場合、この属性によって指定された文字がインスタンス・コンポーネントのテキスト属性に存在する必要があります。存在しない場合、ADF Facesには、コンポーネントにアクセス・キーがあることは表示されません。

    例22-1に、af:goLinkコンポーネントのアクセス・キーを文字hに設定するコードを示します。ユーザーが[Alt]キーを押しながら[H]キーを押すと、コンポーネントのテキスト値がフォーカスされます。

    例22-1 定義されているaccessKey属性

    <af:goLink text="Home" accessKey="h">

  • textAndAccessKey: アンパサンド（&）文字を使用して、コンポーネントのテキストとニーモニック文字を同時に設定する場合に使用します。JSPXファイルでは、従来のアンパサンド表記は&amp;です。JSPファイルでは、アンパサンド表記は単純に&です。プロパティ・インスペクタでは&のみが必要です。

    例22-2に、ボタン・テキストをHomeに指定し、アンパサンド文字の直後の文字であるHを、af:commandButtonコンポーネントのアクセス・キーに設定するコードを示します。

    例22-2 定義されているtextAndAccessKey属性

    <af:commandButton textAndAccessKey="&amp;Home"/>

  • labelAndAccessKey: 従来のアンパサンド表記を使用して、入力コンポーネントのlabel属性およびアクセス・キーを同時に設定する場合に使用します。

    例22-3に、ラベルをDateに指定し、アンパサンド文字の直後の文字であるaを、af:selectInputDateコンポーネントのアクセス・キーに設定するコードを示します。

    例22-3 定義されているlabelAndAccessKey属性

    <af:inputSelectDate value="Choose date" labelAndAccessKey="D&amp;ate"/>

  • valueAndAccessKey: 従来のアンパサンド表記を使用して、value属性およびアクセス・キーを同時に設定する場合に使用します。

    例22-4に、ラベルをSelect Dateに指定し、アンパサンド文字の直後の文字であるeを、af:outputLabelコンポーネントのアクセス・キーに設定するコードを示します。

    例22-4 定義されているvalueAndAccessKey属性

    <af:outputLabel for="someid" valueAndAccessKey="Select Dat&amp;e"/>
<af:inputText simple="true" id="someid"/>

アクセス・キー修飾子は、ブラウザおよびプラットフォームによって異なります。すでにブラウザのメニュー・ショートカットとして定義されているアクセス・キーを割り当てると、ADF Facesコンポーネントのアクセス・キーが優先されます。詳細は、特定ブラウザのドキュメントを参照してください。

一部のブラウザでは、空白をアクセス・キーとして使用する場合は、コンポーネントのラベルまたはテキスト・ラベルで空白をビジュアルに表現する方法がないため、[Alt]+[Space]または[Alt]+スペースバーがアクセス・キーであるという情報をユーザーに提供する必要があります。そのようなブラウザの場合は、shortDesc属性を使用してコンポーネントのツールチップにテキストを指定できます。

22.3.2 ローカライズされたラベルおよびアクセス・キーの定義方法

異なる言語で表示する必要のあるラベルおよびアクセス・キーは、必要に応じて様々な言語バージョンの表示が可能なリソース・バンドルに格納できます。JSF 1.2で使用可能なJSF構成ファイルに<resource-bundle>要素を使用すると、すべてのページにf:loadBundleタグを使用せずに、アプリケーションのすべてのページに対してリソース・バンドルを使用可能にできます。

ローカライズされたラベルおよびアクセス・キーを定義する手順:

  1. リソース・バンドルをシンプルな.propertiesファイルとして作成し、ラベルおよびアクセス・キーの各言語バージョンを保持します。詳細は、21.2.1項「ベース・リソース・バンドルの定義方法」を参照してください。

  2. faces-config.xmlファイルに<locale-config>要素を追加し、アプリケーションのデフォルトおよびサポートされるロケールを定義します。詳細は、21.2.3項「アプリケーションへのロケールおよびリソース・バンドルの登録方法」を参照してください。

  3. 各リソース・バンドルの静的テキストの文字列ごとに、キーと値を作成します。キーは、文字列の一意の識別子です。値は、バンドルの言語でのテキスト文字列です。各値で、アクセス・キーとして定義する文字の前にアンパサンド（&またはamp）を配置します。

    たとえば、次のコードでは、UIStrings.propertiesベース・リソース・バンドルの「Edit」ボタン・フィールドのラベルおよびアクセス・キーが、「Edit」と定義されています。

    srlist.buttonbar.edit=&Edit

    イタリア語のリソース・バンドルUIStrings_it.propertiesでは、次のコードにより、変換可能なラベルおよびアクセス・キーが「Aggiorna」と指定されています。

    srlist.buttonbar.edit=A&ggiorna

  4. アプリケーションのfaces-config.xmlファイルに<resource-bundle>要素を追加します。例22-5に、リソース・バンドルに対するJSF構成ファイルのエントリを示します。

    例22-5 JSF構成ファイルのリソース・バンドル

    <resource-bundle>
   <var>res</var>
   <base-name>resources.UIStrings</base-name>
</resource-bundle>

リソース・バンドルを使用するようにアプリケーションを設定すると、リソース・バンドル・キーが式言語（EL）エディタに表示され、宣言的に割り当てられるようになります。

次の例では、UIコンポーネントがリソース・バンドルにアクセスしています。

<af:outputText value="#{res['login.date']}"/

詳細は、第21章「ページの国際化およびローカライズ」を参照してください。

22.4 アクセシビリティ・モードの選択

ADF Facesには、3つのレベルのアプリケーション・アクセシビリティ・サポートが、<accessibility-mode>要素を使用してtrinidad-config.xmlファイルに構成されています。<accessibility-mode>に使用可能な値は次のとおりです。

22.4.1 trinidad-config.xmlにおけるアクセシビリティ・サポートの構成方法

JDeveloperでは、ADF FacesコンポーネントをJSFページに初めて挿入するときに、trinidad-config.xmlの基礎ファイルが/WEB-INF/ディレクトリに自動的に作成されます。ファイルは、JSF式言語（EL）または静的値を使用して要素プロパティを定義できる単純なXML構造です。ファイル内の要素の順序は関係ありません。XMLファイルを直接編集するか、構造ウィンドウを使用することで、アクセシビリティ・サポートを構成できます。

JDeveloperのtrinidad-config.xmlでアクセシビリティ・サポートを構成する手順:

  1. アプリケーション・ナビゲータで、trinidad.xmlをダブルクリックし、XMLエディタでファイルを開きます。

  2. 次に示すように、エディタに、要素名<accessibility-mode>およびアクセシビリティ・サポートの値（default、screenReaderまたはinaccessible）を入力します。

    <accessibility-mode>screenReader</accessibility-mode>

    このコードでは、アプリケーションのアクセシビリティ・サポートがスクリーン・リーダー・モードに設定されています。

または、構造ウィンドウを使用して値を入力できます。

  1. アプリケーション・ナビゲータで、trinidad-config.xmlファイルを選択します。

  2. 構造ウィンドウで、XMLファイルのルート要素を右クリックして「内部に挿入」メニュー項目を選択し、<accessibility-mode>要素をクリックします。

  3. 構造ウィンドウで新しく挿入された要素をダブルクリックし、プロパティ・インスペクタを開きます。値を入力するか、ドロップダウン・リストから1つ選択します。

trinidad-config.xmlファイルの構成後、プログラムから、あるいはJSF EL式を使用してプロパティ値を取得できます。

たとえば、次のコードでは、アクセシビリティ・モードが明示的に設定されていない場合は、何も返されません。

String mode=ADFFacesContext.getCurrentInstance().getAccessibilityMode;

このEL式の例では、アクセシビリティ・モードが明示的に設定されていない場合は、何も返されません。

<af:outputText value="*#{requestContext.accessibilityMode}"/>

22.5 スクリーン・リーダーをサポートするためのテキストの提供

ADF Facesコンポーネントでは、有効化または無効化ボタンなど、ビジュアルなコンテンツの状態だけでなくテキスト説明も用意することで、テキストのスクリーン・リーダーをサポートしています。

ADF Facesコンポーネントにより自動的に生成されたイメージには、ADF Facesの入力コンポーネントによって表示されるエラーや警告アイコンなど、スクリーン・リーダーまたは非ビジュアル・ブラウザでの読取りが可能な組込みの説明があります。

ユーザーが作成したアイコンから生成されたイメージ、およびaf:commandNavigationItemなどの特定のコンポーネントにより作成されたイメージの場合、ADF Facesでは、ユーザーが指定したテキストまたはアイコン属性の値を使用して、コンポーネント名やその状態を説明するテキストが生成されます。すべてのアイコンおよびイメージに、shortdesc属性が必要です。

例22-6に、タブ付きのナビゲーション・ペインのコード・フラグメントを示します。このペインの2番目のタブ用に生成されるテキストは、Page 2: Currently selected tabです。

例22-6 スクリーン・リーダー用のタブ付きのナビゲーション・ペイン

<af:navigationPane hint="tabs">
  <af:commandNavigationItem text="Page 1" action=#{action.app1}/>
  <af:commandNavigationItem text="Page 2" selected="true"/>
  <af:commandNavigationItem text="Page 3" action=#{action.app2}/>
<af:navigationPane/>

22.5.1 イメージ、アイコンおよびその他のオブジェクトに対するスクリーン・リーダー・サポートの提供方法

shortDesc属性を使用して、オブジェクトに関する簡単な説明を提供します。shortDesc属性は、HTMLのalt属性に変換されます。

背景イメージ、箇条書きまたはオブジェクトを囲む曲線の境界などのレイアウト・イメージは、視覚障害のないユーザーに視覚的な効果をもたらす以外に、有用な情報を伝えません。そのようなイメージを使用する場合でも、イメージにshortDesc属性を設定し、属性値として空の文字列を使用します。

af:selectInputText懐中電灯アイコンの場合は、searchDesc属性を設定して、クライアント・エージェントも読み取ることのできるツールチップ・テキストを指定します。

22.5.2 フレームに対するスクリーン・リーダーのサポートの提供方法

フレームを使用する必要がある場合には、afh:frameBorderLayoutコンポーネントにalternateContentファセットを使用して、フレームのない代替ページへのリンクを作成します。

例22-7に、File ExplorerアプリケーションにおけるalternateContentファセットの使用方法を示します。

例22-7 スクリーン・リーダー・サポートのあるフレーム

<afh:frameBorderLayout shortDesc="File Explorer App">
  ...
  <f:facet name="alternateContent">
    <af:goLink text="Click here for a no frames version"     destination="noframes.html"/>
  </f:facet>
  ...
</afh:frameBorderLayout>

alternateContentセクションは、HTMLのNOFRAMESタグに対応します。

各フレームに、フレーム・コンポーネントのshortDescまたはlongDescURL属性を使用して、コンテンツに関する一般的な説明を指定する必要もあります。longDescURL属性は、フレームの長い説明へのリンクを指定します。長い説明は、shortDesc属性を使用して提供された簡単な説明を補い、スクリーン・リーダーなどのビジュアル以外のユーザー・エージェントにも便利です。

例22-8に、フレームの長い説明へのリンクを指定するためのlongDescURLの使用方法を示します。

例22-8 長い説明を含むフレーム

<afh:frameBorderLayout>
  <f:facet name="left">
    <afh:frame source="frame_leftTest.jspx" name="left" width="30%" shortDesc="Some brief text"/>
  </f:facet>
  <f:facet name="center">
    <afh:frame source="frame_centerTest.jspx" name="contents" longDescURL="link to some longer text"/>
  </f:facet>
  ...
</afh:frameBorderLayout>

22.5.3 表に対するスクリーン・リーダーのサポートの提供方法

表を使用する際には、非視覚的なメディアへのレンダリングを行うユーザー・エージェントのために、summary属性を使用して、表の目的、構造およびコンテンツに関する説明を指定します。

例22-9に、スクリーン・リーダーをサポートするための表におけるsummary属性の使用方法を示します。

例22-9 スクリーン・リーダー・サポートのある表

<af:table summary="This table describes the contents of your shopping bag: item, name, unit price, quantity, and subtotal" value="#{myManagedBean.allItems}" var="shop">
  <af:column>
    <f:facet name="header">
      <af:outputText value="Name"/>
    </f:facet>
    <af:outputText value="#{shop.item}"/>
  </af:column>
  <af:column>
  <f:facet name="header">
    <af:outputText value="Price"/>
  </f:facet>
  <af:outputText value="#{shop.price}"/>
  </af:column>
</af:table>

注意:

ADF Facesによっても、summary属性テキストを使用してエラー・メッセージが作成されます。詳細は、10.2.4項「ページへの表の表示方法」を参照してください。

22.5.4 テキストに対するスクリーン・リーダーのサポートの提供方法

af:outputTextコンポーネントには、スクリーン・リーダーやその他のアクセシビリティ・エージェント用にさらに説明テキストを追加できるdescription属性があり、そのテキストは表示されません。

  戻る
戻る 		 次へ
次へ
  目次
目次		 索引
索引