現在位置:ホームメルマガ購読メルマガバックナンバー>メルマガバックナンバー2009年3号

メルマガバックナンバー2009年3号

画像に代替テキストを提供【5.4非テキスト情報a)】

【2009.3.24】毎月1回発行
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
障害者や高齢者をはじめ、誰もがアクセス可能なホームページについて
考えるwebアクセシビリティは、検索エンジン(SEO)対策に最も効果的です。
顧客拡大、売上増のための「アクセシビリティとSEOの融合」やホームページ
作成について出来るだけ簡単に解説いたします。
                      http://plus.revonet.co.jp
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 こんばんは、レボネット株式会社の坂井です。
 今日はWBCで日本が見事優勝して、日本全体を元気にしてくれましたね!

 日本中に喜びと希望を与えてくれて、企業までも活気づくことでしょう。

 野球で元気になったところでこのメルマガもはりきって参りましょう。

 このメルマガでは、ウェブアクセシビリティ技術向上のため、
 誰でも支障なくウェブコンテンツを閲覧できるようにするため、
 ウェブ技術向上の指針となるJIS規格を中心にお伝えしております。

 本日は”画像を設置する場合の代替情報の提供”についてお伝えします。

---------------------------------------------------------------------

 ■画像に代替テキストを提供【5.4非テキスト情報a)】

 まず最初に、今回もこの項目について、JIS規格ではどのように
 表現されているか参照しましょう。

 ”画像に、利用者が内容を的確に理解できるようにテキストなどの
  代替情報を提供しなければならない。”

 これはウェブコンテンツにおいて、画像を使って表現する場合に
 必須の取り組みです。

 簡単にお伝えすると、画像で表現しているものを文章でも
 表現して情報を提供しなければならないということです。

 まずは代替情報を提供していない場合の問題点をみていきます。

 □代替情報を提供しない場合の問題点

 音声ブラウザの利用者やテキストブラウザの利用者は画像に、
 代替情報がないと画像の内容を理解できません。

 いくら画像で目立つように情報を提供しても、音声ブラウザ・
 テキストブラウザ利用者は読み取ることができないため、
 有益な情報を得ることができない深刻な情報格差が生まれることとなります。

 そこで、どのように代替情報を提供すべきか示します。

 □画像の代替情報 提供の仕方

 ・img要素のalt属性に記述する

 ・画像の近くにテキストで表示する

 ・画像の近くにテキスト情報がある場合は、
  alt属性は空の方が好ましい

 ※これは代替情報が繰り返しになり、音声ブラウザ利用者の
  方にとっては、二度読み上げられ、閲覧の妨げとなるためです。

  その場合、あえて空にしたことがわかるように表示する。

  例 <img src="image.jpg" width="200" height="50" alt="" />

 以上のように単純に、画像を利用した場合は、画像は何を示しているのか、
 alt属性、またはテキストで表現してくださいということです。

 画像の内容を全ての閲覧者に伝わるように的確に表現してくださいね。

 次回は、【5.4非テキスト情報b)】をお伝えします。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【編集後記 SEO対策との関連について】
---------------------------------------------------------------------

 一昔前であれば、alt属性に目的のキーワードをたくさん入れて、
 キーワード比率を高めるといったこともありましたが、現在では、
 alt属性のキーワードはあまり重要視されず、入れすぎは逆に順位下げることにも
 なりますので、注意が必要です。

 alt属性はあくまでアクセシビリティのためにつけてください。

 SEO対策を考えるのであれば、画像の近くにテキストで説明を加え、
 キーワードで表現することをお勧めします。

 特にヤフー対策として有効な内部キーワード比率を高めることができて
 効果的かと思います。あくまで自然な文章でキーワードを含めた説明をしてください。

 この代替情報の提供はまさに、アクセシビリティ・SEO共に有効な取り組みといえそうですね。
 これは、皆さん、是非取り組んでみてください。

 それでは、また次回お会いしましょう。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
「誰でもわかる!SEO効果の高いアクセシビリティ対策」
───────────────────────────────────
□ 発行元 ..... "アクセシビリティ・ユーザビリティを考慮した
         京都のホームページ制作会社"

         レボネット株式会社 http://plus.revonet.co.jp
         ビジネスパートナー募集 http://www.revonet.co.jp/bp
         スタッフブログ http://blog.livedoor.jp/revonet_sakai

         京都府京都市下京区朱雀正会町24番地
         TEL:075-344-3348 FAX:075-344-3343

□ E-mail ..... sakai@revonet.co.jp

 このメールマガジンの転送は自由です。よろしければ転送してください。
----------------------------------------------------------------------
□ 発行周期 ..... 毎月1回

□ バックナンバー.. http://plus.revonet.co.jp/backnumber.html

■ メルマガ配信登録・アドレス変更・配信停止はこちらからお願いいたします。
  まぐまぐ  .... http://plus.revonet.co.jp/magazine.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Copyright (C) 2009 京都 ホームページ制作 All Rights Reserved.