ヘッダーをスキップ
Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド
11gリリース1 (11.1.1.7.0)
B52029-11
  目次へ移動
目次
前
前 		 次
次		  

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

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

この章では、次の項目について説明します。

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

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

Oracleソフトウェアには、米国の508条およびWeb Content Accessibility Guidelines (WCAG) 1.0 AA標準が適用されています。これらの標準は、http://www.oracle.com/accessibility/standards.htmlで解説されています。

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

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

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

22.2 アクセシビリティ・プリファレンスの表示

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

ユーザーが目的のタイプのアクセシビリティ・サポートを必要に応じて選択できるように、アプリケーションで前述のアクセシビリティ・サポート間の切り替え機能を提供することをお薦めします。

@accessibility-profile要素を使用して、スタイルシートでより詳細にアクセシビリティ・プリファレンスを定義することもできます。また、trinidad-config.xmlファイルで、アクセシビリティ・プロファイル・オプション(high-contrastとlarge-fontsのいずれかまたは両方)を指定することもできます。詳細は、ADF Facesスキンに関する項を参照してください。

<accessibility-profile>に使用可能な値は次のとおりです。


注意:

<accessibility-mode>および<accessibility-profile>要素は、ELにより、ユーザー固有のプリファレンスが含まれるセッション有効範囲のマネージドBeanにバインドされる必要があります。

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

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

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

  1. 「アプリケーション・ナビゲータ」で、trinidad.xmlをダブルクリックします。

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

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

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

  3. 要素名<accessibility-profile>およびアクセシビリティ・プロファイル値(high-contrast、large-fonts)を入力します。次に例を示します。

    <!-- Enable both high-contrast and large-fonts content -->
<accessibility-profile>high-contrast large-fonts</accessibility-profile>

    このコードは、高コントラストおよび大きいフォントを使用するようにアプリケーションのプロファイル・サポートを設定します。

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

    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.3 コンポーネント・レベルのアクセシビリティ・プロパティの指定

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

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

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


注意:

アクセシビリティ・モードがscreenReaderモードに設定されている場合は、アクセス・キーは表示されません。詳細は、アクセシビリティ・プリファレンスの表示に関する項を参照してください。

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

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

アクセス可能なページおよびナビゲーション構造を開発するには、アクセス可能なページの作成に関する項で説明されている追加のアクセシビリティ・ガイドラインに従います。

22.3.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.4.4項「ページ構造およびナビゲーションの使用方法」を参照してください。

af:panelWindow

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

af:poll

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

af:query

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

  • headerText

  • addFieldsButtonAccessKey

  • addFieldsButtonText

  • resetButtonAccessKey

  • resetButtonText

  • saveButtonAccessKey

  • saveButtonText

  • searchButtonAccessKey

  • searchButtonText

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.3.2 スクリーン・リーダー・モードでのADF Faces表コンポーネントの使用

WebアプリケーションでADF Faces表コンポーネントを使用している場合、1つの列をスクリーン・リーダー・モード用の行ヘッダーとして指定する必要があります。その行ヘッダーは、スクリーン・リーダー・ソフトウェアによって、エンド・ユーザーが選択した行を告げるために使用されます。通常は、複数の選択ができる行ヘッダーとして1つの列が使用されますが、行ヘッダーとして複数の列をマークすることもできます。複数の列を行ヘッダーとしてマークすると、それらは表の初期列として表示され、固定されます。

場合によっては、表示目的で、行ヘッダーを表示しないこともあります。そのような場合には、表の1つの列をrowHeader属性がunstyledに設定されているように定義する必要があります。スクリーン・リーダー・モードでは、unstyled行ヘッダーを持つ表またはツリー表コンポーネントは、displayIndexが0に設定された開始位置に移動し、固定されます。デフォルト・モードでは、unstyled行ヘッダー列を持つ表またはツリー表は、開始位置に移動せず、固定されずに、行ヘッダーのCSSスタイルなしでレンダリングされます。

22.3.3 ADFデータ視覚化コンポーネントのアクセシビリティ・ガイドライン

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

表22-2 ADFデータ視覚化コンポーネントのアクセシビリティ・ガイドライン

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

dvt:projectGantt

dvt:resourceUtilizationGantt

dvt:schedulingGantt

summaryプロパティを指定します。summaryでは、ガント・チャート・コンポーネントの目的を記述する必要があります。

dvt:gauge

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

dvt:areaGraph

dvt:barGraph

dvt:horizontalBarGraph

dvt:bubbleGraph

dvt:comboGraph

dvt:funnelGraph

dvt:lineGraph

dvt:paretoGraph

dvt:pieGraph

dvt:radarGraph

dvt:scatterGraph

dvt:stockGraph

shortDescプロパティを指定します。shortDescプロパティでは、グラフの目的を説明する必要があります。

スクリーン・リーダー・モードでは、ピボット・テーブル・コンポーネントのインスタンスがグラフ・コンポーネントを置換し、エンド・ユーザーが標準のカーソル・キーを使用するとデータを移動できます。

スクリーン・モードでは、グラフ・コンポーネントの次の視覚化機能はサポートされません。

  • 部分ページ・レンダリング時のデータ変更アニメーション。

  • ズームとスクロール。ピボット・テーブルではスクロールがサポートされています。

  • 単純グラフ・タグでのseriesRolloverBehaviorおよびhideAndShowBehaviorプロパティ。

  • 円グラフでのinteractiveSliceBehaviorプロパティ。

  • データ・マーカーの形状および色の精密制御で、次のものがあります。

    • Series子タグでの宣言的プロパティ

    • 散布図のmarkerShapeおよびmarkerColorの宣言プロパティ

    • コールバックAPI

    • バッキングBeanの条件付き書式設定ルール

    • バブル・グラフおよび散布図のマーカー・アンダーレイ

スクリーン・モードでは、グラフ・コンポーネントの次の対話機能はサポートされません。

  • コンテキスト・メニュー・ファセット

  • ポップアップ

  • <dvt:timeSelector>子タグによるTimeSelector機能

  • 単純グラフ・タグのdrillingEnabledプロパティ

  • ShapeAttributesサポート、およびすべてのグラフ・コンポーネントからのきめ細かいマウスおよびキー・イベントへのアクセス

  • バブル・グラフおよび散布図でのドラッグ・アンド・ドロップ

  • バブル・グラフおよび散布図でのDataSelection

  • プログラムのTickLabelCallbackサポート

dvt:hierarchyViewer

dvt:sunburst

dvt:treemap

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

スクリーン・リーダー・モードの場合、ツリー表コンポーネントのインスタンスが階層ビューア・コンポーネントのかわりになるため、エンド・ユーザーは標準カーソル・キーを使用して、データ内を移動できます。

dvt:map

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

スクリーン・リーダー・モードの場合、表コンポーネントのインスタンスがマップ・コンポーネントのかわりになるため、エンド・ユーザーは標準カーソル・キーを使用して、データ内を移動できます。

dvt:pivotTable

summaryプロパティを指定します。サマリーでは、ピボット・テーブル・コンポーネントの目的を説明する必要があります。

dvt:sparkChart

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

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

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

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

  • accessKey: コンポーネントへの簡単なアクセスに使用するニーモニック文字の設定に使用します。コマンド・コンポーネントと移動コンポーネントの場合、属性によって指定される文字は、インスタンス・コンポーネントのtext属性の中に存在する必要があり、ない場合は、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.5 ローカライズされたラベルおよびアクセス・キーの定義方法

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

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

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

  2. faces-config.xmlファイルに<locale-config>要素を追加し、アプリケーションのデフォルトおよびサポートされるロケールを定義します。詳細は、21.3.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 アクセス可能なページの作成

コンポーネント・レベルのアクセシビリティ・ガイドラインに加えて、アプリケーションの設計時には、ページ・レベルのアクセシビリティ・ガイドラインにも従う必要があります。コンポーネント・レベルのガイドラインでコンポーネントの使用方法が決まるのに対して、ページ・レベルのアクセシビリティ・ガイドラインは、全体として、アプリケーションの全体的な設計および機能により関係があります。

ページ・レベルのアクセシビリティ・ガイドラインには次のものがあります。

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

スクリーン・リーダーでは、部分ページ・リクエストで全ページの再読上げは実行されません。部分ページ・レンダリング(PPR)によって、スクリーン・リーダーは、部分アクションを起動したコンポーネントからページの読込みを実行します。したがって、ターゲット・コンポーネントは、部分リクエストを起動するコンポーネントの後に配置します。このようにしないと、更新したターゲットがスクリーン・リーダーに読み込まれません。

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

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

22.4.2 スクリプトの使用方法

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

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

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

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

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

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

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

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

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

    • クリック・イベントは、マウスオーバーやマウスアウトよりも優先される必要があります。

    • マウスオーバー・イベントまたはマウスアウト・イベントは、クリック・イベントによって使用可能になる必要があります。

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

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

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

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

22.4.3 スタイルの使用方法

ADF Facesコンポーネントはすでにスタイルが設定されており、変更の必要はありません。Cascading Style Sheet (CSS)を使用して直接デフォルトの外観を変更する場合、次のアクセシビリティ・ガイドラインに従う必要があります。

  • コンポーネントのデフォルトの外観をオーバーライドする場合、アクセシビリティへの影響を意識してください。

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

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

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

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

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

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

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

  • レイアウトの設定には、af:panelSplitterコンポーネントを使用します。

    ジオメトリ管理レイアウトを実装する際、af:panelSplitterを使用するとユーザーは次のことができます。

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

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

    af:panelStretchLayoutを使用する場合、必要に応じて、かわりにaf:panelStretchLayoutを使用することを検討する必要があります。

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

    たとえば、ページ上部にあるクロム・ナビゲーション・バーは、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.4.5 WAI-ARIAランドマーク・リージョンの使用方法

WAI-ARIA標準では、ページの異なるセクションが異なるランドマーク・リージョンとして定義されます。WAI-ARIAロールとともに、それらが高度なページ構造についての情報を伝え、ランドマーク領域全体にわたる移動を容易にします。これは特に、スクリーン・リーダーなどの支援技術のユーザーにとって便利です。

ADF Facesには、表22-3に示すように、いくつかのレイアウト・コンポーネント用のランドマーク属性が含まれています。

表22-3 ランドマーク属性のあるADF Facesコンポーネント

コンポーネント 属性

decorativeBox

topLandmark

centerLandmark

panelGroupLayout

landmark

panelSplitter

firstLandmark

secondLandmark

panelStretchLayout

topLandmark

startLandmark

centerLandmark

endLandmark

bottomLandmark

これらの属性には、次のようなWAI-ARIAランドマーク・ロールのいずれかを設定できます。

  • banner

  • complimentary

  • contentinfo

  • main

  • navigation

  • search

ランドマーク関連の属性のいずれかが設定されている場合、ADF Facesでは指定された値でロール属性をレンダリングします。

22.5 アクセシビリティ監査ルールの実行

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

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

  1. メイン・メニューから、「ツール」→「プリファレンス」を選択します。

  2. 「監査」→「プロファイル」を選択します。

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

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

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

  1. メイン・メニューから「ビルド」→「監査」ターゲットを選択します。

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

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

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

  前
前 		 次
次
  目次へ移動
目次