UIXユーザー・インタフェースのアクセシビリティ

ADF UIXユーザー・インタフェース・コンポーネントは、視覚や身体に障害のあるユーザーにも対応することができます。UIXでは、ビジュアル・コンテンツのテキスト説明と状態(ボタンの有効/無効など)を提供することによって、テキストをオーディオに変換するスクリーン・リーダーをサポートします。また、ラベルおよびアクセス・キーのサポートにより、障害のあるユーザーが入力要素やリンクにキーボードからアクセスできるようにしています。

スクリーン・リーダーによるサポート

UIXユーザー・インタフェースで自動的に生成されるイメージには、スクリーン・リーダーまたは非ビジュアル・ブラウザで読むことのできる説明が埋め込まれています。この例には、 messageLayoutで生成されるエラーや警告のアイコンがあります。

ユーザーが提供するアイコンから生成されるイメージ(globalButtonなど)や、tabBartrainなどの特定のコンポーネントで生成するイメージの場合は、UIXではユーザーが提供するボタン、タブ、ステップのtext属性の値を使用してコンポーネントの名前と状態を説明するテキストが生成されます。たとえば次のUIX XMLコード例では、タブ・バー用について「Home: Currently selected tab」というテキストを読み上げます。

<tabBar>
  <contents>
    <link text="Home" destination="Home.html" selected="true" />
  </contents>
</tabBar>

UIXではそのコンポーネントの多くについてテキストの説明を提供していますが、アクセスできるようにするには追加情報が必要なコンポーネントもあります。

イメージ

イメージを表示する場合は、shortDesc属性または説明は別のページで指定し、longDescURL属性を使用して、イメージについて簡単に説明したり、長い説明のファイルにリンクさせたりします。たとえば、次のようになります。

<image source="oracle.gif" shortDesc="Oracle Logo" />

<image source="oracle.gif" shortDesc="Oracle Logo"
       longDescURL="LongDescriptions.html#oracle" />

shortDesc属性はHTMLのalt属性に変換されます。

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

<flowLayout>
  <contents>
    <image source="largeBullet.gif" shortDesc="" />
    <link text="Click here for the latest news" destination="news.html" />
  </contents>
</flowLayout>

フレーム

フレームを使用する場合は、alternateContentセクションにフレームのない代替ページへのリンクを指定する必要があります。たとえば、次のようになります。

<frameBorderLayout shortDesc="Shopping Cart Application"
                   longDescURL="LongDescriptions.html#navFrame" >
...
  <alternateContent>
    <link text="Click here for a no-frames version" destination="noframes.html" />
  </alternateContent>
...
</frameBorderLayout>

alternateContentセクションはHTMLのNOFRAMESタグに対応し、フレーム対応ではないブラウザ・エージェントで表示されます。

また、フレームごとに<frame>要素のshortDesc属性またはlongDescURL属性を使用してコンテンツの一般的な説明を提供する必要があります。

表を使用する場合は、summary属性を使用して表のコンテンツに関する説明を提供します。たとえば、次のようになります。

<table summary="This table describes the contents of your shopping bag: item name, unit price, quantity and subtotal" >
...
</table>

ラベルおよびアクセス・キーによるサポート

Webアプリケーションでは、Tabキーを使用して1つの入力要素から次の入力要素に移動できますが、キーボード・ショートカットの方が便利で効率的です。入力要素のキーボード・ショートカットを提供するには、入力要素のラベルとバインディング・キーを指定する必要があります。

入力要素のラベル

入力フィールドの横のラベルを指定する場合は、labeledNodeId属性を使用してラベルを入力要素のIDに関連付けます。これで、スクリーン・リーダーはラベルを読むときに入力要素を識別できます。次のUIX XMLのコード例に、labeledNodeId属性の使用方法を示します。

<labeledFieldLayout>
  <contents>
    <styledText text="Enter Your Name" labeledNodeId="username" />
    <textInput id="username" name="username" />
    <styledText text="Enter Your Age" labeledNodeId="age" />
    <textInput id="age" name="age" />
  </contents>
</labeledFieldLayout>

注意: すべてのUIX XML Messageコンポーネント( messageTextInputmessageChoiceなど)には、ラベルと入力要素が自動的に関連付けられます。

アクセス・キー

入力要素のaccessKey属性またはtextAndAccessKey属性を使用してキーボード上の指定されたキーをこの要素にバインドします。

次の例では、[Alt]キーを押しながら[h]キーを押すと「Go Home」リンクにフォーカスが設定されます。

<link text="Go Home" destination="Home.html" accessKey="h" />

リンク・テキスト「Go Home」の文字「H」を強調表示するには、次の例に示すように、このテキストにtextAndAccessKey属性を指定し、この文字の直前にアンパサント(&amp;)を挿入します。

<link textAndAccessKey="Go &amp;Home" destination="Home.html" accessKey="h" />

textAndAccessKey属性を使用してバインドできる入力要素には、buttonsubmitButtonresetButtonglobalButtonstyleTextがあります。

次の例では、ラベルおよびアクセス・キーを使用します。[Alt]キーを押しながら[n]を押すと、textInput要素にフォーカスが設定されます。

<styledText textAndAccessKey="Enter Your &amp;Name" labeledNodeId="username" />
<textInput id="username" name="username" />

注意: 同じアクセス・キーを複数の要素にバインドできます。アクセス・キーを押すたびに、1つの入力要素から別の入力要素にフォーカスが移動します。最後の要素にフォーカスが移動すると、最初の要素に戻ります。


UIXアクセシビリティ・モードについて
UIX XML要素について

ADF UIXページの操作
Webアプリケーション設計ツールの使用

 

Copyright © 1997, 2004, Oracle. All rights reserved.