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

前
 
次
 

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

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

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

30.1 ADF Facesでのアクセシビリティ・サポートについて

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

ADF Facesのユーザー・インタフェース・コンポーネントには、視覚的および身体的な障害のあるユーザーのために、組込みのアクセシビリティ・サポートが用意されています。スクリーン・リーダーのような非視覚的なメディアへのレンダリングを行うWebブラウザなどのユーザー・エージェントにより、コンポーネントのテキスト説明が読み上げられ、障害を持つユーザーに有益な情報が提供されます。

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

身体的に障害のあるユーザーのために、ADF Facesは支援技術のスクリーン・リーダーのJAWSとの連係がテストされてきました。JAWSスクリーン・リーダー・ソフトウェアの詳細は、http://www.freedomscientific.comで入手できます。

アクセス・キー・サポートは、キーボードのみを使用してコンポーネントやリンクにアクセスする代替の方法を提供します。ADF Facesのアクセシビリティ監査ルールにより、アクセス可能なHTMLマークアップを使用して、アクセス可能なイメージ、表、フレーム、フォーム、エラー・メッセージおよびポップアップ・ウィンドウの作成が指示されます。クライアント側のスクリプト、特に非同期のJavaScriptおよびXML(AJAX)を使用した場合に生じていたフレームワークとプラットフォームのさらなる問題は、オラクル社のアクセシビリティ・ストラテジで対応しています。

Oracleソフトウェアでは、Web Content Accessibility Guidelines (WCAG) 1.0 AA標準が実装されます。これらの標準の解釈は、http://www.oracle.com/accessibility/standards.htmlで入手できます。

30.1.1 ADF Facesアクセシビリティ・サポートのユースケースおよび例

ADF Facesには、スクリーン・リーダー、高コントラスト・モードおよび大きいフォント・モードの3タイプのアプリケーション・アクセシビリティ・サポートが用意されています。図30-1に、ドロップダウン・メニューのアクセシビリティ・オプションの例を示します。ユーザーは、3つのオプションすべての組合せを必要に応じて選択できます。

図30-1 アクセシビリティ・サポート・オプションが表示されたドロップダウン・メニュー

アクセシビリティ・タイプが表示されたドロップダウン・メニュー

図30-2に、スクリーン・リーダー・モードのアクセシビリティ・オプションの例を示します。

図30-2 スクリーン・モードのアクセシビリティ・サポート・オプションが表示されたドロップダウン・メニュー

スクリーン・リーダー・モードのアクセシビリティ・タイプが表示されたメニュー

30.1.2 ADFページでのアクセシビリティ・サポートの追加情報

アプリケーションをアクセス可能にする前に、その他のADF Faces機能を理解しておくことも役に立ちます。アクセシビリティと連係するその他の機能へのリンクは、次のとおりです。

  • 国際化およびローカライズ: アプリケーションに適用するために作成するADFスキンは、ADF Facesページを国際化およびローカライズするためのプロセスの一部としてカスタマイズできます。このプロセスの詳細は、第29章「ページの国際化およびローカライズ」を参照してください。

  • キーボードのショートカット: ポインティング・デバイスのかわりにキーボード・ショートカットを使用してページでの移動を行えます。キーボード・ショートカットをアクセシビリティとともに使用する方法の詳細は、付録C「キーボード・ショートカット」を参照してください。

30.2 ADF Facesでのアクセシビリティ・サポートの構成

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

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

@accessibility-profile要素を使用すれば、スタイルシートでより細かいアクセシビリティ・プリファレンスを定義でき、またtrinidad-config.xmlファイルでアクセシビリティ・プロファイル・オプションを指定することもできます。オプションは、high-contrastlarge-fontsまたはその両方です。詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

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


注意:

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


30.2.1 サインインでのアクセシビリティ・サポート・ガイドライン

アプリケーションを開発する際、アプリケーションのサインイン後に、ユーザーにアクセシビリティの選択オプションを提供することをお薦めします。サインイン・アクセシビリティの流れは、次に説明するように、初めてのユーザーの場合は3つのページ、2回目以降のユーザーの場合は2つのページで構成されます。

  1. サインイン・ページ

  2. アクセシビリティ・モード選択ページ(初めてのユーザーには必須)

  3. アプリケーションのホームページ

アクセシビリティのオプションは、初めてのユーザーと、後続の認証で省略しないことを選択したユーザーに対して表示されます。たとえば、次のオプションのあるページまたはダイアログを提供できます。

  • ヒント・テキスト: アクセシビリティのオプションについての簡単な情報を提供します。

  • チェック・ボックス

    • スクリーン・リーダー: スクリーン・リーダーと使用するために最適化されるADF Facesコンポーネントを生成します。

    • 高コントラスト: 高コントラストに適した視覚的コンテンツを生成します。

    • 大きいフォント: ブラウザのズームに適したコンテンツを生成します。

    • これらのオプションを再び表示しない: サインイン後にアクセシビリティのオプションを表示しません。

  • 「続行」ボタン: アプリケーションのホームページに移動します。

図30-3に、アクセシビリティのオプションが表示されたページを示します。

図30-3 サインイン後のアクセシビリティのオプション

サインイン後のアクセシビリティのオプション

ユーザーがこれらのオプションを再び表示しないを選択して、サインイン時にアクセシビリティのオプションを表示しないことを選択した場合、ユーザーをアクセシビリティのオプションに移動させるためのページまたはダイアログを提供する必要もあります。たとえば、アプリケーションのユーザー設定ページなどです。図30-4に、アクセシビリティのオプションが表示されたプリファレンスページを示します。

図30-4 ユーザー設定ページのアクセシビリティのオプション

設定ページのアクセシビリティのオプション

アプリケーションには、アクセシビリティ・モード選択ページと製品固有のホームページとの間で設定された追加の認証セキュリティがある場合があります。

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

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

始める前に:

ADF Facesのアクセシビリティ・サポートについて理解しておくと役立ちます。詳細は、30.2項「ADF Facesでのアクセシビリティ・サポートの構成」を参照してください。その他のADF Faces機能を使用して追加できる機能について理解しておくことも役に立ちます。詳細は、30.1.2項「ADFページでのアクセシビリティ・サポートの追加情報」を参照してください。

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

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

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

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

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

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

    次に例を示します。

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

    このコードでは、アプリケーションのプロファイル・サポートが、high-contrastおよびlarge-fontsの両方を使用するように設定されています。図30-5は、JDeveloperでのtrinidad-config.xmlファイルを示しています。

    図30-5 JDeveloperでのtrinidad-config.xml

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

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

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

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

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

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

String mode=ADFFacesContext.getCurrentInstance().getAccessibilityMode;

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

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

アクセシビリティ選択オプションは、アプリケーションのサインイン時またはアプリケーションのユーザー・プリファレンス・ページで設定できます。詳細は、30.2.1項「サインイン時のアクセシビリティ・サポート・ガイドライン」を参照してください。

30.3 コンポーネント・レベルのアクセシビリティ・プロパティの指定

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

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

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

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

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

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

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

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


注意:

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

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

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

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


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

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

af:activeCommandToolbarButton

texttextAndAccessKeyまたはshortDescプロパティを指定します。通常、textまたはtextAndAccessKeyプロパティは、コンポーネントのラベルとして使用されます。一意のボタンおよびリンクには、一意のテキストを指定する必要があります。

アイコンをサポートするすべてのツールバー・ボタンおよびリンクには、texttextAndAccessKeyまたはshortDescプロパティを定義する必要があります。テキストがない場合、shortDescをコンポーネントのラベルとして定義し、使用する必要があります。

af:activeImage

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

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

af:chooseColor

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

af:chooseDate

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

af:column

headerTextプロパティを指定するか、ヘッダー・ファセットを指定します。

表で、rowHeadertrueまたはunstyledに設定することにより、1つ以上の列コンポーネントを行ヘッダーとして指定する必要があります。必ずrowHeader列に一意のテキスト値を指定し、入力コンポーネントを含む列が行ヘッダーとして割り当てられないようにします。

子入力コンポーネントごとに、Simple属性をtrueに設定し、その入力コンポーネントにラベルが割り当てられていることを確認します。リッチ・モードでは、ラベルは表示されませんが、スクリーン・リーダー・モードでは、スクリーン・リーダー・ソフトウェアによって読み上げられます。

列のヘルプ情報を提供する場合は、helpTopicIdを使用します。

列にフィルタを設定するためにフィルタ・ファセットを使用する場合、そのフィルタ・コンポーネントにラベルが割り当てられていることを確認します。

af:commandButton

af:commandImageLink

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

通常、textまたはtextAndAccessKeyプロパティは、コンポーネントのラベルとして使用されます。一意のボタンおよびリンクには、一意のテキストを指定する必要があります。

af:commandLink

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

通常、textまたはtextAndAccessKeyプロパティは、コンポーネントのラベルとして使用されます。一意のボタンおよびリンクには、一意のテキストを指定する必要があります。

af:commandMenuItem

af:commandNavigationItem

af:comandToolbarButton

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

通常、textまたはtextAndAccessKeyプロパティは、コンポーネントのラベルとして使用されます。一意のボタンおよびリンクには、一意のテキストを指定する必要があります。

af:dialog

af:document

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

ヘルプ情報を提供する場合は、helpTopicIdを使用します。

af:goButton

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

通常、textまたはtextAndAccessKeyプロパティは、コンポーネントのラベルとして使用されます。一意のボタンおよびリンクには、一意のテキストを指定する必要があります。

af:goLink

af:goMenuItem

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

通常、textまたはtextAndAccessKeyプロパティは、コンポーネントのラベルとして使用されます。一意のボタンおよびリンクには、一意のテキストを指定する必要があります。

af:icon

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

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も指定する必要があります。

ヘルプ情報を提供する場合は、helpTopicIdを使用します。

af:outputFormatted

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

af:outputLabel

valueまたはvalueAndAccessKeyプロパティを指定します。

af:panelBox

af:panelHeader

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

ヘルプ情報を提供する場合は、helpTopicIdを使用します。

af:panelLabelAndMessage

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

ヘルプ情報を提供する場合は、helpTopicIdを使用します。

af:panelSplitter

af:panelStretchLayout

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

af:panelWindow

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

ヘルプ情報を提供する場合は、helpTopicIdを使用します。

af:poll

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

af:query

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

  • headerText

  • addFieldsButtonAccessKey

  • addFieldsButtonText

  • resetButtonAccessKey

  • resetButtonText

  • saveButtonAccessKey

  • saveButtonText

  • searchButtonAccessKey

  • searchButtonText

ヘルプ情報を提供する場合は、helpTopicIdを使用します。

af:quickQuery

labelおよびsearchDescプロパティを指定します。

ヘルプ情報を提供する場合は、helpTopicIdを使用します。

af:region

ヘルプ情報を提供する場合は、helpTopicIdを使用します。

af:resetButton

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

通常、textまたはtextAndAccessKeyプロパティは、コンポーネントのラベルとして使用されます。一意のボタンおよびリンクには、一意のテキストを指定する必要があります。

af:richTextEditor

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

ヘルプ情報を提供する場合は、helpTopicIdを使用します。

af:selectBooleanCheckbox

af:selectBooleanRadio

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

ヘルプ情報を提供する場合は、helpTopicIdを使用します。

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プロパティを指定する必要があります。

ヘルプ情報を提供する場合は、helpTopicIdを使用します。

af:showDetailHeader

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

ヘルプ情報を提供する場合は、helpTopicIdを使用します。

af:showDetailItem

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

af:showPopupBehavior

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

mouseHovermouseMovemouseOverおよびmouseOutのトリガー・タイプは、スクリーン・リーダー・モードでは非表示なります。したがって、スクリーン・リーダー・モードでは、これらのトリガー・タイプのコンテンツへの別のアクセス方法を提供する必要があります。

af:table

af:treeTable

summaryプロパティを指定します。サマリーでは、表の目的を説明する必要があります。

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

スクリーン・リーダー・モードでは、af:column内の入力コンポーネントにラベルが指定されている場合、ADF Facesによりその入力コンポーネントのアプリケーション指定のラベルに行情報が自動的に挿入されます。通常は、アプリケーション指定のラベルは列ヘッダー・テキストと一致し、挿入された行情報とともに、入力コンポーネントごとに一意のIDを提供します。


30.3.2 スクリーン・リーダー・モードでのADF Faces表コンポーネントの使用方法

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

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

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

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

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

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

dvt:projectGantt

dvt:resourceUtilizationGantt

dvt:schedulingGantt

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

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

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

dvt:map

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

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

dvt:thematicMap

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

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

テーマ・マップ・インスタンスに複数のDataLayersが関連付けられている場合、スクリーン・リーダー・モードではドロップダウン・リストもレンダリングされ、エンド・ユーザーは対応する表インスタンス間で切替えができます。

dvt:pivotTable

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

dvt:sparkChart

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


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

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

始める前に:

コンポーネント・レベルのアクセシビリティ・ガイドラインについて理解しておくと役立ちます。詳細は、30.3項「コンポーネント・レベルのアクセシビリティ・プロパティの指定」を参照してください。その他のADF Faces機能を使用して追加できる機能について理解しておくことも役に立ちます。詳細は、30.1.2項「ADFページでのアクセシビリティ・サポートの追加情報」を参照してください。

アクセス・キーの定義

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

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

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

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

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

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

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

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

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

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

    <af:inputSelectDate value="Choose date" labelAndAccessKey="D&amp;ate"/>
    
  • valueAndAccessKey: 従来のアンパサンド表記を使用して、value属性およびアクセス・キーを同時に設定する場合に使用します。

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

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

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

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

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

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

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

始める前に:

コンポーネント・レベルのアクセシビリティ・ガイドラインについて理解しておくと役立ちます。詳細は、30.3項「コンポーネント・レベルのアクセシビリティ・プロパティの指定」を参照してください。その他のADF Faces機能を使用して追加できる機能について理解しておくことも役に立ちます。詳細は、30.1.2項「ADFページでのアクセシビリティ・サポートの追加情報」を参照してください。

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

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

  2. faces-config.xmlファイルに<locale-config>要素を追加し、アプリケーションのデフォルトおよびサポートされるロケールを定義します。詳細は、29.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>要素を追加します。例30-5に、リソース・バンドルに対するJSF構成ファイルのエントリを示します。

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

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

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

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

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

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

30.4 アクセス可能なページの作成

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

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

アプリケーション・ページの設計時には、表30-3で説明されている一般的なアクセシビリティ・ガイドラインに従う必要があります。

表30-3 一般的なアクセシビリティ・ガイドライン

ガイドライン アクション

Raw HTMLコンテンツを使用しないこと

できれば、Raw HTMLコンテンツの使用を避けます。Raw HTMLコンテンツが必要な場合は、af:outputFormattedを使用し、そのコンテンツが有効であることを確認します。

サイトのコンテンツに適した最も明確で簡単な言語を使用すること

アプリケーション全体での言語の明確さおよび簡潔さを確保します。

キーボードによるドラッグ・アンド・ドロップの代替方法を提供すること

ドラッグ・アンド・ドロップ操作を使用するすべての機能を、キーボードでアクセス可能なインタフェース(「切取り」、「コピー」および「貼付け」メニュー項目など)でも、公開する必要があります。

アクセシビリティ・モードへのアクセスを提供すること

ADF Facesでは、次のアクセシビリティ・モードが公開されています。

  • デフォルト

  • スクリーン・リーダー - スクリーン・リーダーのユーザー用に最適化

必要に応じて、エンド・ユーザーがスクリーン・リーダーを選択できるように、Webアプリケーションを設計する必要があります。ADF Facesでのスクリーン・リーダー・モードの構成の詳細は、30.2項「ADF Facesでのアクセシビリティ・サポートの構成」を参照してください。

Webアプリケーションの設計時には、追加のアクセシビリティ・モード(高コントラスト・アクセシビリティ・モードや大きいフォント・モードなど)の追加が必要になる場合があリます。

アクセシビリティ標準を復習すること

関連のアクセシビリティ標準(Web Content Accessibility Guidelinesなど)について知っている必要があります。ADF Facesフレームワークおよびコンポーネントでは、実装詳細の多くが非表示になっていますが、これらのガイドラインに精通しておくことをお薦めします。

リンクの目的を説明するテキストを記述すること

リンクの目的が一般にユーザーにとって不明瞭な場合を除き、各リンクの目的を、リンク・テキストのみから、またはリンク・テキストとプログラムで指定されたリンク・コンテキストから確認できるようにします。

サイトの一般的なレイアウト(サイト・マップまたは目次など)についての情報を提供すること

サイト・レイアウトの要件が必ず満たされるようにします。

ページを見つけるための複数の方法を提供すること

ページのアクセス要件が、アプリケーション全体で必ず満たされるようにします。プロセス、またはプロセス内のステップの結果であるページは除外できます。

隣り合ったリンク間を視覚的に分離すること

隣り合うリンクが視覚的に分離されるようにし、空白を含む1つのリンクが複数のリンクとして表示されないようにします。

ADF以外のコンテンツにアクセシビリティ・サポートを提供すること

ページ内のADF Faces以外のコンテンツがアクセス可能になるようにします。コンテンツは、他のOracle製品またはサードパーティの製品のものでもかまいません。

外部ドキュメントに対するアクセシビリティ・サポートを提供すること

外部ドキュメント(WordドキュメントやPDFファイルなど)にアクセス可能になるようにします。ドキュメントはその製品によって生成されるか、製品に付属のものである可能性があり、最低1つのアクセス可能バージョンが必要です。


この項およびそのサブセクションで説明されているガイドラインは、セクション508のガイドラインとWebコンテンツ・アクセシビリティ・ガイドラインを組み合せたOracleグローバルHTMLアクセシビリティ・ガイドラインに従っています。ADF Facesコンポーネントはいくつかのアクセシビリティ・ガイドラインを暗黙的に満たしているため、開発者の負担が軽くなります。たとえば、ADF Facesではすべてのページにlang属性をレンダリングし、ADF Facesコンポーネントによってレンダリングされたすべてヘッダーでは、適切なHTMLヘッダー要素が使用されます。

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

スクリーン・リーダーでは、部分ページ・リクエストで全ページの再読上げは実行されません。部分ページ・レンダリング(PPR)を使用する際は、表30-4で説明されているガイドラインに従う必要があります。

表30-4 部分ページ・レンダリングのアクセシビリティ・ガイドライン

ガイドライン アクション

後ろの部分的なページ変更を優先すること

部分ページ・レンダリングにより、スクリーン・リーダー・ソフトウェアではページを部分的アクションを起動したコンポーネントから読み上げます。したがって、ターゲット・コンポーネントは、部分リクエストを起動するコンポーネントの後に配置する必要があり、このようにしないと、更新したターゲットがスクリーン・リーダーに読み上げられません。

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

部分的なページ変更のガイダンスを提供すること

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


30.4.2 スクリプトの使用方法

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

部分ページ・スクリプトを使用する際は、表30-5で説明されているガイドラインに従う必要があります。

表30-5 スクリプトのアクセシビリティ・ガイドライン

ガイドライン アクション

スクリプトを最小限に維持すること

クライアント側のスクリプトを避けます。

コンポーネントDocument Object Model(DOM)と直接対話しないこと

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

JavaScriptのタイムアウトを使用しないこと

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

キーボードで同等のものを提供すること

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

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

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

  • マウスオーバーまたはマウスアウト・イベントは、クリック・イベントにより追加として使用可能になるようにします。

フォーカス変更をしないこと

フォーカスを変更すると、コンテキストが変わるため、スクリーン・リーダーのユーザーが混乱する可能性があります。フォーカスの変更、特にフォーカス・イベントに対しての変更を避けるようにアプリケーションを設計します。また、標準のタブ移動が中断されるため、フォーカス変更に応じてポップアップ・ウィンドウが表示されないように設定してください。

ポップアップ・トリガーを明示的に指定すること

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

埋込みオブジェクトのテキスト説明を提供すること

各埋込みオブジェクトに、必ず適切なテキスト説明を関連付けるようにします。OBJECT要素ではtitle属性を、APPLET要素ではalt属性を指定する必要があります。

af:mediaの監査ルールを検証するために、監査レポートを実行します。

必須のプラグインをダウンロードするリンクを提供すること

ADF Facesでは、Java、FlashまたはPDFなどのプラグインを使用しません。アプリケーションで必要となるプラグイン用の適切なリンクが確実に提供されるようにする必要があります。

プラグイン用のアクセス可能なコンテンツを提供すること

アプレットやプラグインによって送られるすべてのコンテンツがアクセス可能であることを確認するか、同等のコンテンツにアクセスするかわりの方法を提供します。

イベント・ハンドラの入力デバイス依存を避けること

コンテンツの理解やアプリケーション操作に不可欠ではないイベント(マウスのロールオーバーによる画像の切替えなど)を除いて、イベント・ハンドラが入力デバイスに依存しないようにします。


スクリプト・ガイドラインに加えて、いくつかのプログラミング・ガイドラインも提供する必要があります。これらのガイドラインの多くは、ADF Facesに暗黙的に採用されており、それらを実装するための処置は必要ありません。プログラミング・ガイドラインは、表30-6に示されています。

表30-6 アプリケーション・プログラミングのアクセシビリティ・ガイドライン

ガイドライン アクション

マークアップを使用したページのリダイレクトの避けること

処置は必要ありません。ADF Facesではページのリダイレクトにマークアップを使用しません。

各ページのDOCTYPEを指定すること

処置は必要ありません。ADF Facesでは、ページごとにDOCTYPEが指定されます。

絵や図のレンダリングにASCII文字の使用を避けること

アプリケーションにアスキーアート(文字絵)が含まれないようにします。

アプリケーション開発者向けのドキュメントでアクセシビリティを使用するものとして定義されているプラットフォームの機能を中断しないこと

処置は必要ありません。ADF Facesでは、ADF Facesコンポーネントで生成されたコンテンツによりプラットフォームのアクセシビリティ機能が中断されないようにします。

他のコンポーネントの外観を制御するコンポーネントについて説明すること

他のコンポーネントを制御するADF Facesコンポーネントが正しく説明されるようにします。他のコンポーネントに対する制御には、他のコンポーネントの有効化または無効化、非表示または表示、あるいはデフォルト値の変更などがあります。

常に適格なHTMLコードを使用すること

処置は必要ありません。ADF Facesには、コンポーネントにより適格なHTMLコードが生成されるようにする役割があります。

非推奨のHTML要素を使用しないこと

処置は必要ありません。ADF Facesには、コンポーネントで非推奨のHTML要素が使用されないようにする役割があります。

セクションのヘッダーが非常にわかりやすく、ヘッダー要素H1からH6までが使用されていることを確認すること

処置は必要ありません。ADF Facesコンポーネントによってレンダリングされたすべてヘッダーでは、適切なHTMLヘッダー要素が使用されます。

リスト・コンテンツに適切なHTMLリスト要素が使用されるようにすること

処置は必要ありません。ADF Facesコンポーネントによってレンダリングされるすべてのリストでは、適切なHTMLリスト要素(OLULLIDLDTおよびDDなど)が使用されます。

引用は適切な要素でマークすること

引用はQまたはBLOCKQUOTE要素を使用して適切にマークされるようにします。インデントなどの効果の書式設定に引用マークアップを使用しないでください。

HTML要素上のlang属性により各ページの一次自然言語を識別すること

処置は必要ありません。ADF Facesでは、すべてのページでlang属性をレンダリングします。

すべてのフォーム要素にマークアップを使用してラベルが関連付けられているようにすること

監査レポートを実行します。「コンポーネントにラベルが付いていることを確認してください。」監査ルールが欠落しているラベルについて警告します。

FRAME要素またはIFRAME要素に一意のタイトルを付けること

監査レポートを実行します。「コンポーネントに短い説明があることを確認してください。」監査ルールが、af:inlineFrameshortDescタイトルが付いていないときに警告します。

ADF Faces af:inlineFrameでは、longDescにアクセスできません。

フレーム各ページにタイトルを付けること

監査レポートを実行します。「コンポーネントにタイトルがあることを確認してください。」監査ルールは、af:documenttitle属性がない場合に警告します。

ポップアップ・ウィンドウが開くと必ずフォーカスされ、閉じるとフォーカスが論理的な場所に戻るようにすること

ADF Facesコンポーネントによって提供されるポップアップ・ウィンドウは、常に明示的なユーザー処理に応じて表示されます。ADF Facesでは、フォーカスが起動時に正しくポップアップ・ウィンドウに移動し、終了時に元に戻るようにもします。ただし、af:clientListenerまたはaf:showPopupBehaviorにより手動で起動されたポップアップ・ウィンドウの場合、ポップアップ・ウィンドウが明示的なユーザー処理に応じて起動されたことを確認する必要があります。


30.4.3 スタイルの使用方法

ADF Facesコンポーネントはすでにスタイルが設定されており、変更の必要はありません。カスケード・スタイル・シート(CSS)を使用してADF Facesコンポーネントのデフォルトの外観を直接変更する場合、表30-7で説明されているガイドラインに従う必要があります。

表30-7 アクセシビリティのスタイル・ガイドライン

ガイドライン アクション

CSSの使用を最小限に維持すること

すでにスタイルが設定されているので、CSSを直接ADFコンポーネントに指定する必要はありません。

コンポーネントのデフォルトの外観をオーバーライドしないこと

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

拡大縮小が可能なサイズ単位を使用すること

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

CSSの位置設定は使用しないこと

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

画面のレイアウトおよび表示の変更にはスタイル・シートを使用すること

処置は必要ありません。ADF Facesでは、レイアウトの実装にスタイル・シートのある構造要素が使用されます。

すべてのページにわたって均一の表示のスタイルを作成すること

処置は必要ありません。ADF Facesでは、そのスキニング・アーキテクチャにより均一の表示スタイルを提供します。

情報の伝達または処理の指示に色やフォント・スタイルを使用しないこと

情報伝達、処理の指示、レスポンスの要求または視覚的要素の区別の唯一の視覚的手段として、色またはフォント・スタイルが使用されないようにしてください。


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

ページ構造およびナビゲーション・ツールを使用する際は、表30-8で説明されているガイドラインに従う必要があります。

表30-8 ページ構造およびナビゲーションのスタイル・ガイドライン

ガイドライン アクション

レイアウトに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:panelAccordionaf:showDetailItem(ペインの各アコーディオンによりタイトル領域のHTMLヘッダーがレンダリングされます。)

ページ位置の識別にはaf:breadCrumbsを使用すること

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

スキップ・リンク・ターゲットの指定にはaf:skipLinkTargetを使用すること

af:skipLinkTargetタグは、ページの初めで自動的にskip linkを生成する方法を提供します。これはスクリーン・リーダーとキーボードのどちらのユーザーにとっても役立ち、すべてのページで繰り返されるページレベルのクロムをスキップできるので便利です。af:skipLinkTargetタグをページ・テンプレートごとに1回指定する必要があります。

複数のページで繰り返されるナビゲーション・メカニズムの一貫性を維持すること

ADF Facesナビゲーション・コンポーネントを使用することで、ナビゲーションの一貫性を確保します。

繰り返されるコンテンツをスキップするための方法を提供すること

ページの先頭で繰り返されるコンテンツ(ナビゲーション・リンクなど)がある場合、繰り返されるコンテンツをスキップするためにaf:skipLinkTargetが使用されていることを確認します。


30.4.5 イメージおよび表の使用方法

イメージを使用する際は、表30-9で説明されているガイドラインに従う必要があります。

表30-9 イメージのスタイル・ガイドライン

ガイドライン アクション

装飾用でないイメージのalt属性に説明を指定すること

監査レポートを実行します。「コンポーネントに短い説明があることを確認してください。」監査ルールが、shortDesc属性がないことを警告します。shortDesc値は必ず意味のあるものにします。

装飾的なイメージ(スペーサ・イメージなど)では必ずalt=""属性を指定すること

監査レポートを実行します。「コンポーネントに短い説明があることを確認してください。」監査ルールが、shortDesc属性がないことを警告します。shortDesc値は必ず意味のあるものにします。

グラフなどの複雑なイメージのalt属性に説明を指定すること

複雑なaf:imageコンポーネントにはlongDesc属性が指定されていることを確認します。

スクリーン・リーダー・モードでは、グラフを表などのアクセス可能なコンポーネントに置き換えることを検討してもかまいません。

録音され同期化されたメディア(ビデオなど)にかわる音声またはテキストによる手段を提供すること

適切な音声またはテキストの代替手段が提供されていることを確認します。

録音され同期化されたメディアにキャプションを付けること

適切なキャプションが付いていることを確認します。同期化されたメディアがテキストの代替手段で、明確なラベルが付いている場合、キャプションは不要です。


表を使用する際は、表30-10で説明されているガイドラインに従う必要があります。

表30-10 表のスタイル・ガイドライン

ガイドライン アクション

常に表内の行または列にヘッダーを付けること

ADF Facesの表ベースのコンポーネントでは、行または列ヘッダー・データの適切なHTMLマークアップが用意されています。

監査レポートを実行します。「表の列にヘッダーがあることを確認してください。」監査ルールは、列ヘッダー・データがない場合に警告します。データまたはレイアウト表を作成するtrh:tableLayoutを使用するアプリケーションには、そのような表がすべてのOracleアクセシビリティ・ガイドラインに準拠していることを確認する役割があります。

summary属性またはCAPTION要素を使用して各表コンポーネントに説明を付けること

監査レポートを実行します。「表にサマリーがあることを確認してください。」監査ルールが、データ表にサマリー属性がない場合に警告します。

レイアウト表にTH要素が使用されていないことを確認すること

処置は必要ありません。ADF Facesでは、レイアウト・コンポーネントによりレイアウト表にTHが使用されていないことを確認します。

レイアウト表でsummary=""が指定され、CAPTION要素がないことを確認すること

処置は必要ありません。ADF Facesでは、レイアウト・コンポーネントでレイアウト表に空のサマリーが生成されることを確認します。

レイアウト表で正しい読上げ順序を指定すること

処置は必要ありません。ADF Facesでは、生成するすべてのレイアウト表で読上げ順序が正しいことを確認します。


30.4.6 WAI-ARIAランドマーク・リージョンの使用方法

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

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

表30-11 ランドマーク属性のある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では指定された値でロール属性をレンダリングします。

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

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

30.5.1 監査プロファイルの作成および実行方法

監査レポートの実行では、監査プロファイルの作成および実行が必要です。

始める前に:

アクセシビリティ監査ルールについて理解しておくと役立ちます。詳細は、30.5項「アクセシビリティ監査ルールの実行」を参照してください。その他のADF Faces機能を使用して追加できる機能について理解しておくことも役に立ちます。詳細は、30.1.2項「ADFページでのアクセシビリティ・サポートの追加情報」を参照してください。

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

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

  2. 「プリファレンス」ダイアログで、「監査」「プロファイル」を選択します。

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

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

    図30-6に、アクセシビリティ監査プロファイルを作成するための「監査: プロファイル」ダイアログの設定を示します。

    図30-6 ADF Facesアクセシビリティの監査プロファイルの設定

    ADF Facesアクセシビリティの監査プロファイルの設定
  5. 「OK」をクリックします。

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

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

  2. 「監査プロファイル」ダイアログで、「プロファイル」ドロップダウン・メニューから、作成したADF Facesアクセシビリティ監査プロファイルを選択します。

    図30-7 監査レポートを実行するための監査ダイアログ

    監査プロファイル・ダイアログ
  3. 「実行」をクリックして、レポートを生成します。

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