タグで読む - だれもが読めるホームページを作るコツ

ホームページは、「タグ」と呼ばれる記号と、文章の組み合わせで書かれています。ここでは、タグを理解している人を対象にしていますので、少し難しい内容になっています。これまでの説明と同じことを、別の言い方で説明しているだけなので、必要がない人は、読み進まなくてもだいじょうぶです。

さて、「だれもが読めるホームページを作るコツ」を、そのまま、タグで置きかえてみましょう。

  1. <img src="表題の画像ファイル" alt="桜草研究会"> 「桜草研究会」という表題をきれいな画像で用意しました。画像を表示するときに img タグを使います。alt="桜草研究会" というようにして、画像の代わりになる文章を用意すれば、画像が見られない人にも「桜草研究会」という表題が読めるので、意味がわからなくなることはありません。
  2. <img src="二つの矢印の画像ファイル" alt="前後に移動する" usemap="#map1">
    <map name="map1">
    <area href="mae.html" alt="前へ" shape="rect" coords="0,0,100,50">
    <area href="ato.html" alt="後へ" shape="rect" coords="101,0,200,50">
    </map> イメージマップは、一枚の画像の中に複数のリンクがあるものを言います。上のように area タグを用いて、リンク情報を明らかに書けば、画像が見られない人でも、「前へ」「後へ」という文字をたどって、リンク先へ移動することができます。
  3. ビデオは、音だけや映像だけでもが理解できるように、字幕や音声をくふうするといい。これはタグではなく、ビデオを作るときのくふうです。
  4. <a href="リンク先">ひまわり通信の最新版です。</a> リンクを示す a タグは、このように、リンク先の内容を的確に表現する言葉を使うとわかりやすい。よくある失敗は次のようなものです。 <a href="リンク先">ここをクリックして</a> 、ひまわり通信を読もう。 全文を通して読めば、なにも問題がないように思います。でも、 a タグのところだけをぬき出してしまえば、どこにリンクしているのか、わからなくなります。
  5. <h1></h1><ul></ul> 文章を書くときには、構成をしっかり考えて、段落を作ります。タグを使うときに、文章の段落や構成に合うようにすることがたいせつです。見出しに使う h1 などのタグや、かじょう書きを示す li タグは、文章の構成を整理するときに効果的なタグです。 一方、文字の大きさや色などの装しょくを決めるときには、スタイルシートを使うようにしましょう。
  6. <img src="グラフの画像" alt="千葉県の月別降水量グラフ" longdesc="要約を説明したリンク先"> グラフや図が、ホームページに書かれている内容を理解するために重要な役目をもつときには、言葉による解説を補うことがたいせつです。簡単な要約をつけてもよいです。説明が長くなるときには、解説のページを別に用意して、上のように longdesc でリンクを書くこともできます。( longdesc がきちんとあつかえないパソコンが多いため、別に a タグも用いて、リンクを明示した方が無難です。ばうとみっち)
  7. <script src="スクリプトファイル" type="text/javascript"></script>
    <noscript>スクリプトが動かない人向けの文章</noscript> スクリプトをつかって、画面の情報を切りかえるときには、スクリプトが動かない人が困らないようにしましょう。 noscript タグをつかって、スクリプトが動かないときのための文章やリンクを書くようにしましょう。 <object data="フラッシュのアニメーション" type="application/x-shockwave-flash"> <object data="フラッシュがみられない人向けの画像" type="image/png"> フラッシュも画像も、みられない人向けの文章 </object> </object> ジャバのアプレットやフラッシュなど、プラグインと呼ばれる拡張機能を使う場合には、上のようにして拡張機能を使わない人でもホームページを読み進むことができるようにします。 object タグを上手に重ね合わせると、見る人のパソコンに応じた手段で情報を見せることができます。
  8. <frameset cols="50%, 50%">
    <frame src="一つ目の文書" title="目次"> <frame src="二つ目の文書" title="表紙">
    <noframes> フレームが使えないパソコンを使っている人のために、目次と表紙の内容を合わせたものをここに書いておきます。 </noframes>
    </frameset> フレームが使えないパソコンだけでなく、音声で聞く人にとっても、フレームにたよらないページ構成はたいせつです。
  9. <table summary="表の要約をここに書いておきます。"></table> ホームページをパソコンで読み上げて、耳で聞くときなどには、 table タグは、表よりも単純にあつかわれます。目で読むときには、縦横に自在に目を移すことができますが、音声では順番に聞くことしかできないからです。そのため、かじょう書きのようなあつかいになります。順番に読んだだけでも理解できるような内容にすることで、音声で聞く人にはもちろん、目で見る人にとっても読みやすい表になります。また、表には要約などをつけることができます。大きな分量の表には、内容を簡潔に説明する要約や見出しをつけておけば、読む人にとって理解しやすくなります。
  10. http://www.w3.org/TR/WCAG 作ったページを確にんしましょう。まちがいはだれにでもあります。確にんすることで、まちがいをなくせます。 W3C のホームページには、ホームページを確にんするための道具や○×表などが用意されています。それらを活用しましょう。

このページでは、小学校卒業までに学習する言葉や漢字を使用しています。英文の使用も、組織の名前や著作権の表示など、最低限のものにとどめています。