機械にとって読みやすいWebサイト・semantic markupのお話


ウェブサイトはHTMLという言語で構築されています
プログラマーがHTMLという言語を用いてページを作っていくわけです
で、最近の流行りとしてsemantic markupというのが挙げられます
ページが表示されていればグチャグチャでもいいやという考えではなく、機械にとって理解しやすいコーディングというのが重要視されているわけです

semantic markupに反する代表的なものとしてdivタグ、spanタグというのがあります
これらのタグを用いることで要素をグルーピングし、装飾などを容易にすることができるのですが、これらはパソコンにとってはただの塊としか認識されないためできるだけ他のタグを使うのが望ましいです
例えば記事を囲いたい場合はarticleタグを利用することで機械は「あ、これは記事なんだな!」と把握することができます

これの利点として目の不自由な人が音声でWebサイトを読み上げるツールを利用した時に最も効力を発揮します。「これは記事ですよー」と読み上げてくれるので、divタグで囲うより読みやすいページになるわけです
Semantic Markup »

あとは画像に説明を加えてあげて、万が一画像を読み込むことができなかった場合、どのような画像が表示されるはずだったのか理解することができるようになります。
 <img src="fish.gif" alt="fish">
 altというのを加えてあげることで画像に対し説明を加えることができます
alt自体無くても画像は表示されますが、つけてあげるとより親切というわけです

似たようなものとしてARIAというのもあります
General Principles: Principles: ARIA Landmarks Example

ほぼ同義として捉えて問題ないと思います
<header role="banner">
と書いてあげることで「あ、これはバナーなんだな!」と認識してくれます

0 件のコメント :

コメントを投稿