ここ最近、HTML5の勉強に励んでいるのですが、HTML5の要素、属性を見ると非常にセマティックな要素であることは一目でもわかる。
Firfox3.5やSafari4、Google Chrome3.0βでもすでに実装されている<video>や<audio>、
他にも構造的な部分においては、<header>、<footer>、<aside>、<nav>などは、セマティックな要素の塊そのものだと思う。
しかし、気になる点もいくつかある。
そのひとつが、input要素のtypeである。
以下のようなtypeがあるようだが、これも見た感じ非常にセマティックな要素である。
- search
- tel
- url
- datetime
- datetime-local
- date
- month
- week
- time
今までは、入力項目の場合はname属性で振り分けてただけで、typeは、textがすべての部分で共通であった。
これまでの例を挙げると、
<input type="text" name="search" id="search" value="">または、下記のような場合もある。
<input type="text" value="">この場合は、製作者からすれば、このinputは検索用のコントロールのつもりだろうが、HTMLのソースだけで判断するのは非常に難しい。
ゆえに、全くアクセシビリティにおいても、全くアクセシブルなものでもない。
しかし、HTML5では、今後下記のようになる。
<input type="search" value="">この場合typeの値はsearchなので、恐らくこのコントロールが検索用のコントロールなのだろうと予測がつく。
恐らく、アクセシブルである。
しかし、疑問はここにある。
フォームを作成していく過程において、
フォームに文字数や使用不可文字のような制限をJavaScriptでつけていくのだろうと思うのだが、そこで使うのが恐らくid属性である。
これを付加した状態のマークアップは下記のようになるだろう。
<input type="search" id="search" value="">id属性の値は何でも良いであろうが、さらにアクセシビリティに関してlabel要素が関わってくる。
となるとマークアップは下記のようになるだろう。
<label for="search">検索:</label><input type="search" id="search" value="">従来では、
<label for="search">検索:</label><input type="text" id="search" value="">PHPを使っている場合によれば
<label for="search">検索:</label><input type="text" name="search" id="search" value="">疑問は、大きな変化があるのか？、本当にセマティックなのだろうか？ということである。
for属性の中でこれに当たるコントロールがわかりやすいものにするのがルールのだが、label要素も一緒につけるとなると、これだけで十分アクセシブルであり、セマティックな要素をなしているようにも感じる。
HTML5のtypeの値の意味は本当に成すのだろうかという疑問がでてくる。
しかし、ｓセマティックなのだから、こういうふうにしていくのだろうし、まだ策定中なのだから、たくさんの疑問もでてくるだろう。
また今後HTML5に関するセミナーも随時開催されるようなので、偉大なる業界の先輩方に、疑問をぶつけてみようと思う。
コメント