マニュアルキャンセル

Dreamweaver のアクセシビリティ機能

検索

最終更新日 : 2021年4月28日

Dreamweaver を使用して、視覚、聴覚、動作などに障害を持つ人々を配慮した Web サイトおよび Web 製品を作成します。

注意：

Dreamweaver CC 以降では、ユーザーインターフェイスが簡素化されています。そのため、この記事で説明されているオプションの一部が Dreamweaver CC 以降には存在しない場合があります。詳しくは、こちらの記事を参照してください。

アクセシビリティコンテンツについて

アクセシビリティとは、視覚、聴覚、動作などに障害を持つ人々を配慮した Web サイトおよび Web 製品を作成することです。ソフトウェア製品および Web サイトのアクセシビリティ機能とは、例えば、スクリーンリーダーのサポート、グラフィックのテキスト表示、キーボードショートカット、表示カラーのハイコントラストへの切り替えなどの機能です。Dreamweaver には、アクセシビリティの高い Web 製品や Web コンテンツを作成およびオーサリングするためのツールが用意されています。

アクセシビリティ機能を使用する必要がある Dreamweaver デベロッパー向けとして、アプリケーションには、スクリーンリーダー、キーボードによる操作、およびオペレーティングシステムのアクセシビリティ機能が用意されています。

アクセシビリティの高い Web コンテンツを作成する Web デザイナーは、Dreamweaver を使用すると、スクリーンリーダーに対応した支援コンテンツを含むアクセシビリティの高い Web ページや、政府のガイドラインに従った Web ページを作成できます。例えば、ページエレメントの挿入時に、イメージのテキスト表示など、アクセシビリティ属性の入力を求めるダイアログボックスがあります。次に、このイメージが視覚障害者向けのページに表示されると、スクリーンリーダーによってその説明が読み上げられます。

注意：

詳しくは、World Wide Web Consortium の Web Accessibility Initiative（www.w3.org/wai）と米国リハビリテーション法の第 508 条（www.section508.gov）を参照してください。

注意：

日本工業規格アクセシビリティガイドラインについて詳しくは、JIS X 8341-3（www.jisc.go.jp）を参照してください。

オーサリングツールで、開発プロセスを自動化することはできません。アクセシビリティの高い Web サイトをデザインするには、アクセシビリティの必要条件を理解し、そのような Web サイトを作成する過程で様々な判断を下す必要があります。デザイナーは、障害を持つビジターが Web ページをどのように閲覧し、操作するかということを考える必要があります。だれにでもアクセス可能な Web サイトを作成するには、入念な計画立案、開発、テスト、および評価を実施することが最良の方法です。

Dreamweaver でのスクリーンリーダーの使用

スクリーンリーダーは、コンピューターの画面に表示されるテキストを読み上げる機能です。また、コンテンツの作成時にアクセシビリティタグや属性が設定されている場合は、アプリケーション内のボタンのラベルやイメージの説明など、テキストでない情報も読み上げます。

Dreamweaver を使用して Web ページを作成している最中にも、スクリーンリーダーを使いながら作成すると、作業しやすくなります。スクリーンリーダーは、ドキュメントウィンドウの左上隅から読み始めます。

Dreamweaver は、Freedom Scientific（www.freedomscientific.com）の JAWS for Windows と GW Micro（www.gwmicro.com）の Window-Eyes スクリーンリーダーをサポートしています。

オペレーティングシステムのアクセシビリティ機能のサポート

Dreamweaver は、Windows と Mac OS の両方のオペレーティングシステムでアクセシビリティ機能をサポートします。例えば、Mac OS では、ユニバーサルアクセスダイアログボックス（アップルメニューから「環境設定」）で表示に関する環境設定を設定できます。設定は、Dreamweaver ワークスペースに反映されます。

また、Windows オペレーティングシステムのハイコントラスト設定もサポートしています。Windows のコントロールパネルで、このオプションを有効にすると、次のように Dreamweaver に反映されます。

ダイアログボックスとパネルに、システムカラー設定が使用される。例えば、カラーを「黒地に白色」に設定すると、Dreamweaver のすべてのダイアログボックスおよびパネルは、白の前景色に黒の背景色で表示されます。
コードビューには、システムカラーとウィンドウテキストカラーが使用されます。例えば、システムカラーを「黒地に白色」に設定している場合に、編集／環境設定／コードカラーリングでテキストカラーを変更しても、Dreamweaver では、これらのカラー設定が無視され、コードテキストが白の前景色に黒の背景色で表示されます。
デザインビューでは、修正／ページプロパティで設定した背景色とテキストカラーが使用され、デザインしたページのカラーはブラウザーで表示されるものと同じになります。

アクセシビリティの高いページデザインのためのワークスペースの最適化

アクセシビリティを考慮した Web ページを作成するためには、ラベルや説明などの情報をページオブジェクトに関連付けて、どのようなビジターにもアクセス可能なコンテンツにする必要があります。

そのためには、オブジェクトごとにアクセシビリティダイアログボックスをアクティブにします。このようにすると、Dreamweaver では、オブジェクトを挿入するときにアクセシビリティ情報の入力を要求されます。「環境設定」の「アクセシビリティ」カテゴリーにあるオブジェクトのいずれに対しても、ダイアログボックスをアクティブにすることができます。

編集／環境設定（Windows）または Dreamweaver／環境設定（Mac OS）を選択します。
左のカテゴリーリストで「アクセシビリティ」を選択してオブジェクトを選択します。次の設定をして「OK」をクリックします。

挿入時に属性を表示

アクセシビリティダイアログボックスをアクティブにするオブジェクトを選択します。例えば、フォームオブジェクト、フレーム、メディア、イメージなどです。

開くときにフォーカスをパネル内に維持する

フォーカスをパネル内に維持することにより、スクリーンリーダーが利用しやすくなります。これを選択しない場合は、パネルを開くときにフォーカスがデザインビューまたはコードビュー内に維持されます。

オフスクリーンレンダリング

スクリーンリーダーを使用する場合に選択します。

注意：

新しいテーブルを挿入するとき、テーブルの挿入ダイアログボックスにアクセシビリティ属性が表示されます。

キーボードによる Dreamweaver の操作

パネル、インスペクター、ダイアログボックス、フレーム、およびテーブルを、マウスを使用せずにキーボードで操作することができます。

注意：

Tab キーと矢印キーの使用は、Windows でのみサポートされています。

パネルの操作

ドキュメントウィンドウで、Ctrl + F6 キーを押して、フォーカスをパネルに移動します。

パネルのタイトルの周りの点線は、フォーカスがそのパネルにあることを示しています。スクリーンリーダーにより、フォーカスが置かれているパネルのタイトルバーが読み上げられます。
パネル上の目的の場所にフォーカスを移動するには、Ctrl + F6 キーをもう一度押します。Ctrl + Shift + F6 キーを押して、フォーカスを前のパネルに移動します。
目的のパネルが開いていない場合は、ウィンドウメニューのキーボードショートカットを使用して該当するパネルを表示し、Ctrl + F6 キーを押してフォーカスをそのパネルに移動します。

目的のパネルが開いていても展開されていない場合は、フォーカスをパネルのタイトルバーに置いてから、スペースキーを押します。スペースキーをもう一度押すとパネルが縮小されます。
Tab キーを押すと、パネル内のオプションを移動することができます。
必要に応じて矢印キーを使用して移動できます。
- オプションに選択項目がある場合、矢印キーで選択項目間を移動し、スペースキーを押して選択を確定します。
- パネルグループに他のパネルを開くタブがある場合、開いているタブにフォーカスを置き、左または右向き矢印キーを使って他のタブを開きます。新しいタブを開いたら、Tab キーを押して、そのパネル内のオプションを移動します。

プロパティインスペクターの操作

プロパティインスペクターが表示されていない場合は、Ctrl + F3 キーを押して開きます。
Ctrl + F6 キー（Windows のみ）を押して、プロパティインスペクターにフォーカスを移動します。
Tab キーを押すと、プロパティインスペクター内のオプションを移動することができます。
適切な矢印キーを使用して、オプションの選択項目間を移動します。
Ctrl + 下矢印 / 上矢印キー（Windows）または Command + 下矢印 / 上矢印キー（Mac OS）を押すと、必要に応じてプロパティインスペクターを展開または縮小できます。右下隅の展開矢印にフォーカスを置いてスペースキーを押しても、同様の操作ができます。

注意：

キーボードのフォーカスがプロパティインスペクターの内部（パネルのタイトルにではなく）にないと、展開・縮小できません。

ダイアログボックスの操作

Tab キーを押して、ダイアログボックス内のオプションを移動します。
矢印キーを使用して、オプションの選択項目間を移動します。
ダイアログボックスにカテゴリーリストがある場合、Ctrl + Tab キー（Windows）を押して、フォーカスをカテゴリーリストに移動し、矢印キーを使用してリスト内を上下に移動します。
もう一度 Ctrl + Tab キーを押して、カテゴリーのオプションに移動します。
Enter キーを押してダイアログボックスを終了します。

フレームの操作

ドキュメントでフレームが使用されている場合は、矢印キーを使用してフォーカスをフレームに移動できます。

フレームの選択

Alt+↓キーを押して、ドキュメントウィンドウに挿入ポイントを置きます。
Alt+↑キーを押して、現在フォーカスが置かれているフレームを選択します。
Alt + ↑キーを押し続けて、フォーカスをフレームセットに移動し、その後、ネストされたフレームセットがある場合は、親フレームセットに移動します。
Alt+↓キーを押して、フォーカスを子フレームセットまたはそのフレームセット内の 1 つのフレームに移動します。
フォーカスを 1 つのフレームに置いた状態で、Alt+←または Alt+→キーを押して、フレーム間を移動します。

テーブルの操作

必要に応じて、矢印キーを押すか、または Tab キーを押してテーブル内の他のセルに移動します。

注意：

一番右のセルで Tab キーを押すと、テーブルに新しい行が 1 つ追加されます。
セルを選択するには、セル内に挿入ポイントがある状態で Ctrl + A キー（Windows のみ）を押します。
テーブル全体を選択するには、Ctrl + A キーを、セル内に挿入ポイントがある場合は 2 回、セルが選択されている場合は 1 回押します。
テーブルを閉じるには、Ctrl + A キーを、セル内に挿入ポイントがある場合は 3 回、セルが選択されている場合は 2 回、テーブルが選択されている場合は 1 回押し、上向き矢印キー、左向き矢印キー、右向き矢印キーのいずれかを押します。

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

詳しく見る