文書構造を意識したHTMLマークアップ

モックアップを基にマークアップをしていくのですが、前回「HTMLタグと格闘」にも書きましたが「全体の構造・文章の意味合い」などを考え進めていき、最終的にバリデートをして文書構造のアウトラインの確認・エラーの有無をチェックしています。

また、デザインには無くとも見出しがあったほうが良い箇所は表示されない形にして追加したり、デザインからタグ決めをしないなどデザインに左右され無いように気を付けています。

いずれにせよタグの用法は変わることがあるので、最新の情報に触れるように心掛けています。

因みに、私はバリデートに「W3CMarkup Validation Service(マークアップバリデーションサービス)」を使用しています。

装飾などはHTMLではなくCSSで指定

内容を記述するHTML,スタイリングをしていくCSS、双方の役割を区別するためです。イメージ画像などはCSSで指定しています。

その方がHTMLがスッキリして「全体の構造・文章の意味合い」を考える上で分かり易いなどがあります。

また、修正や更新する場合でも作業がしやすくなるなどの利点があります。

キーボードでも操作できる

以前は気にも留めていなっかったのですが、最低限「クリックできる箇所はキーボードでも操作できなければいけない」こと、みなさんは知っていましたか？

これは昨今、世界的にも、そして日本国内にも広がってきた「ウエブアクセシビリティ」と関係があるのです。

工業製品に「JIS規格」があるようにWebにも「JIS規格」があり、「あらゆる人が等しく同じ情報にアクセスできなければいけない」となっています。

例えば、「divタグ」「pタグ」などはキーボードでは操作できません。一手間加えれば操作出来るようにはなりますが、「aタグ」・「buttonタグ」・「inputタグ」などはその一手間が必要ないのです。

また、キーボードで操作できてもどの箇所が操作可能なのかわからない場合があります。そんな時はCSSで「focus(フォーカス)」のスタイルを設定しています。