img タグの属性と音声ブラウザ
img タグの属性と音声ブラウザ
ウェブアクセシビリティ入門 第４４号
発行日 ：200５年１０月１７日
- 画像にも
- ふたつの用途 ありにけり
- 見せる画像 | クリック画像
■どんな方にも優しいウェブサイトを目指して■
このメルマガでは、具体例を交えながら障害者や高齢者にも優しいウェブサイト作りのヒントをお届けしています。
本日のメインテーマ：img タグの属性と音声ブラウザ
ホームページ上に画像を設置すると、 img というＨＴＭＬタグがその画像の配置を表現します。
という具合ですね。
上記の src という属性は画像の存在場所を示しているので当然必須ですが、音声出力に関係する属性はオプションなので、使わなければ使わないで済んでしまいます。
音声出力に関連する属性は
alt
title
longdesc
と３種類あります。
唯一、実質的に使える alt 属性
しかし、上記の中で圧倒的に重要なのは alt 属性です。
基本的に、 alt 属性の内容は全ての音声環境で読み上げられます。
ですので、ホームページ制作者側の方は、実質的には、 alt 属性をどのように使うかということに思いを集注させていただければ良いのです。
使わない方が良い title 属性
img にも title という属性をつけることができます。
しかし、この読み上げに対応している音声環境は非常に少なく、ボイスサーフィンだけだといってよいでしょう。
ボイスサーフィンは、 alt 属性と title 属性の両方を読み上げます。
ただし、同じ内容を２度読みするとうるさいので、 alt と title の中身が同じ場合には、１度しか読まないようにしています。
実際には、 alt 属性と title 属性の使い分け方がウェブデザイナーさんたちの間でも統一されているわけではないので、音声ブラウザ側でも、どのように対応すべきかというのが難しい課題となっています。
これから発表される WCAG2.0 のドラフト段階でも img タグの title 属性は非推奨になっているので、今のところは、少なくとも音声のことを考えて使う必要は全くありません。
いずれ利用価値の出てくる longdesc 属性
longdesc 属性は、画像の説明を別ページとして作成した上で、そのページへのパスを記述する属性です。
説明文が１ページになるので、詳しく説明することができることからlongdesc
(long description)と呼ばれます。
これは、 WCAGでは既に推奨されていますが、実際の音声ブラウザでは、ホームページリーダーとJAWS を用いたときの環境のみが対応しており、まだ対応が一般化しているとは言い切れません。
ただし、これはやはり音声ブラウザ側が対応すべき項目です。
ボイスサーフィンも、対応しなくてはいけませんね。
このlongdesc 属性については、次号でもう少し深く考察します。
画像の２つの役割
前号で、
リンクのついた画像の alt 属性には、画像の説明ではなくリンク先の内容が判る説明を入れてください。
という私の説明に対して、それを行うと検索エンジンの時の画像検索で、意味の合わない画像がたくさん出てきてしまうという意義が唱えられたという話をしました。
これに対して、読者の方から、とても判り易い説明を頂きましたので、ご本人の許可を得て、ここに掲載致します。
画像検索（イメージ検索）は画像に隣接したテキストや画像キャプションなどを分析して、コンテンツを判断する高度なアルゴリズムが使用されたロボット検索エンジンです。（グーグルFAQより）
グーグルやインフォシークなどの検索エンジンで提供されているサービスです。
画像検索を意識してキーワードを取り入れることは多くの人にサイト（画像）を見てもらうことができるので大変良いことだと思います。
しかし、alt属性だけでなくその他のテキストも解析しているのです。
例えば、画像に alt=" " とalt属性がブランクである画像でも検索には引っかかります。
隣接しているテキストに反応しているのです。
（中略）
ここで、画像にはいくつか種類があると思うのです。
画像（写真やイラスト）、サムネイル（画像を小さくして一覧用にしたもの）、ボタン画像など。
画像検索は画像とサムネイルを検索しやすくするためのものだと思います。
主に画像でしょう。その画像に意味があるのです。
今回取り上げているハイパーリンク画像はサムネイルやボタン画像だと思います。
リンク先を見てほしく、それをアピールする（クリックしてもらいたい）ために画像を使っただけです。
両者は画像を使う意味が異なると思います。
しかし、画像検索から見れば皆同じなので、写真だろうが小さなボタン画像だろうが、検索条件に当てはまったものは表示します。
画像検索に引っかかってしまうときは引っかかるので、画像検索を気にして、リンクを目的としたハイパーリンク画像に説明する必要のないボタン画像の絵柄の内容を書く必要はないと思います。
検索エンジンの特別な機能を気にするより、リンク先の説明の方が重要だと思います。
大変望月の頭が整理されました。
ありがとうございました。
■ウェブアクセシビリティは、どんな方にも読み易いサイト作りの心配りです
ウェブアクセシビリティのコンサルティングや講演を承ります。
アメディア発行のメルマガ紹介
アメディア及び望月優は、本誌のほかに、以下のメルマガを発行しています。
週刊福祉情報（まぐまぐ殿堂）
毎週木曜日に、障害当事者の心のこもったコラムや１週間の福祉ニュースのソースを届けしています。
関連ブログ＆サイト
視覚障害者の情報文化を紹介する「アメディアレポート」
毎月第２と第４火曜日に、視覚障害者のライフスタイルや視覚障害者に便利な最新技術情報などを紹介しています。
アメディアの社員が輪番で編集を担当していますので、編集人の個性が出て、毎号雰囲気が違うのも一つの楽しみです。
望月優の経営指針雑記帳～２１世紀を創造する企業を目指して！
企業家としての望月優が、自身の経営指針を掘り下げる過程で感じ取った生きがいのある人生や自立、成長、平和などへの思いを語ります。
発行理念
本誌は、ウェブサイト作りに取り組む皆様とその構築に責任を持つ方々が皆障害者や高齢者の存在に配慮したサイト作りに励んで頂くことを願って発行しています。
ウェブアクセシビリティの分野はまだ注目され始めたばかり、その具体的なノウハウの定番はまだほとんどないと言っても過言ではありません。
インターネット技術は常に進歩、変化しつつあります。その点からみると、いくら追求しても「定番」の確立はありえないのかも知れません。
本誌では、全盲の望月優が現在までに紹介されているノウハウと自らの考察による新しいノウハウを、全身全霊を込めて説明・紹介して行きます。
ウェブアクセシビリティに関して秘密にするノウハウは一切ありません。全てのサイトがアクセシブルになって欲しいからです。
私の誤解や知識不足から、誤った説明や不適切な提案をしてしまうことがあるかも知れません。それに気がついたときには速やかに訂正致します。
ですから、読者の皆様からの指摘や提案が非常に大きな手助けとなります。
このメルマガを通して、ゆるやかな「ウェブアクセシビリティ大連合」が形成されていくことを念じて、発行を続けて参ります。
セミナー、講演の依頼は下記ページよりご遠慮なく
本誌では、
「JIS X 8341-3 高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－ 第3 部：ウェブコンテンツ」
をしばしば引用させて頂いております。
必要な方は、下記サイトからお求めください。
WebStore
メルマガ「ウェブアクセシビリティ入門」配信登録
「ウェブアクセシビリティ入門」に登録
ウェブアクセシビリティ教材
- Ｅブック-SEOの土台を築くウェブアクセシビリティ
- 第１回ウェブアクセシビリティセミナー～音声ブラウザ対応エッセンス
- 第２回ウェブアクセシビリティセミナー～SEOの基盤を構築するアクセシビリティ
- 第３回ウェブアクセシビリティセミナー～バリアフリーサイト作りの基本と実践
ウェブアクセシビリティ関連リンク集
- ウェブアクセシビリティ入門サイト
- メルマガ「ウェブアクセシビリティ入門」
- 株式会社アメディア・ウェブアクセシビリティガイド
- web content accessibility guidelines (WCAG) 雑記帳
奥付
〒169-0051
電話番号 ：03-5286-7511
FAX番号 ：03-5286-2567
アメディアのウェブアクセシビリティ・ガイドライン （参考にしてくださいね）
コメントはありません