Smart Communication Design Company
ホーム > ナレッジ > Blog > アクセシビリティBlog > 2007年4月 > 支援技術別動作検証報告: 画像のalt属性とtitle属性

アクセシビリティBlog

Webサイトのアクセシビリティを高めるための方法や国内外の関連情報など、さまざまな角度からWebアクセシビリティに関する話題をご提供していきたいと思います。

当Blogの更新情報は、Twitter経由でも配信しています。興味のある方はぜひ、@mlca11yをフォローしてください。当Blogへのご意見・ご質問は、Twitter経由でも受け付けております。

2007年4月17日

支援技術別動作検証報告: 画像のalt属性とtitle属性

アクセシビリティ・エンジニア 辻

以前、あるWebサイトのアクセシビリティ対応状況が、視覚障害者のコミュニティで話題に上がったことがあります。その発端となったのが、「A銀行のWebサイトが、アクセシビリティ対応したらしい」という情報でした。しかし、私を含めた何人かがそのA銀行のWebサイトにアクセスしたところ、まったく「アクセシビリティ対応」された内容を確認することができませんでした。一方、別のスクリーン・リーダー使用者の方からは、そのA銀行のWebサイトが使いやすくなったとの報告がありました。このように、利用者によってアクセシビリティ対応されたことが確認できたりできなかったりするというのは、不思議な現象だと感じられる方もいらっしゃるかもしれません。そこで今回は、その原因がどこにあったのかを、alt属性とtitle属性の支援技術別の読み方に関する検証結果を基にご紹介します。

テスト環境と使用した支援技術

今回は、ページ内の画像の代替手段としてalt属性とtitle属性の情報が記述されていた場合、音声読み上げ環境ではどちらが優先して読み上げられるかを検証しました。

今回検証用に使用したのは、以下のバージョンの支援技術です。

状況別の検証結果

上記の支援技術を使用して、以下のような条件で検証を行いました。結果として、title属性が設定されている場合、PC-Talker XPではそれを優先して読み上げることがわかりました。

適切な内容のalt属性が設定された画像をどのように読み上げるか
すべてのテスト環境でalt属性の値を読み上げる
適切な内容のalt属性とtitle属性が設定された画像について、どちらの値を優先して読み上げるか
PC-Talker XPでは、title属性の値を読み上げ、JAWS for Windowsとホームページ・リーダーでは、alt属性の値を読み上げる
適切な内容のalt属性が設定された画像リンクをどのように読み上げるか
すべてのテスト環境でalt属性の値を読み上げる
適切な内容のalt属性とtitle属性が設定された画像リンクについて、どちらの値を優先して読み上げるか
PC-Talker XPではtitle属性の値を読み上げ、JAWS for Windowsとホームページ・リーダーではalt属性の値を読み上げる
img要素に適切な内容のalt属性とtitle属性を設定し、さらにa要素にもtitle属性を設定した画像リンクについて、どの値を優先して読み上げるか
PC-Talker XPでは、a要素のtitle属性の値を読み上げ、JAWS for Windowsとホームページ・リーダーではalt属性の値を読み上げる

先に述べましたA銀行のWebサイトのアクセシビリティ対応では、画像に対する代替テキストをtitle属性の値として設定しておりました。このテスト結果からもお分かりいただけるとおり、代替テキストをtitle属性の値として設定してしまうと、あるスクリーン・リーダーの利用者にはアクセシビリティ対応が行われたように聞こえるページが、別のスクリーン・リーダーでは未対応に感じられるような事例が発生することがありえます。本来画像に対する代替テキストを設定する場合は、alt属性の値を用います。特定の閲覧環境のためだけのアクセシビリティ対応とならないよう、適切にコンテンツを作成することが重要です。

ミツエーリンクスでは、WCAG準拠JIS X 8341-3対応をはじめ、さまざまなWebアクセシビリティ関連サービスをご提供しています。是非アクセシビリティのページをご覧いただき、お気軽にお問い合わせください。

Pick Up