コンテンツにスキップ

英文维基 | 中文维基 | 日文维基 | 草榴社区

Wikipedia:画像の代替テキスト

（Wikipedia:ALTIMGから転送）

代替テキスト（Alternative text）は、画像に関する文章であり、画像と同じ目的を果たし、画像のように必要な情報を伝えるものです[1]。代替テキストを適切に指定することで、画像を表示しないよう設定したブラウザやスクリーンリーダーを使う視覚障害者がウィキペディアを閲覧するときも、（画像が見えなくとも）情報が損なわれないようにすることができます[1]。代替テキストがないか、役に立たないことは視覚障害のある読者にとって閲覧のストレスとなります[2]。

ウィキペディアにおいて、代替テキストは画像のキャプションと画像を表示するマークアップのalt引数で指定できます。下記の例は右の画像を表示させるものです。

書斎のナポレオンという絵画
書斎のナポレオン（英語版）、ジャック＝ルイ・ダヴィッド作

[[ファイル:Jacques-Louis David - The Emperor Napoleon in His Study at the Tuileries - Google Art Project 2.jpg |thumb|upright=0.75|alt=書斎のナポレオンという絵画|''{{仮リンク|書斎のナポレオン|en|The Emperor Napoleon in His Study at the Tuileries}}''、[[ジャック＝ルイ・ダヴィッド]]作]]

alt引数の文字列（書斎のナポレオンという絵画）は普通は表示されませんが、画像が表示されないブラウザでは画像の代わりにその文字列が表示され、スクリーンリーダーはその文字列を読み上げ、また検索エンジンがその文字列を使って画像の内容を判断することもあります[3]。

画像の解説ページへのリンクが張られている画像（デフォルトでそうなっています）では、alt引数は必ず指定すべきで空白にすべきではありません。なぜなら、スクリーンリーダーはリンクの目的を説明するために代替テキストを読み上げ、それがないときは画像のファイル名を読み上げるからです[4]。これはほとんどの場合、役に立ちません。例えば、上記のナポレオンの例では、スクリーンリーダーが「リンク 画像 Jacques ハイフン Louis アンダースコア David...」などと読み上げてしまいます[5]。

装飾用の画像（情報がなく、審美的な目的でのみ配置される）には代替テキストを必要ではありません。このような画像に対しては、代替テキストがなくともキャプションだけで十分ですが、alt引数に空白を指定すべき場合は画像にリンクが貼られていない場合だけであり、リンクを貼らないことには厳しい要件があります（後述）。そのため、このような場合は短いながらも少しは役に立つ代替テキスト（|alt=写真、|alt=絵画、|alt=彫刻など）を指定してください。なお、キャプションが画像の内容を記述していない場合は代替テキストで手短に述べることもできます。

代替テキストを必要とする方

[編集]

代替テキストを必要とする方は下記があります。

ウィキペディアをスクリーンリーダーで読むには慣れが必要で、経験の積んだユーザーはテキストを一部聞いただけで「この文の続きは聞かなくでもいいので飛ばそう」といった判断ができるようになります。スクリーンリーダーに慣れる代わりに、ページの内容をスクリーンリーダーが読み上げる語句に置換するMozilla FirefoxのFangsアドオンをインストールして体験することもできます。

代替テキストの書き方

[編集]

基本

[編集]

代替テキストは「バスケットボールの選手」や「トニー・ブレアがジョージ・W・ブッシュと握手」のように短く書くべきです。これより長く書かなければならない場合は最も大事な内容をはじめの数語で書くべきです。そうすることで、スクリーンリーダーの利用者はポイントとなる内容がわかった途端、代替テキストの残りを飛ばして次へ移ることができます。とても長い解説は代替テキストではなく、本文で書いてください[1]。なお、MediaWikiではHTMLのlongdesc属性（英語版）が使えません。また、すべての読者は要素が画像であることがわかっているので、「～の画像」のくだりを代替テキストにつける必要はありません。

代替テキストはプレーンテキストで（HTMLやウィキリンクなどのマークアップを使わないでください）、1行で書いてください。内容は中立的な観点、検証可能性、独自研究は載せない、存命人物の伝記などの方針に従わなければならず、また個別参照法が使えないため画像から明らかでないことは記載すべきではありません。スクリーンリーダーは代替テキストの後にキャプションを読み上げるので、両方とも同じ内容を書くのはできるだけ避けてください。

文脈の重要性

[編集]
エリザベス2世が公衆と話している
ファッションに関する記事でなければ、この画像（エリザベス2世の写真）の代替テキストは「黒い帽子をかぶっている年配の女性」とすべきではありません。

画像の文脈は大事です。World Wide Web Consortium（W3C）が発表したWeb Content Accessibility Guidelines（WCAG）2.0では編集者に対し、下記の設問を考慮するよう推奨しています[6]。

  • この非テキストコンテンツはなぜそこにあるのか？
  • どんな情報を提供しているか？
  • その非テキストコンテンツの目的は？
  • その非テキストコンテンツが使えない場合、どんな文字列を用いて同じ情報を伝達するか？

例えば、ナポレオン・ボナパルトの画像は下記の場合に使われます。（もちろん、これ以外の状況もあります）

  • 偉大な将軍に関する記事において、その一例を記している場合。代替テキストにはナポレオンの名前を書くべきです。
  • ナポレオンの記事において、彼の顔を示す場合。代替テキストでは必要があればナポレオンの顔について記述するのも手です。
  • ナポレオンの肖像画の記事（英語版）の場合、代替テキストはその肖像画について書くべきです。

文字を含む画像

[編集]

画像内に読者が理解するのに大事な文字が含まれている場合、代替テキストもその文字を含むべきです[1]。日本語やラテンアルファベットに無い文字は、カタカナ表記するか翻字してください。ユニコードをサポートしていないスクリーンリーダーは、これらの文字を読みあげられないことがあります。

キャプションと近くの文

[編集]
|alt=キャプションを参照

3種類の歯ブラシの比較

（記事キャプションの説明だけで十分の場合）

記事における画像はサムネイルとキャプションで構成されます。キャプションは全ての読者が見られ、HTMLマークアップ、ウィキリンクや脚注を含むこともあります。Infoboxも画像とそのキャプションを含むことが多いです。良いキャプションは手短に画像の内容と記事との関係を説明し、誰が見ても明らかなことは省略します。

キャプションが画像の内容と画像を表示する目的を十分説明できた場合、代替テキストで再び説明する必要はありません。その代わりに|alt=キャプションを参照を指定します。また、画像近くの文が説明している場合は|alt=隣の文を参照を指定します[7]。

地図と図表

[編集]

地図、図表とグラフにおいて、画像に含まれる要素の色、位置、大きさは重要ではありません。その代わり、画像で示しているデータの説明に集中してください。例を挙げると、グラフの代替テキストに「6月、7月、8月の売り上げ」、gifダイアグラムの代替テキストに「動いているロータリーエンジン」を指定することは適切です。化合物の構造式はIUPAC命名法で曖昧性なく表記することができ、薬の{{Drugbox}}や化学物質の{{Chembox}}ではこの構造式の表記法を組み込んでいます。

テンプレートとギャラリー

[編集]
テンプレート
{{Infobox}}や{{Location map+}}など多くのテンプレートは代替テキスト指定にalt引数を使用しています。このような引数がないテンプレートでは引数の追加を提案してください。
ギャラリー
<gallery>タグではMediaWiki 1.18以降、代替テキストが使えます[8]。{{Gallery}}と{{Multiple image}}でも代替テキストを指定できます。
タイムライン
<timeline>タグは代替テキストのない画像を生成します。表組みを使うとき、表の内容の要約をsummary属性に指定することでスクリーンリーダーに読み上げらせることができます。（なお、HTML 5ではsummary属性が非推奨になっています）
数式
<math>タグは数式の生成に使われますが、レンダー結果を画像か文字として出力されるのかは個人設定によります。簡単な数式の場合、altパラメータを使って日本語に翻訳することが推奨されますが、複雑な数式は説明が難しく、altパラメータを指定せずにマークアップを読み上げらせるのが最良の選択かもしれません。

リンクと帰属

[編集]

|alt=と指定することで、MediaWikiのソフトウェアはマークアップをHTMLに変換するとき、imgタグに空白のalt属性を生成します。画像にリンクがついている場合、スクリーンリーダーはalt属性を読み上げようとするが、それが空白の場合はリンク先のファイル名を読み上げます（例えば、「スラッシュ green アンダースコア tick」）。ウィキペディアの記事内に置かれる画像の大半は解像度のより大きい画像とライセンス、帰属に関する情報が含まれる解説ページにリンクしています[注 1]。

ウィキペディアの記事ではファイルの解説ページにリンクしない画像が含まれる場合もあります。このような画像では|link=|alt=と両方に空白を指定して、スクリーンリーダーが画像を無視するよう仕向けるべきです。ただし、解説ページにリンクしないことが許可されるのはパブリックドメインにあるか、CC0でライセンスされている画像に限られます。何らかの帰属が必要な場合、解説ページへのリンクを消してはいけません。

なお、ほかの記事へのリンクが張られている画像に対しては代替テキストにリンク先を指定し、「ソート」のように何らかの機能が含まれる画像に対しては代替テキストにこの機能の名前を指定してください。読者はすでにそれがリンクであることを知っており、またマウスを使っているとは限らないため「～へのリンク」や「ここをクリック」は指定しないでください[9]。

例

[編集]
代替テキストの例
マークアップ 一般的なブラウザ スクリーンリーダー 説明 
[[ファイル:Dannebrog.jpg|thumb|center|upright=0.75|alt=赤い背景に白い十字の旗で、旗の十字の縦棒はやや左寄りになっている。|世界最古で今も使われている[[国旗]]は[[デンマーク]]が13世紀から使われている[[デンマークの国旗|ダンネブロ]]である。]]
赤い背景に白い十字の旗で、旗の十字の縦棒はやや左寄りになっている。
世界最古で今も使われている国旗はデンマークが13世紀から使われているダンネブロである。
 リンク 画像 赤い背景に白い十字の旗で、旗の十字の縦棒はやや左寄りになっている。世界最古で今も使われている リンク 国旗は リンク デンマークが13世紀から使われている リンク ダンネブロである。 「旗」の記事での使用を想定しています。画像の目的はデンマークのダンネブロ旗の形を示すためにあるので、平面の旗の画像でも同じ目的を果たせます。従って旗がはためいていることや旗竿や空（そら）は重要ではありません。 
[[ファイル:Glass-half-full.jpeg|thumb|center|upright=0.75|alt=蛇口から浄水が出ている。|水道水フッ化物添加は[[飲料水]]の見た目、味と匂いに影響しない。]]
蛇口から浄水が出ている。
水道水フッ化物添加は飲料水の見た目、味とにおいに影響しない。
 リンク 画像 蛇口から浄水が出ている。 リンク 水道水フッ化物添加は リンク 飲料水の見た目、味と匂いに影響しない。 水道水フッ化物添加での使用を想定しています。この写真は記事文章を装飾するために使われています。画像がリンクになっているので代替テキストが必要であり、キャプションが画像の内容を説明しないため、代わりに代替テキストが内容を少し説明します。 
[[ファイル:Blair Bush Whitehouse (2004-11-12).jpg|thumb|center|upright=0.75|alt=トニー・ブレアとジョージ・W・ブッシュが記者会見で握手する。|2004年11月12日、ブレアとブッシュが中東の和平戦略について合意した。]]
トニー・ブレアとジョージ・W・ブッシュが記者会見で握手する。
2004年11月12日、ブレアとブッシュが中東の和平戦略について合意した。
 リンク 画像 トニー・ブレアとジョージ・W・ブッシュが記者会見で握手する。2004年11月12日、ブレアとブッシュが中東の和平戦略について合意した。 この写真は2人が記者会見で握手しているシーンですが、2人の身分はこの写真が選ばれた理由の1つなので重要な情報であり、代替テキストは「男性2人が握手する」とすべきではありません。また写真からはわからないので「ホワイトハウスのイーストルーム（英語版）にて」とすべきでもありません。さらに、写真から2人が同じ服を着ていることがわかりますが、記事との関連が薄いのでこれも記載すべきではありません。参考：英米関係#テロとの戦いとイラク戦争
代替テキストの特例
マークアップ 一般的なブラウザ スクリーンリーダー 説明 
[[ファイル:Commons-logo.svg|frameless|upright=0.23|border|center|link=Commons:Special:Search|ウィキメディア・コモンズを検索]]
ウィキメディア・コモンズを検索
ウィキメディア・コモンズを検索
 リンク 画像 ウィキメディア・コモンズを検索 画像はウィキメディア・コモンズのアイコンであり、その目的はコモンズの検索ページへのリンクを提供することにあります。この場合、大事なのは画像の見た目ではなくその機能にあるので、代替テキストを画像マークアップのキャプションとして指定することで代替テキストは同時にリンクのタイトルにもなります。ブラウザの一部ではリンクのタイトルがツールチップとして表示されます。 
<imagemap>
ファイル:Bryan-Sewall.jpg|thumb|upright=0.75|center|alt=1896年の民主党選挙ポスター
circle 950 850 700 [[ウィリアム・ジェニングス・ブライアン]]
circle 2950 850 700 [[アーサー・スウォール]]
default [http://projects.vassar.edu/1896/democrats.html 1896 Democrats Website]
</imagemap>
1896年の民主党選挙ポスターウィリアム・ジェニングス・ブライアンアーサー・スウォール
 画像全体の代替テキストは「1896年の民主党選挙ポスター」です。左のほうの丸の代替テキストは「ウィリアム・ジェニングス・ブライアン」です。右のほうの丸の代替テキストは「アーサー・スウォール」です。丸の代替テキストはリンクのタイトルとしても使われるが、画像全体のリンクタイトルは「1896 Democrats Website」です。 1行目は画像全体の代替テキストを指定します。この場合、画像の内容を説明しています。2行目と3行目は画像の一部を指定し、その部分の代替テキストとリンクを指定しています。2行目と3行目の代替テキストはリンクの目的を指定すべきです[10]。 
[[ファイル:Imbox notice.png|28x28px|alt=|link=]] 赤信号は止まれ
 赤信号は止まれ 赤信号は止まれ アイコンは装飾用のものです。このアイコンはパブリックドメインにあるため、帰属の必要がなく、リンクを貼らなくても大丈夫です。従ってaltとlinkの両方に空白を指定することができ、スクリーンリーダーにこのアイコンを無視させることができます。

脚注

[編集]
[脚注の使い方]
  1. ^ WebAIMによると、"An image that is the only thing inside a link must never have a missing or null alt attribute. This is because the screen reader must read SOMETHING to identify the link."[3] The screen reader emulator Fangs confirms this.

出典

[編集]
  1. ^ a b c d "G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content" (英語). W3C. 11 December 2008. 2010年4月4日閲覧。
  2. ^ Lazar, J; Allen, A; Kleinman, J; Malarkey, C (2007). "What frustrates screen reader users on the web: a study of 100 blind users" (PDF). Int J Hum Comput Interact (英語). 22 (3): 247–269. doi:10.1080/10447310709336964。
  3. ^ a b c d e "Appropriate use of alternative text" (英語). WebAIM. 2010年4月4日閲覧。
  4. ^ W3C. F89: Failure (...) due to using null alt on an image where the image is the only content in a link, Techniques for WCAG 2.0, accessed November 5, 2014
  5. ^ WebAIM says: "An image that is the only thing inside a link must never have a missing or null alt attribute. This is because the screen reader must read SOMETHING to identify the link." See WebAIM. Appropriate Use of Alternative Text, accessed June 3, 2014.
  6. ^ "Understanding Success Criterion 1.1.1; Understanding WCAG 2.0" (英語). W3C. 11 December 2008. 2010年4月4日閲覧。
  7. ^ G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description, WCAG 2.0 technique. WebAim writes: "[T]he alt attribute (sometimes called the alt tag, though technically this is incorrect) is not the only mechanism for providing the content and function of the image. This information can also be provided in text adjacent to the image or within the page containing the image. ... The term alternative text, as used in this article, refers to the text equivalent for an image, regardless of where that text resides. It does not refer solely to the alt attribute of the image tag. See WebAIM. Appropriate Use of Alternative Text, accessed June 8, 2010.
  8. ^ Wikimedia bug 18682
  9. ^ Petrie, Helen; Harrison, Chandra; and Dev, Sundeep. Describing images on the Web: a survey of current practice and prospects for the future, Centre for Human Computer Interaction Design, City University London, accessed June 8, 2010.
  10. ^ W3C. H24: Providing text alternatives for the area elements of image maps, WCAG 2.0 technique.

関連項目

[編集]

外部リンク

[編集]
「https://ja-two.iwiki.icu/w/index.php?title=Wikipedia:画像の代替テキスト&oldid=91250770」から取得