誰でも利用できるページ

目次

ブラウザにはInternet Explorerなどの視覚系ブラウザ以外にも、Lynxなどのテキストブラウザ、ホームページリーダーなどの音声ブラウザなどがあります。

このページではさまざまなブラウザでも利用できるページのつくり方を説明します。

文法を守る

HTMLの文法を守る、これが一番重要なことです。HTMLの文法が間違っていると、ブラウザがどのような動作をするか保証できません。

でも、自分の書いたHTMLが正しいかどうか自信がないときがありますよね。ですから、文法チェッカを使って文法チェックをしましょう。有名な文法チェッカを二つ紹介します。

The W3C Markup Validation Serviceは文法上エラーがないかチェックするだけです。Another HTML-lintは文法チェックを行うだけでなく、アクセシビリティ的に問題のある箇所を指摘してくれます。

見出しや段落を示す

ところが実は、文法が正しいだけではだめなんです。じゃあどうすればいいのかというと、HTMLを適切に使うことです。

いくつか例をあげてみます。

文章を書いたら普通は見出しをつけます。みなさんは見出しであることをどうやって示していますか？よく見かけるのはfont要素を使って文字を大きくするやり方です。

<font size="+2">見出しの文字</font>

実はこの方法はあまりよくありません。HTMLには見出しをあらわすh1要素やh2要素があるのでそっちを使いましょう。

<h1>見出しの文字</h1>

次のように段落を変えるときにbr要素を使っている人もいると思います。

はじめに、……してください。<br>
次に、……してください。<br>

この方法も推奨されていません。せっかく段落をあらわすp要素があるんですから、そちらを使いましょう。

<p>はじめに、……してください。</p>
<p>次に、……してください。</p>

要するに、見た目を変える要素は使わず、「段落」「見出し」など文章の役割を表す要素を使うってことです。

使ったほうがいいもの(文章の役割を表すもの)
  • 見出し → h1, h2, h3, h4, h5, h6
  • 段落 → p
  • リスト → ulとli, olとli, dlとdtとdd
  • 表 → table
  • 強調 → em, strong
使わないほうがいいもの(見た目を変えるもの)
  • font
  • br
  • center
  • b
  • i
  • u
  • s
  • strike
  • big
  • small

適切なタイトルをつける

HTML文書はtitle要素で必ずタイトルをつけなければいけません。でも、タイトルをつけるだけではなく、わかりやすいものにする必要があります。

次のようなタイトルはあまりよくありません。

誰の日記なのか、どんな作品なのか、何のリンク集なのかわからないからです。検索結果に「日記」とだけ表示されても、誰も見てくれないでしょう。

次のように、具体的なタイトルにしましょう。

画像にはalt属性

img要素で画像を貼るときは、alt属性で画像の代わりになる文字列を必ず指定しましょう。

テキストブラウザでは画像が表示されないので、代わりにalt属性の文字列が表示されます。もし指定しないとファイル名がそのまま表示されるなどして、文意が通らなくなります。

Internet Explorerなどの画像が表示できるブラウザでも、画像の表示をオフにしていたり画像が読み込めなかったりしたときは、alt属性の文字列が表示されます。

<h1><img src="logo.png" alt="月と音楽のホームページ"></h1>
視覚系ブラウザテキストブラウザ(alt属性あり)テキストブラウザ(alt属性なし)
画像が表示できる画像の代わりにalt属性の文字が表示されるファイル名が表示されたり[IMG]などと表示されたりする
(図)視覚系ブラウザで画像を表示している図 (図)テキストブラウザで代替文字列を表示している図 (図)テキストブラウザで代替文字列が設定されていない画像のファイル名が表示されている図

環境に依存させない

閲覧者はどんなブラウザを使っているかわかりません。また、ブラウザの設定も人それぞれです。ですから、

など、特定の機能に依存したページはつくるべきではありません。

フレーム未対応ブラウザに配慮

フレームは必要がなければ使わないほうがいいです。理由は簡単で、フレームに対応していないブラウザがあるからです。それに次のページで述べますが、フレームを使うと使いやすさがダウンします。

どうしても使いたいならフレーム未対応のブラウザに配慮しましょう。noframes要素を使えば、フレーム未対応のブラウザに表示させる画面を示すことができます。

<noframes>
  <body>
    <h1>なんとかかんとかのホームページ</h1>
    <ul>
    <li><a href="about.html">当サイトについて</a></li>
    <li><a href="works.html">作品ギャラリー</a></li>
    <li><a href="diary.html">日記</a></li>
    </ul>
  </body>
</noframes>

でも、次のようなのはよくありません。

<noframes>
  <body>
    <p>お使いのブラウザはフレームに対応していません。</p>
  </body>
</noframes>

これでは結局、フレーム未対応のブラウザでページを見ることができません。最初の例のように各ページへのリンクなどを用意しましょう。

閲覧環境を指定しない

他人のページを見て回ると、「当サイトはInternet Explorer 5.5以上、文字サイズは中でご覧ください」のような注意書きをしているところがたくさんあります。でも、これって逆ですよね。「当サイトは視覚系ブラウザ・テキストブラウザ・音声ブラウザ・スクリーンリーダなどどんなブラウザでも閲覧できます。」と書けるページをめざしましょう。

まとめ

次は、使いやすいページのつくり方を考えてみます。

Information

現在の位置