チュートリアル : ユーザー補助対応の Web アプリケーションの作成
更新 : 2007 年 11 月
ユーザー補助対応の Web ページを作成することにより、可能な限り多くの顧客を獲得できるようになります。ユーザー補助対応のページが役に立つのは、障害を持つユーザーに対してだけではありません。テキスト表示のみのブラウザを使用しているユーザーや、Web ページのコンテンツを解釈するソフトウェアを使用しているユーザーも、ユーザー補助機能を使用している可能性があります。ユーザー補助対応のデザインにより、検索エンジンなどの自動化ツールがページ上の情報の検索、操作、インデックス付けなどの処理を行うことができるようになります。最後に、将来は、通信関連法規が改正されて、従来のソフトウェアと同様に、インターネット上で配布される情報も、ユーザー補助の機能を備えていることを要求されるようになる可能性があります。詳細については、「ASP.NET におけるユーザー補助のサポート」および「ASP.NET コントロールとユーザー補助」を参照してください。
「Microsoft Accessibility Web site」に、ユーザー補助対応の Web ページのデザインに役立つヒントが掲載されています。
すべてのグラフィックスに対して適切な代替 (ALT) テキストを用意する。
イメージ マップを正しく使用する。
役に立つリンク テキストを記述する。
適切なキーボード ナビゲーションをデザインする。
フレームを使用しない代替ページを用意する。
テーブルとその代替表記を正しく使用する。
テキスト リーダーの書式指定オプションをサポートする。
スタイル シートの使用を必要としない。
リーダーが使用できるファイル形式を使用する。
スクローリング マーキーの使用は避ける。
ほとんどのオブジェクトにタイトルを表示する。
ユーザー補助の基準を満たすことができない場合は、代わりにテキストだけの Web ページを用意することを検討します。
ASP.NET コントロールでは、ユーザー補助ガイドラインの多くがサポートされています。たとえば、キーボード フォーカスや画面要素を知らせる機能があります。ASP.NET のコントロールのプロパティを使うと、次の表に示すように、他のユーザー補助ガイドラインをサポートできます。
Control プロパティ |
ユーザー補助に関する考慮点 |
|---|---|
TabIndex |
フォームでのフォーカスの移動順序を指定します。テキスト ボックスなど、固有のラベルを持たないコントロールのタブ オーダーの直前に、関連するラベルを置く必要があります。それが不可能、または不適切である場合は、Label コントロールの AssociatedControlID プロパティを使用してそれをテキスト ボックスに関連付けます。 |
Text |
HTML の u 要素を使用して、コントロールのショートカット キーを表示します。アクセス キーを使うと、公開されたキーボード アクセスをすべての機能に対して提供できるようになります。コントロールのショートカット キーを有効にするには、AccessKey プロパティを使用します。 |
Font Size |
特定のサイズではなく、見出しタグを使用します。 |
AlternateText |
Web ページのコンテンツを理解するために必要なイメージには、代替テキストを付けます。グラフィックなレイアウトに使用されるイメージのように、状況によってはイメージに代替テキストを設定しない方が適切な場合もあります。イメージの AlternateText プロパティを空で表示するには、Image コントロールの GenerateEmptyAlternateText プロパティを true に設定します。 |
AccessKey |
コントロールへのキーボード アクセスを提供します。 |
前提条件
このチュートリアルを実行するための要件は次のとおりです。
Microsoft Visual Web Developer Web 開発ツール。
.NET Framework。
Web サイトおよびページの作成
このチュートリアルでは、代数のクラスの Web サイトを作成します。ユーザー インターフェイスには、次のコントロールを使用します。
クラス ロゴの Image コントロール。
クラスの時間割を格納したテーブルを表示する GridView コントロール。
授業用の教科書を記述したページにリンクする HyperLink コントロール。
このチュートリアルでは、ユーザー インターフェイス (UI) のユーザー補助と、ユーザー補助をサポートする Web サーバー コントロールの使用方法について重点的に説明します。HyperLink、GridView、Image、Label などのよく使用されるコントロールのユーザー補助機能について説明します。HyperLink コントロールは、すべて同じ Web ページを開きますが、この Web ページには何も記述されていません。
次の手順で、ファイル システム Web サイトを作成し、Lecture.aspx という名前のページを追加します。
ファイル システム Web サイトを作成するには
Visual Web Developer を開きます。
[ファイル] メニューの [新しい Web サイト] をクリックします
[新しい Web サイト] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
[場所] ボックスに、Web サイトのページを格納するフォルダの名前を入力します。
たとえば、フォルダ名として「C:\WebSites」と入力します。
[言語] ボックスで、作業に使用するプログラミング言語をクリックします。
[OK] をクリックします。
Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。
ソリューション エクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。
[Visual Studio にインストールされたテンプレート] の [Web フォーム] をクリックします。
[名前] ボックスに「Lecture.aspx」と入力し、[OK] をクリックします。
表示するデータの作成
作成しているページには、代数のクラスの講義についての情報が表示されます。このチュートリアルでは、クラスのデータは XML ファイルに保存されます。
XML データ ファイルを作成するには
ソリューション エクスプローラで、[App_Data] フォルダを右クリックし、[新しい項目の追加] をクリックします。
.gif "メモ")
メモ :この XML ファイルは必ず [App_Data] フォルダに追加してください。
[新しい項目の追加] ダイアログ ボックスの、[Visual Studio にインストールされたテンプレート] の下の [XML ファイル] をクリックします。
[プロジェクト名] ボックスに「Syllabus」と入力します。
[追加] をクリックします。
次の XML をファイルにコピーし、既定のコンテンツを上書きします。
<?xml version="1.0" encoding="utf-8" ?> <entries> <lecture date="04/02/2005" topic="Integers and Rational Numbers" /> <lecture date="04/03/2005" topic="Equations and Polynomials" /> <lecture date="04/04/2005" topic="Roots and Irrational Numbers" /> </entries>XML ファイルを保存して閉じます。
フォームへのコントロールの追加
このアプリケーションのフォームにコントロールを追加するときには、ユーザー補助対応アプリケーションを作成するための次のガイドラインを検討してください。
ユーザー情報を提供するすべてのイメージに、代替の記述テキストを用意します。
テーブルを使用する場合は、Title 属性を使用して、表の列と行に名前を付けます。また、テーブルは左から右、上から下に読んだときに意味がわかるようにします。
ユーザーが選択した書式指定オプションをサポートするように、書式指定したテキストを使用せずに、本当の見出しタグを使用します。
役に立つリンク テキストを使用します。たとえば、テキストが "講義 1 のノートはここをクリック" である場合は、"ここをクリック" よりも "講義 1 ノート" の方が有用なリンク テキストです。
指定した言語のテキスト方向に従って、ページでのフォーカスの移動順序を設定します。
ほとんどのオブジェクトに対して Title 属性を使用します。
ページにユーザー補助コントロールを追加するには
デザイン ビューに切り替えます。
[プロパティ] で [DOCUMENT] に次のプロパティを設定します。
[Title] を「Algebra Class」に設定します。
[BgColor] を [Background] に設定します。
ページの先頭で、「Algebra Review Class」と入力します。
書式を設定するテキストを強調表示して選択し、次に [書式設定] ツール バーで、左端の一覧の [見出し 1] をクリックします。
ツールボックスの [標準] グループに次のコントロールを追加し、以下に示すようにプロパティを設定します。
メモ :ページのレイアウトは重要ではありません。
コントロール
プロパティ
値
Image
AlternateText
代数式
ImageUrl
イメージの URL
TabIndex
0
Panel
ID
Lectures
TabIndex
0
HyperLink ([Lectures] パネルに追加)
ID
Lecture1
Text
講義 1 ノート
AccessKey
1
href
~/Lecture.aspx
TabIndex
1
HyperLink ([Lectures] パネルに追加)
ID
Lecture2
Text
講義 2 ノート
AccessKey
2
href
~/Lecture.aspx
TabIndex
2
HyperLink ([Lectures] パネルに追加)
ID
Lecture3
Text
講義 3 ノート
AccessKey
3
href
~/Lecture.aspx
TabIndex
3
Label
ID
TextbookLabel
Text
教科書 :
AssociatedControlID
TextbookLink
Hyperlink
ID
TextbookLink
Text
著者: J. A. Smith
href
~/Lecture.aspx
TabIndex
4
Panel コントロールをクリックし、GroupingText プロパティを「Lecture Notes」に設定します。
ソース ビューに切り替えます。
HTML 要素の内側をクリックし、次に [プロパティ] で [Lang] を [en] に設定して、このページの言語を英語に指定します。
タグは、次のように記述されています。
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
GridView コントロールの追加
講義に関する情報が GridView コントロールに表示されます。GridView コントロールは、前のセクションで作成した XML ファイルからデータを取得します。
GridView コントロールを追加し、それを XML ファイルにバインドするには
デザイン ビューに切り替えます。
ツールボックスの [データ] グループから、XmlDataSource コントロールをページにドラッグします。
配置は重要ではありません。
XmlDataSource コントロールは、XML ファイルを読み取り、そのデータをページにあるコントロールが使用できるようにします。
[XmlDataSource] を右クリックし、[スマート タグの表示] をクリックし、次に [XmlDataSource タスク] メニューの [データ ソースの構成] をクリックします。
[データ ソースの構成] ダイアログ ボックスが表示されます。
[データ ファイル] ボックスに「~/App_Data/Syllabus.xml」と入力し、[OK] をクリックします。
ツールボックスの [データ] グループから、GridView コントロールをページに追加します。
[プロパティ] で各プロパティを次の表に示されているように設定します。
プロパティ
設定
ID
SyllabusGrid
DataSourceId
XmlDataSource1
TabIndex
9
GridView コントロール セルへのタイトルの追加
ユーザー補助の観点から、HTML テーブルの列やセルにタイトルが必要です。GridView コントロールにより、実行時に HTML テーブルが表示されます。したがって、コントロールによって表示される列に、確実にタイトルが表示されるようにする必要があります。このタスクを実行するには、RowCreated イベントを処理するコードを記述します。イベント ハンドラで、GridView コントロールにより作成されたテーブルのセルに、Title 属性を追加します。
GridView コントロールの列にタイトルを追加するには
ソリューション エクスプローラで、ページ名 (Default.aspx) を右クリックし、[コードの表示] をクリックします。
次のコードを追加します。
Protected Sub SyllabusGrid_RowCreated _ (ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _ Handles SyllabusGrid.RowCreated Dim cells As TableCellCollection = e.Row.Cells If e.Row.RowType = DataControlRowType.Header Then cells(0).Attributes("title") = "Date" cells(1).Attributes("title") = "Topic" ElseIf e.Row.RowType = DataControlRowType.DataRow Then cells(0).Attributes("title") = _ DataBinder.Eval(e.Row.DataItem, "date").ToString() cells(1).Attributes("title") = _ DataBinder.Eval(e.Row.DataItem, "topic").ToString() End If End Subprotected void SyllabusGrid_RowCreated (object sender, System.Web.UI.WebControls.GridViewRowEventArgs e) { TableCellCollection cells = e.Row.Cells; if (e.Row.RowType == DataControlRowType.Header) { cells[0].Attributes["title"] = "Date"; cells[1].Attributes["title"] = "Topic"; } else if (e.Row.RowType == DataControlRowType.DataRow) { cells[0].Attributes["title"] = DataBinder.Eval(e.Row.DataItem, "date").ToString(); cells[1].Attributes["title"] = DataBinder.Eval(e.Row.DataItem, "topic").ToString(); } }デザイン ビューで、GridView コントロールをクリックし、次に [プロパティ] ウィンドウで RowCreated イベントを "SyllabusGrid_RowCreated" に設定します。
これで、イベントがイベント ハンドラに接続されます。
アプリケーションのテスト
Visual Web Developer には、アクセシビリティ検証機能が含まれています。このツールを使用すると、Web ページをチェックして、ユーザー補助ガイドラインを満たしているかどうかを判断します。このツールは、デザイン時にページの HTML をチェックします。また、ページの出力もチェックできます。ASP.NET コントロールにより表示されるマークアップがユーザー補助ガイドラインを満たしているかどうかを確認します。
アプリケーションのユーザー補助機能をテストするには
ページがデザイン ビューで表示されていることを確認します。
[ツール] メニューの [アクセシビリティのテスト] をクリックします。
[アクセシビリティ検証] ダイアログ ボックスが表示されます。
メモ :アクセシビリティ検証ツールは、Microsoft Visual Web Developer Express Edition では使用できません。
確認するユーザー補助標準のチェック ボックスをオンにし、[検証] をクリックします。
Visual Web Developer でページがチェックされ、検証エラーがあれば、そのレポートが表示されます。このアクセシビリティ検証レポートでは、GridView コントロールにより表示されるテーブルがユーザー補助ガイドラインを満たしているかどうかは判断できません。
Ctrl キーを押しながら F5 キーを押してページを実行します。
アクセス キーをテストします。
このアプリケーションの場合は、HyperLink コントロールに、アクセス キーとして Alt + 1、Alt + 2、および Alt + 3 を定義しました。アクセス キーを押すとリンクに移動します。Enter キーを押してリンク先に移動します。
グラフィックスの表示をオフにして、表示された代替テキストでページを使用できることを確認します。具体的な処理手順を次に示します。
Microsoft Internet Explorer 6.0 で、[ツール] メニューの [インターネット オプション] をクリックします。
[詳細設定] タブの [マルチメディア] の下にある画像関連オプションをオフにします。
代替テキストを表示するには、ページを更新する必要があります。
サウンドをオフにして、重要な情報が失われないことを確認します。具体的な処理手順を次に示します。
Internet Explorer 6.0 で、[ツール] メニューの [インターネット オプション] をクリックします。
[詳細設定] タブの [マルチメディア] の下にあるサウンド関連オプションをオフにします。
アプリケーションを、スタイル シートをオフにできるブラウザで表示し、スタイル シートをオフにしてページが読むことができることを確認します。
Internet Explorer 6.0 で、[ツール] メニューの [インターネット オプション] をクリックします。
[全般] タブの [ユーザー補助] をクリックして、スタイル シート オプションを設定します。
Microsoft Windows の [ハイコントラスト] オプションを使用して、ページが読むことができることを確認します。[ハイコントラスト] オプションをテストするには
Windows の [スタート] ボタンをクリックし、[コントロール パネル] をポイントして、[ユーザー補助のオプション] をクリックします。
次に、[画面] タブの [ハイコントラストを使う] チェック ボックスをオンにします。
ユーザー インターフェイスのすべての要素について、色とフォントの変更が反映されていることを確認します。また、テキストの後ろにイメージやパターンが表示されていないことを確認します。
[ハイコントラスト] を選択したときにだけ使用可能となる、サポートされている最大のフォント サイズを使用して、ページが読むことができることを確認します。この操作を行うには、次の手順を実行します。
Windows の [スタート] ボタンをクリックし、[コントロール パネル] をポイントして、[画面] をクリックします。
[デザイン] タブの [フォント サイズ] ボックスの [特大] を選択します。
ブラウザのウィンドウのサイズを変更し、読みやすさを確認します。
キーボードを使用して Web ページ内を移動し、移動の順序が実用的であり、Tab キーですべてのリンクに移動でき、Ctrl キーを押しながら Tab キーを押すとペインまたはセクション間を移動できることを確認します。
すべてのテキストを選択してクリップボードにコピーし、その内容が理解できることを確認します。