[スポンサードリンク]
トップページ » WEBJIS ノウハウ » ウェブアクセシビリティ入門　第１０号
« ウェブアクセシビリティ入門　第９号  |  ウェブアクセシビリティ入門　第１１号 »
2006年10月23日

ウェブアクセシビリティ入門　第１０号

■どんな方にも判り易いウェブサイトを目指して■

ウェブアクセシビリティ入門　第１０号

画像とその説明のまとめ

　このメルマガでは、具体例を交えながら障害者や高齢者にも読みやすいウェブサイト作りのヒントを毎週お届け致します。

株式会社アメディア

目次

  • 説明がダブらないための配慮
  • alt属性に空白を指定することの意味
  • 音声ブラウザの振舞い
  • 「ボイスサーフィン」での対応
  • 画像認証の現状
  • 編集後記


説明がダブらないための配慮


ＷＥＢｊｉｓでは、
「5.4 非テキスト情報」のa)で次のように記載しています。



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


例1：HTML では，画像にalt 属性をつける。


例2：画像の内容を表す情報を画像の近くにテキストで表示する。


例3：画像のそばに同等のテキスト情報があるとき，画像の代替テキストは，空が好ましい場合もある。


上記の例３は、もともと画像の説明内容が画像のすぐそばにあるときには、alt 属性でさらに説明を付加すると、同じ内容を２回読み上げることになるので、 alt 属性には空白を指定した方が良いというアドバイスです。

alt属性に空白を指定することの意味

さらにＷＥＢＪＩＳでは、その続きで次のように解説しています。

参考：HTML の場合では，あえて空にしたことが分かるように，次のように明示的に空を指定する。

<img src="(ソース名) " alt="">

これは、画像に説明を付けない場合でも、 alt 属性自体を用いないのではなく、 alt にスペースを指定することをお勧めしています。

実は、 alt 属性が全くないと、スクリーンリーダーや音声ブラウザの種類によって振舞いが異なり、サイト作成者側が想定していないような音声化がなされてしまうことがあるからです。

よって、サイト作成者側は、「説明はしないでね」ということを、音声ブラウザに対して明示的に指示してあげる方法が上記のやり方なのです。

ただ、以下に示すように

alt=""

というように全く文字を入れない場合と、

alt=" "

と半角スペースなどの音声化ソフトがしゃべらない文字を入れるのとでは、利用者の環境によっては動作が異なります。

「説明しないでね」という意味で指定するときは、

alt=" "

などと、スペースなどのしゃべらない文字を指定してください。

音声ブラウザの振舞い

さて、画像に対して alt 属性を全く指定しない場合と、 alt に半角のスペースを入れた場合で、音声環境ごとにどのような振舞いの違いが起こるのか、実験して見ました。

以下、「ＶＳ」はボイスサーフィン Version3.04、「ＨＰＲ」はホームページ・リーダーVersion3.01、

「ＰＣＴ」はＰＣ－ＴａｌｋｅｒとＩＥとの組み合わせ、「９５Ｒ」は９５ＲｅａｄｅｒとＩＥとの組み合わせ、「ＪＡＷＳ」はＪＡＷＳとＩＥとの組み合わせです。

１．　alt で説明文字列を指定した場合（リンクありとリンクなしで共通）

ＶＳＨＰＲＰＣＴ９５ＲＪＡＷＳ altを読むaltを読むaltを読むaltを読むaltを読む

２．　alt = "" と何も文字を入れなかった場合（リンクあり・なしとで共通）

ＶＳＨＰＲＰＣＴ９５ＲＪＡＷＳ 画像と読む読まない読まない読まない読まない

３．　alt に " " と半角スペースを入れた場合（リンクあり・なしとで共通）

ＶＳＨＰＲＰＣＴ９５ＲＪＡＷＳ 読まない読まない読まない読まない読まない

４．　alt 自体をなしとした場合（リンクなし）

ＶＳＨＰＲＰＣＴ９５ＲＪＡＷＳ 画像と読む読まない読まない読まない読まない

５．　alt 自体をなしとした場合（リンクあり）

ＶＳＨＰＲＰＣＴ９５ＲＪＡＷＳ 画像と読むURLを読むURLを読む読まないURLを読む

なお、５．のケースにおいて、ＪＡＷＳの場合、URLを読むと言っても、拡張子を除いた母体の部分のみを読みました。

そのほかのＨＰＲやＰＣ－Ｔａｌｋｅｒでは、拡張子の「html」まで読み上げます。

上記の結果からも判るように、

alt=""

またはスペースを入れて

alt=" "

とした場合、リンクが貼られていてもスキップされてしまいますので、リンク付きの画像には必ず alt での説明を入れてください。

なお、リンクがついているかいないかに関しては、それぞれのソフトウェアによって、音質の変化や「リンク」という追加の音声情報で区別できるようになっています。

「ボイスサーフィン」での対応

アメディアで開発している音声ブラウザ「ボイスサーフィン」では、つい先日発表した Version3.05 で、画像やリンク画像の読み方について、一工夫しました。

ボイスサーフィンには、もともと設定で「画像の存在を通知する／しない」という項目があって、そこにチェックを入れてあるかどうかで、画像の表現を変えていました。

上記の実験結果は、 Version3.04 での「画像の存在を通知する」状態での動作です。

さて、2005年2月22日に発表したばかりの Version3.05 では、利用者の意思を少しでも繁栄できるようにと思い、次のようにしています。

１．　「画像の存在を通知しない」場合

リンクがついていてもいなくても、alt の中身を読み上げます。

よって、音声で読み上げない文字を入れれば、読み上げません。

alt がない、またはalt に文字がなにもセットされていない場合には、リンクがついていれば女性音で「画像」と読み上げ、リンクがついていない場合には何も読み上げません。

２．　「画像の存在を通知する」場合

リンクがついていてもいなくても、alt の中身を読み上げます。

よって、音声で読み上げない文字を入れれば、読み上げません。

alt がない、またはalt に文字がなにもセットされていない場合には、

リンクがついているときはそのリンク先ＵＲＬを読み上げます。

リンクがない場合には、その画像ファイル名を読み上げます。

画像認証の現状

画像認証は、人が画面を見てアクセスしているのだということをシステム側が確認するための仕組みで、文字を画像で表示して、それを読み取ってキーボードから入力すると次に進むことができるというものです。

視覚障害者の場合、画面が見えないのですから、この画像認証の関所を突破することはできません。

そこで、２号前の第８号から、読者の皆様より以下の情報と提案を募集して参りました。

  1. 画像認証が用いられているサイトとその場面
  2. 画像認証に対する代替策が採られているサイトとその場面
  3. あなたが考える画像認証の代替策

その結果、６名の皆様からお便りを頂きまして、以下のようなことがわかりました。

１．　画像認証は、無料のメールアドレスを取得する場合によく用いられている。

  • yahooジャパン
  • hotmail.com
  • gooID新規登録
  • MSNのネットパスポート取得

など。

２．　代替策として、音声認証が用いられている。

音声認証というのは、聞き取りにくい音声が出て、それを聞き取ってキーボードから入力するというものです。

ただ、皆様からの報告ですと、実際、本当に聞き取りにくいようで、１０回ぐらいトライしてやっと通ったとか、結局諦めて、見える人に画面を見てもらって登録したという報告を頂いています。

このような実態で、音声認証という方法が本当に妥当な代替策なのかどうかということに関しては、今は何とも言えません。

この件については、今後も継続して読者の皆様とともに頭をひねって行きたいと思います。

編集後記

先日、東京中小企業家同友会の豊島支部の例会で、鹿児島の「さつま揚げ」屋さんとして任期のある（株）秋栄の秋元社長のお話を伺いました。

社員皆が「あなたが変れば会社も変る」を合言葉に個々人の成長→会社の発展を目指しているそうです。

アメディアは今「社員皆が成長する会社作り」を目指して日々働いておりますので、共感すること非常に大きく、たくさんの学びを得る会になりました。

アメディア発行のメルマガ紹介

アメディアでは、本誌のほかに、以下の２つのメルマガを発行しています。

週刊福祉情報（まぐまぐ殿堂）

毎週木曜日に、１週間の福祉ニュースのソースを障害当事者や関係者のコメント付きでお届けしています。

福祉関連トピックのプログを募集しています。

まぐまぐ登録ページ

視覚障害者の情報文化を紹介する「アメディアレポート」

毎月第２と第４火曜日に、視覚障害者のライフスタイルや視覚障害者に便利な最新技術情報などを紹介しています。

アメディアの社員が輪番で編集を担当していますので、編集人の個性が出て、毎号雰囲気が違うのも一つの楽しみです。

まぐまぐバックナンバー

発行日 ：2005年2月28日

発行人 ： 望月優（モチヅキ　ユウ）

発行元 ： 株式会社アメディア

〒169-0051

東京都新宿区西早稲田2-15-10西早稲田関口ビル3F

電話番号 ：03-5286-7511

FAX番号 ：03-5286-2567

アメディアのウェブアクセシビリティ・ガイド （参考にしてくださいね）

音声ブラウザ「ボイスサーフィン」のページ （お試しで利用してくださいね）

ボイスサーフィンブログ （アップデートな話題で満載）

本誌定期配信

「ウェブアクセシビリティ入門」に登録

メールアドレス：

ウェブアクセシビリティ教材

ウェブアクセシビリティ関連リンク集


by amedia  at 17:44