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

ADF Facesユーザー・インタフェース・コンポーネントは、視覚や身体に障害のあるユーザーがアクセスできます。ADF Facesでは、ほとんどのコンポーネントについてテキストの説明が用意されていますが、一部のコンポーネントでは、アクセスするために追加情報が必要です。

このトピックでは、非ビジュアル・メディアへのレンダリングを行うユーザー・エージェントがページを読み取り、障害のあるユーザーに役立つ情報を提供できるように、コンポーネントへのアクセスを可能にするための詳細を提供します。

アクセシビリティ・モード

ADF Facesでは、次の3レベルのアクセシビリティをサポートします。

アクセシビリティ・モードは、ADF構成ファイル(adf-faces-config.xml)で<accessibility-mode>要素に値を定義することで設定します。有効な値は、defaultscreenReaderおよびinaccessibleです。

次に例を示します。

<accessibility-mode>inaccessible</accessibility-mode>

ADF Faces構成に使用する他の要素の詳細は、「ADF Faces構成の使用」を参照してください。

スクリーン・リーダーによるイメージ、フレーム、表およびテキストのサポート

ADF Facesは、ビジュアル・コンテンツのテキスト説明と状態(ボタンの有効/無効など)を提供することで、テキストをオーディオに変換するスクリーン・リーダーをサポートします。

ADF Facesで自動的に生成されるイメージには、スクリーン・リーダーまたは非ビジュアル・ブラウザで読み上げることができる説明が埋め込まれています。この例には、ADF Faces入力コンポーネントで生成されたエラーや警告のアイコンなどがあります。

ユーザーが提供するアイコンから生成されたイメージや、menuTabsmenuButtonsなどの特定のコンポーネントで生成されたイメージの場合、ADF Facesでは、ユーザーが提供するtextまたはicon属性の値を使用して、コンポーネントの名前と状態を説明するテキストが生成されます。たとえば、次のコード例では、2番目のタブについて生成された「Page 2: Currently selected tab」というテキストが読み上げられます。

<af:menuTabs> 
  <af:commandMenuItem text="Page 1" action="#{action.app1}"/>
  <af:commandMenuItem text="Page 2" selected="true"/>
  <af:commandMenuItem text="Page 3" action="#{action.app2}"/>
</af:menuTabs>     

イメージ、アイコンおよび他のオブジェクト

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

背景のイメージ、黒丸、オブジェクト周囲のカーブした外枠は、視力のあるユーザーに視覚的に訴えるにすぎず、有効な情報を伝えるわけではありません。このようなイメージを使用する場合もイメージのshortDesc属性を設定し、属性値として空の文字列を使用する必要があります。

selectInputText懐中電灯アイコンには、searchDesc属性を設定し、クライアント・エージェントによる読上げも可能なツールチップ・テキストを提供します。

フレーム

フレームを使用する場合は、frameBorderLayoutalternateContentファセットを使用して、フレームのない代替ページへのリンクを指定する必要があります。次に例を示します。

<afh:frameBorderLayout shortDesc="Shopping Cart Application"> 
  ... 
  <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属性を使用して提供される短い説明を補足し、非ビジュアル・ユーザー・エージェントにも役立ちます。

<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>       

表を使用する場合は、summary属性を使用して、表の目的に関する説明、表の構造と内容を、非ビジュアル・メディアにレンダリングするユーザー・エージェントに提供します。次に例を示します。

<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属性のテキストを使用して、エラー・メッセージも作成されます。詳細は、「ADF Facesでの変換および検証エラーについて」を参照してください、

テキスト

outputTextコンポーネントには、スクリーン・リーダーや他のアクセシビリティ・エージェントの補足説明を添付できるdescription属性があります。テキストはこれ以外の手段では表示されません。


ADF Faces入力コンポーネントでのラベルおよびメッセージ表示のサポートについて