UIX開発者ガイド | ![]() 目次 |
![]() 前へ |
![]() 次へ |
このトピックでは、各種の障害を持つユーザーがUIXアプリケーションにアクセスできるようにする方法を示します。UIXで自動的に行う処理および自動的に行わない処理と、アプリケーションをアクセス可能にするために開発者が行う必要がある処理について説明します。
ここでは、次の項目について説明します。
UIXアプリケーションをアクセス可能にするために、次の2点を検討します。まず、視覚に障害を持つユーザーがアプリケーションにアクセスできるようにすることです。次に、その他の障害を持つユーザーのサポートです。これは、特に、キーボード・アクセスのみでポインティング・デバイスを使用しないユーザーのサポートを指します。現時点では、UIXではマルチメディアを直接サポートしていませんが、この2点に対応することにより、アプリケーションをアクセス可能にすることができます。
視覚に障害のあるユーザーは、テキスト・オーディオ変換スクリーン・リーダーを利用することがよくあります。そのため、UIXアプリケーションでは、ビジュアル・コンテンツのテキスト説明を提供し、データをグループ化して、記述子を使用したリーダーでのデータの関連付けを容易にして、これらのリーダーをサポートすることが重要です。ビジュアル・コンテンツでは、情報を表すためにしばしば色が使用されます。たとえば、ボタンの色により、ボタンが選択されているか、あるいは使用可能か使用不可かが示されます。このボタンがスクリーン・リーダーでレンダリングされる際、テキスト説明によりボタンの状態も確実に取得される必要があります。多くの場合、UIXではこれを自動的に処理します。
キーボードで完全に制御できるアプリケーションの実装は、通常、問題ではありません。ほとんどのブラウザでは、[Tab]キーを押して、すべての入力要素間を移動できるためです。ただし、これは非常に不便な場合があり、ページ上の重要なコントロールにキーボード・ショートカットを指定すると、より一層使いやすくなります。これには、後述するアクセス・キー・サポートの指定が必要です。
次のセクションでは、UIX Componentsをアクセス可能にするために追加情報が必要な、UIX Components要素について説明します。
このセクションでは、UIX Componentsをアクセス可能にする際に、特に注意が必要なUIX Components要素について説明します。これらの要素の中でも一番注意する必要があるのは、ImageBean
です。
イメージを使用する場合、各イメージについて短い説明を記述し、ビジュアル環境でないブラウザ・エージェントでイメージを説明できるようにする必要があります(説明がない場合、そのイメージについては何も表示されません)。UIX Componentsでは、イメージはImageBean
を使用してレンダリングされ、イメージの説明はshortDesc
属性を使用して指定されます(この属性は、HTMLのalt
属性に変換されます)。次に示すのは、uiXMLでの例です。
<image source="oracle.gif" shortDesc="Oracle Logo" />
イメージを1行のテキストのみで説明することが難しい場合があります。この場合、イメージの説明は別のページで指定し、longDescURL
属性を使用して、イメージをこの長い説明にリンクさせます。次に例を示します。
<image source="oracle.gif" shortDesc="Oracle Logo"
longDescURL="LongDescriptions.html#oracle" />
次に示すのは、LongDescriptions.htmlファイルの一部です。
<!-- somewhere in LongDescriptions.html -->
<a name="oracle">
The current Oracle logo. This image has the word "ORACLE" written in
bright red in large uppercase letters.
</a>
ここに示したuiXMLの例のJavaコードは次のようになります。
ImageBean image = new ImageBean("oracle.gif");
image.setShortDesc("Oracle Logo");
image.setLongDescURL("LongDescriptions.html#oracle");
イメージは、情報の伝達ではなく、ビジュアル表示を美しくするために使用される場合があります。ボタンの枠のカーブした部分を表示する場合などです。このようなイメージはレイアウト・イメージと呼ばれ、ユーザーに追加情報を提供するものではないため、短い説明は必要ありません。ただし、説明がないと、一部のスクリーン・リーダーでは「イメージ」などのデフォルトの説明を使用する場合があります。これにより、視覚に障害を持つユーザーは、ページの作成者はイメージの説明を指定し忘れているだけで、そのイメージはドキュメントを理解するために重要なのではないかと誤解する場合があります。
このような混乱を避けるため、すべてのイメージにshortDesc
属性を設定し、レイアウト・イメージの属性値として空の文字列を使用する必要があります。レイアウト・イメージの例には、バックグラウンド・イメージおよび黒丸が含まれます。次のuiXMLコードでは、黒丸として使用したイメージの説明に空の文字列を設定しています。
<flowLayout>
<contents>
<image source="largeBullet.gif" shortDesc="" />
<link text="Click here for the latest news" destination="news.html" />
</contents>
</flowLayout>
UIX Componentsにより自動的に生成されるすべてのイメージ(InlineMessageBean
により生成されるエラー・アイコンまたは警告アイコンなど)には、あらかじめ適切な説明が設定されています。これには、ユーザー指定アイコンから生成される色付きのイメージ(globalButton
アイコンなど)、およびtabBar
要素やtrain
要素などの特定の構成体により生成されるイメージが含まれます。これらの場合、UIX Componentsでは、ユーザーが指定したボタン・テキスト、またはタブ名やステップ名を含む説明を使用します。これらの説明では、要素の状態(使用可能か使用不可か、あるいは選択されているか)も説明されます。たとえば、uiXMLの次のコード部分について考えます。
<tabBar>
<contents>
<link text="Home" destination="Home.html" selected="true" />
</contents>
</tabBar>
この例では、1つの(選択された)タブでタブ・バーが作成されます。UIX Componentsではこのタブ・バーのイメージ・マップをレンダリングし、説明をこのタブ・イメージに自動的にバインドします。説明にはタブの状態が含まれ、「Homeが現在選択されています」となります。UIX Componentsで使用される説明は、Oracleユーザー・インタフェース仕様(アイコン・ロールオーバー・テキスト)に準拠します。
次のセクションでは、よく使用されるUIX Componentsのもう1つの要素、table
について説明します。
UIX ComponentsのTableBean
を使用する場合、ビジュアル環境でないエージェントのために内容の説明が必要です。これには、table
のsummary
属性を使用します。次に例を示します。
<table summary="This table describes the contents of your shopping bag:
item name, unit price, quantity and subtotal" >
...
</table>
ここに示した例のJavaコードは次のようになります。
TableBean table = new TableBean();
table.setSummary("This table describes ..... quantity and subtotal");
表の空のセルをレンダリングする場合は、特に注意する必要があります。過去の例が示すところでは、スクリーン・リーダーが適切に動作するためには、HTMLの<BR>
タグを空のセルの中にレンダリングする必要があります。UIXのtable
ではこのタグを自動的に生成しますが、これはまったく中身がない表のセルの場合のみです。
scope
属性およびtable
要素について: scope
属性は、(スクリーン・リーダーに対して)表のどのヘッダーがどのデータ部分に対応するかを示すために使用されることに注意してください。UIX Componentsでは、適切なscope
属性をtable
のヘッダーに自動的にレンダリングします。
表でtableSelection
という子を使用している場合は、この子にshortDesc
属性を設定することが重要です。shortDesc
属性は、選択列のフォーム・コントロールにラベルとして関連付けられます。次に例を示します。
<table ...>
<tableSelection>
<multipleSelection shortDesc="Select for deletion" ... >
...
</multipleSelection>
</tableSelection>
...
</table>
次のセクションでは、UIX Componentsにアクセス可能なフレームを実装する方法について説明します。
FrameBorderLayoutBean
を使用する場合、このレイアウトの内容をshortDesc
属性を使用して説明する必要があります(これにより、指定されたテキストとともにHTMLのtitle
属性がルートFRAMESET
に配置されます)。さらに、(フレームなしの)代替ページへのリンクも、alternateContent
セクションに指定する必要があります。次に例を示します。
<frameBorderLayout shortDesc="Shopping Cart Application" >
...
<alternateContent>
<link text="Click here for the no-frames version"
destination="cart-noframes.html" />
</alternateContent>
</frameBorderLayout>
alternateContent
セクションはHTMLのNOFRAMES
タグに対応し、フレーム対応ではないブラウザ・エージェントで表示されます。
このレイアウトで使用される各フレームには、フレームの内容を説明する短い説明を指定する必要があります。この短い説明は、shortDesc
属性を使用して指定する必要があります。フレームの長い説明を指定する必要がある場合は別のファイルに記述し、longDescURL
属性を使用してフレームをそのファイルにリンクさせます。次に例を示します。
<frame shortDesc="This is the navigational tree of the shopping cart"
longDescURL="LongDescriptions.html#navFrame" />
フレームに表示される内容は変更される場合があるので注意してください(ユーザーがリンクをクリックした場合など)。フレームの説明を記述する際は、特定の説明が意味を持たなくなり、アプリケーションを使用中のユーザーの混乱を招く場合があることに留意してください。したがって、フレームの説明は、対応するフレーム内で表示される可能性があるページの完全なサブセットに適用できるよう、汎用性のある内容にする必要があります。
このセクションでは、スクリーン・リーダーによるコンテンツの定義に役立つ、テキスト説明を使用したUIX Components要素の補強方法を示しました。次のセクションでは、リーダーによるラベルとデータの関連付けに役立つ方法を説明し、キーボードを使用したUIX Components要素への簡単なアクセス方法を示します。
このセクションでは、各種の障害を持つユーザーが、UIX Componentsの入力(およびアクション)要素にアクセスできるようにする方法を説明します。最初の手順は、テキスト・データを説明するラベルを、スクリーン・リーダーで見つけやすくすることです。
通常、ラベルとは、ユーザー入力を必要とする要素を説明するために使用するテキスト部分です。ページを視覚的に判断できる場合、どのラベルがどの入力要素を説明しているかは明白です。ラベルは、対応する入力要素のすぐ左にあるためです。ただし、スクリーン・リーダーに対して明白とはかぎりません。ラベルと入力要素の間に別のHTMLタグ(位置揃えや表示方法のため)がある場合があるからです。uiXMLも例外ではありません。次の例について考えてみます。
<labeledFieldLayout>
<contents>
<styledText text="Enter Your Name" />
<textInput name="username" />
<styledText text="Enter Your Age" />
<textInput name="age" />
</contents>
</labeledFieldLayout>
このuiXMLコード部分は、スクリーン・リーダーで混乱が生じる可能性のある、複雑なHTML形式で表されます。したがって、どのテキスト部分がどの入力要素のラベルであるかを(HTML形式で)明示的に示す必要があります。ページ全体で一意のIDを各入力要素に割り当て、各ラベルで(このIDに対する)参照属性を設定して、それを示します。次の例に示すように、uiXMLではこれを容易に実行できます。
<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>
まず、入力要素textInput
に、id
属性を使用して一意のIDが割り当てられていることに注意してください。各ラベルは、labeledNodeId
属性(ラベルと入力要素を関連付ける属性)を使用して、対応する入力要素の一意のIDを参照します。この例では、明らかに「Enter Your Name」というテキストがID「username」を持つtextInput
のラベルであり、スクリーン・リーダーで入力要素を問題なく識別できます。
次に示すのは、前述のUIXコードで例に示したラベルと入力の関連付けを実装する際に必要なJavaコードです。
StyledTextBean style1 = new StyledTextBean();
style1.setText("Enter Your Name");
style1.setLabeledNodeID("username");
TextInputBean text1 = new TextInputBean("username");
text1.setID("username");
StyledTextBean style2 = new StyledTextBean();
style2.setText("Enter Your Age");
style2.setLabeledNodeID("age");
TextInputBean text2 = new TextInputBean("username");
text1.setID("username");
LabeledFieldLayoutBean layout = new LabeledFieldLayoutBean();
layout.addIndexedChild(style1);
layout.addIndexedChild(text1);
layout.addIndexedChild(style2);
layout.addIndexedChild(text2);
UIX ComponentsのメッセージBean(MessageTextInput
、MessageChoice
など)では、ラベル(またはプロンプト)と入力要素が自動的に関連付けられるので注意してください。これは、InlineMessageBean
を使用してラップされたすべてのBeanについて同様です。
以上で、それぞれのラベルでデータを説明できるようになったため、次のステップでは、キーボードを使用したデータへの簡単なアクセス方法を用意します。次のセクションで、これについて説明します。
アクセス・キーにより、入力要素およびリンクへの簡単なキーボード・アクセスが提供されます。アクセス・キーは、ポインティング・デバイスを使用せずにアプリケーションを操作するユーザーに大変有用です。キーボード・ユーザーは、該当する要素にフォーカスが当たるまで[Tab]キーを押し続けるしか方法がありませんが、アクセス・キーを使用すれば、[Alt]キーを押しながらアクセス・キーを押して要素に直接フォーカスを当てることが可能です。
アクセス・キーをサポートする最初の手順は、キーを要素にバインドすることです。次のuiXMLの例では、アクセス・キー「h」がリンク要素にバインドされています。ユーザーが[Alt]キーを押しながら[h]を押すと、リンクに即時にフォーカスが当たり、[Enter]キーを押すとリンクをアクティブにできます。
<link text="Go Home" destination="Home.html" accessKey="h" />
次に示すのは、リンクにアクセス・キーを設定する際に必要なJavaコードです。
LinkBean link = new LinkBean("Go Home", "Home.html");
link.setAccessKey('h');
アクセス・キーをサポートする2番目の手順は、特定の要素に対するアクセス・キーがどれかをユーザーにビジュアルに示すことです。多くのブラウザでは、要素テキスト中の該当する文字をハイライト表示して示すため、この例では、リンク・テキストが「Go Home」のように表示されます。そのため、テキストとアクセス・キーの両方を設定する便利な方法として、次の例のようにtextAndAccessKey
属性を使用し、アクセス・キーに使用する文字の前には「&」を付けます。
<!-- This doesn't work!!! -->
<link textAndAccessKey="Go &Home" destination="Home.html" />
ただし、このXMLは無効です。次に示す正しい例のように、「&」はエスケープする必要があります。
<link textAndAccessKey="Go &Home" destination="Home.html" />
次に示すのは、相当するJavaコードです(メソッドoracle.cabo.ui.NodeUtils.setTextAndAccessKey(...)
を使用していることに注意してください)。
LinkBean link = new LinkBean();
link.setDestination("Home.html");
NodeUtils.setTextAndAccessKey(link, "Go &Home");
textAndAccessKey
属性は、button
、submitButton
、resetButton
、globalButton
およびstyledText
を含むその他多くのUIX Componentsの要素で使用できます。image
要素がリンク先とともに使用されている場合、accessKey
属性を使用してアクセス・キーを設定できます。ただし、image
にアクセス・キーが指定されていることをユーザーにビジュアルに示す目印はありません(アクセス・キーについて知ることはできません)。
アクセス・キーは、入力要素へのフォーカスの移動にも使用できます。ラベルの使用方法に関する前のセクションを参照してください。そのセクションの例では、入力要素のラベルとしてstyledText
要素が使用されています。次のuiXMLの例では、ラベルへのアクセス・キーの設定方法を示します。
<styledText textAndAccessKey="Enter Your &Name"
labeledNodeId="username" />
<textInput id="username" name="username" />
この例では、アクセス・キー「n」がtextInput
要素にバインドされています。[Alt]キーを押しながら[n]を押すと、textInput
要素にフォーカスが設定されます。
また、同じアクセス・キーをいくつかの要素にバインドすることも有効です。アクセス・キーを押すたびにフォーカスは(同じアクセス・キーに指定された)次の要素に移動し、一巡すると最初のフォーカスに戻ります。
アクセス・キーに関する最後の注意点は、使用するアクセス・キーは要素のテキストによって決まる、つまりユーザーの言語設定によって決まるという点です。したがって、国際化されたアプリケーションを正しく実装するには、アクセス・キーが言語リソース・バンドルから取り出されるように、textAndAccessKey
属性をデータ・バインドする必要があります。uiXMLにおけるtextAndAccessKey
のデータ・バインドは簡単です。ただし、この属性はJava APIのBeanには存在しません。このバインドを完全にJavaで行うには、次の例のようにoracle.cabo.ui.data.bind.AccessKeyBoundValue
を使用する必要があります。
BundleBoundValue bundle = new BundleBoundValue("myResourceBundle",
"goHomeLink");
AccessKeyBoundValue text = new AccessKeyBoundValue(bundle,
false); //return text
AccessKeyBoundValue key = new AccessKeyBoundValue(bundle,
true); //return accessKey
LinkBean goHomeLink = new LinkBean();
goHomeLink.setAttributeValue(UIConstants.TEXT_ATTR, text);
goHomeLink.setAttributeValue(UIConstants.ACCESS_KEY_ATTR, key);
詳細は、「国際化」を参照してください。
全体例を次に示します。実際の例へのリンクを後述します(Netscape 4.xではアクセス・キーはサポートされないので注意してください)。
<page xmlns="http://xmlns.oracle.com/uix/controller"
xmlns:ctrl="http://xmlns.oracle.com/uix/controller"
xmlns:html="http://www.w3.org/TR/REC-html40">
<ctrl:content xmlns="http://xmlns.oracle.com/uix/ui"
xmlns:data="http://xmlns.oracle.com/uix/ui" >
<form name="form1">
<contents>
<pageLayout>
<globalButtons>
<globalButtonBar>
<contents>
<globalButton textAndAccessKey="&Help"
destination="http://www.oracle.com"/>
</contents>
</globalButtonBar>
</globalButtons>
<tabs>
<tabBar>
<contents>
<link textAndAccessKey="Goto &Help" destination="http://www.oracle.com/"/>
</contents>
</tabBar>
</tabs>
<pageHeader>
<globalHeader>
<contents>
<link textAndAccessKey="&Oracle"
selected="true"
destination="http://www.oracle.com/"/>
<link textAndAccessKey="&Oracle"
destination="http://www.oracle.com/"/>
</contents>
</globalHeader>
</pageHeader>
<contents>
<flowLayout>
<contents>
Here is a
<link textAndAccessKey="&Link." destination="http://www.oracle.com/" />
Notice that L is the access key.
</contents>
</flowLayout>
<flowLayout>
<contents>
<styledText labeledNodeId="txt1" textAndAccessKey="&Name" />
<textInput name="txt1" id="txt1" text="Oracle" />
</contents>
</flowLayout>
<flowLayout>
<contents>
Here are some buttons with the access keys set
<button textAndAccessKey="&Update" destination="" />
<submitButton textAndAccessKey="&Submit" />
<resetButton textAndAccessKey="&Reset" />
</contents>
</flowLayout>
<styledText textAndAccessKey="Styled &Text" destination=""
styleClass="OraHeader" />
<flowLayout>
<contents>
Here is
<link textAndAccessKey="another &Link."
destination="http://www.oracle.com/" />
Notice that L has been used again as the access key.
</contents>
</flowLayout>
</contents>
</pageLayout>
</contents>
</form>
</ctrl:content>
</page>
これまでのセクションでは、UIXアプリケーションを全体的にアクセス可能にする方法を説明しました。障害を持つユーザーの使用感は、アプリケーションにその他の機能を追加することでより向上させることができます。ただしこのレベルまでサポートすると、通常のユーザーの使用感を損なう可能性があります。このため、UIXではアクセシビリティ・モードAPIをサポートしており、これを使用するとアクセシビリティ・サポートのレベルをユーザーごとにカスタマイズできます。
各種のアクセシビリティ・モードがクラスoracle.cabo.share.config.AccessibilityMode
に実装されています。現在、3つのレベルがサポートされています。
AccessibilityMode | 説明 |
---|---|
DEFAULT_MODE |
このレベルでUIXは、障害を持つユーザーがアクセス可能なHTMLコードを生成します。これはデフォルト・レベルです。 |
SCREEN_READER_MODE |
スクリーン・リーダーの使用のためにコードが最適化されます。これによって生成されるコードは、障害を持つユーザーの使用感を特に向上させますが、通常のユーザーの出力の質は低下する場合があります。 |
INACCESSIBLE_MODE |
視力のあるユーザーに関係しないコードはすべて、このレベルでは削除されます。作成されるHTMLの大きさはこの最適化によって小さくなります。ただし障害を持つユーザーはアプリケーションにアクセスできなくなるため、アプリケーションの使用に際して重大な問題に直面します。 |
現在のアクセシビリティ・モードは、現在のConfiguration
のConfiguration.ACCESSIBILITY_MODE
プロパティによって取得されます(現在のConfiguration
は、現在のRenderingContext
またはBajaContext
から取得されます)。
アクセシビリティの現在のレベルを変更するには、Configuration
を実装(ConfigurationImpl
クラスまたはCustomization
クラスのいずれかを使用して実行)し、Configuration.ACCESSIBILITY_MODE
をキーとしてアクセシビリティ・モードを設定(詳細は「構成」を参照)することが必要です。
このトピックでは、追加の情報属性を使用してUIXアプリケーションをアクセス可能にする方法、スクリーン・リーダーでデータを取得しやすくする方法、およびアプリケーションへのキーボード・アクセスを簡単にする方法を学びました。
このトピックでは説明されていませんが、アプリケーションへのアクセスを容易にするもう1つの方法は、ユーザーがより大きいフォント・サイズを選択するか、高コントラストのカラー・スキームを選択すること(あるいはその両方)です。UIX Stylesを使用して、これらの機能をアプリケーションに実装できます。