アクセシブルフォーム考察 -no table,no dl-

以前のエントリーで、「テキストボックスにフォーカスされるフォーム」を作成しましたが、これよりもアクセシブルなフォームを作成しました。

デモページはこちらから

form0901201.jpg

作成への背景

テキストボックスにフォーカスされるフォーム」でも、使っているのですが、お問い合わせフォームの形というのは、<table>、<dl>で作られることが多いのですが、表示上は問題はありませんが、 HTMLの文章構造的にみると<table>、<dl>で作るのは、やはりおかしいかと思います。

ですので、<form>には、<fieldset>、<input>、<select>、<option>、<legend>、<label>、<textarea> 以外、挿入するのは、好ましくないのではと思いました。

ですので、<form>、<fieldset>、<input>、<select>、<option>、<legend>、<label>、<textarea> のみのフォームをCSSとXHTMLのみで作成しました。

以下マークアップ例です。

XHTML

<form id="form1" action="./form.cgi" method="post" name="form1">
<fieldset>
<legend>お問い合わせフォーム</legend>

	<label for="name">お名前</label>
    	<input type="text" id="name" name="name" size="30" />

	<label for="mail">メール</label>
    	<input type="text" id="mail" name="mail" size="40" />

	<label for="address">ご住所</label>
    	<input type="text" id="address" name="address" size="60" />

	<label for="message">お問い合わせ内容</label>
    	<textarea id="message" name="message" cols="60"  rows="10"></textarea>
        
    <input type="submit" name="submit" id="submit" value="送信" />
</fieldset>
</form>

イメージとしては、ラベルの下にテキストボックスを置きたいので、このままでは、テキストボックスはラベルの横に設置されてしまいます。

改行させなければならないのですが、<br />ではなくCSSで制御します。

<input>にdisplay: block;を設置すれば、<input>はブロックレベル要素になるので、改行されるので、テキストボックスはラベルの下に設置されます。

下記がCSSのソース例です。

CSS

input,textarea,select{
	display: block;
}

さらに、テキストボックスにフォーカスされるフォームですので、:focusをつけます。

下記がCSSのソース例です。

CSS

input:focus,textarea:focus,select:focus{
	background:#CCCC99;
}

これにて、フォーム内に不必要なタグが排除されアクセシブルになったのはないかと思います。

検証ブラウザ

  • Firefox 3
  • Internet Explore 7
  • Opera 9.6
  • Safari 3.1
  • Google Chrome

ソースのダウンロード

このアクセシブルフォームのソースは下記よりダウンロード可能です。もちろんフリーです。

ファイルの構成は、

  • form1.html
  • form.css
  • reset-eric.css

form1.htmlは、フォームのマークアップです。

form.cssは、デモページに表示されているデザインや<input>などの改行を制御しています。

reset-eric.cssは、エリック・メイヤーのリセットCSSです。

accessible formのダウンロードはコチラから

このアクセシブルフォームがなにかの参考になれば幸いです。

何か、お気づきの点や、不都合等あればコメントしていただければ嬉しいです。