よいHTML のまとめ - gotagota日記

- よいHTML -- よいHTML、わるいHTML：ウェブユーザビリティについてについてのまとめです。

◆HTMLの要素タイプを正しく使う

・HTMLの「要素」とは、文書の中でその部分がどんな役割を果たすのかを示すものなので、適切に設定する必要がある。

→検索ロボットや音声ソフトが適切に働かない原因になる。

□適切なタイトル

・書物で言えば背表紙のようなもの。

→閲覧履歴やブックマークに表示される際でも、一見して内容がわかるようなタイトルでなければならない。

◆閲覧手段に関わらず、きちんと情報が伝わるように書く

・一般的なブラウザのみを想定して記述すると、文字ブラウザや音声ソフトなどの手段で通じなくなってしまうという困ったHTMLになってしまう。特に画像。

□画像にはaltテキストを加える

・img要素には、かならずalt属性で代替テキストを用意しなければならない。これは、そこで「どんな画像が提供されているか」を示すのではなく、その部分を読み上げたり文字ブラウザで見たときに意味が通じるように書くことが大切。

□リンクのアンカーを意味のある文にする

・よくある悪い例

→もっと詳しい情報はこちら

⇒「こちら」はハイパーリンクが働く環境でのみ意味があることがわかる。リンクのアンカーとなるテキストは、そのまま読んでも意味が通るように工夫しなければならない。

・適切な例

→詳しい情報はリンクのアンカーを意味のある文にするの項を参照

□アクセシビリティの高いページづくり

・障碍のある方や高齢の方にもきちんと情報が伝わるような書き方を、アクセシビリティが高いという。

◆適切なナビゲーション機能を提供する

・本や雑誌と違い、 Webページは二次元の画面に情報を表示しているため、全体と部分の関係を直感的につかみにくい。これを補うために、Webデザインでは「ナビゲーション」の提供が大切になる。現在のページは全体の中のどこに位置するのか、スタート地点に戻るにはどうすればよいのか、次はどこに向かうのかといった情報を一貫した手段で提供する必要がある。

⇒利用者が迷子にならないようにデザインを意識する。

◆文書や作者に関する情報を示す

・Webの文書は、どんな順序で読まれるか、どこから突然リンクを張られるか、予測がつかないので、基本的にはすべての文書に何らかの形で作者を辿れる情報を加えておくことが大切。

⇒原則としては、全ファイルにaddress要素として連絡先やメールアドレスを加えておくのが望ましい。あるいは、トップページにメールアドレスなどの連絡方法を書き込んだ上で、トップページへのリンクを加えておくのもいい。

◆自分の情報を提供し、知らないことはリンクする

・インターネットは分業の世界という認識。自分の詳しいこと、興味のあることについてそれぞれが情報を提供する。そして自分よりもっと詳しい情報源や関連するサイトがあれば、そこへのリンクを用意する。こうすれば、更に深く広い知識を提供することができるので、リンクはとても重要。