|
|
アクセシビリティを考慮した HTML フォームの作成
HTML フォームオブジェクトを挿入するときにフォームオブジェクトをアクセシブルにしたり、後でアクセシビリティ属性を変更したりできます。
アクセシブルなフォームオブジェクトの追加- アクセシブルなフォームオブジェクトを初めて追加するときには、そのフォームオブジェクトに対応する [アクセシビリティ] ダイアログボックスをアクティブにします (詳細については、ビジュアル開発のためのワークスペースの最適化を参照してください)。
この操作は、最初に一度だけ実行します。
- ドキュメントで、フォームオブジェクトを表示する場所に挿入ポイントを置きます。
- [挿入]-[フォーム] を選択し、挿入するフォームオブジェクトを選択します。
[Input タグのアクセシビリティ属性] ダイアログボックスが表示されます。
- ダイアログボックスの入力を完了させ、[OK] をクリックします。 これらのオプションは、次のとおりです。
注意： スクリーンリーダーは、オブジェクトのラベル属性として入力した名前を読み上げます。
- ID
- フォームフィールドに ID を割り当てます。 この値を使用すると、JavaScript からフィールドを参照できます。スタイルオプションで [for 属性によるラベルタグの添付] オプションを選択した場合に、属性の値として使用することもできます。
- ラベルタグで囲む
- 指定すると、次のように、フォームアイテムが label タグで囲まれます。
<label>
<input type="radio" name="radiobutton" value="radiobutton">
RadioButton1</label>
- for 属性によるラベルタグの添付
- 指定すると、次のように、フォームアイテムが for 属性を使用した label タグで囲まれます。
<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton">
<label for="radiobutton">RadioButton2</label>
このオプションを選択すると、ブラウザでは、チェックボックスおよびラジオボタンと関連するテキストに長方形のフォーカスが配置されます。Web サイトのビジターは、チェックボックスやラジオボタンを選択する際、そのチェックボックスやラジオボタンのコントロールだけでなく、関連するテキストの任意の場所をクリックしても、選択できるようになります。
注意： これは、アクセシビリティの向上には好ましいオプションですが、実際の動作はブラウザにより異なります。
- ラベルタグなし
- 指定すると、次のようにラベルタグが使用されません。
<input type="radio" name="radiobutton" value="radiobutton">
RadioButton3
- アクセスキー
- ブラウザ内のフォームオブジェクトを選択するのに使用できるキーボードの文字 (1 文字) と Alt キー (Windows) または Control キー (Macintosh) の組み合わせを指定します。 たとえば、アクセスキーとして「B」と入力すると、Macintosh ブラウザを使用するユーザーは、Control + B キーでフォームオブジェクトを選択できます。
- タブインデックス
- フォームオブジェクトのタブ順序を指定します。 1 つのオブジェクトに対してタブ順序を設定したら、他のすべてのオブジェクトについてもタブ順序を設定する必要があります。
タブ順序を設定しておくと、ページに他のリンクやフォームオブジェクトがある場合に、Web サイトのビジターは、Tab キーを使用して特定の順序でオブジェクト間を移動できます。
- [はい] をクリックして form タグを挿入します。
フォームオブジェクトがドキュメントに表示されます。
注意： [キャンセル] を押すと、フォームオブジェクトはドキュメント内に表示されますが、Dreamweaver は、アクセシビリティタグや属性をこのフォームオブジェクトに関連付けません。
フォームオブジェクトのアクセシビリティ設定の変更- ドキュメントウィンドウで、オブジェクトを選択します。
- 次のいずれかの操作を実行します。
|
