Wikipedia:画像の代替テキスト
[Wikipedia|▼Menu]
□記事を途中から表示しています
[最初から表示]

<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日、ブレアとブッシュが中東の和平戦略について合意した。]]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 Democrats Website」です。1行目は画像全体の代替テキストを指定します。この場合、画像の内容を説明しています。2行目と3行目は画像の一部を指定し、その部分の代替テキストとリンクを指定しています。2行目と3行目の代替テキストはリンクの目的を指定すべきです[10]
[[ファイル:Imbox notice.png|28x28px|alt=|link=]] 赤信号は止まれ 赤信号は止まれ赤信号は止まれアイコンは装飾用のものです。このアイコンはパブリックドメインにあるため、帰属の必要がなく、リンクを貼らなくても大丈夫です。従ってaltとlinkの両方に空白を指定することができ、スクリーンリーダーにこのアイコンを無視させることができます。

脚注[脚注の使い方]^ 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.

出典^ a b c d .mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation.cs-ja1 q,.mw-parser-output .citation.cs-ja2 q{quotes:"「""」""『""』"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free a,.mw-parser-output .citation .cs1-lock-free a{background:url("//upload.wikimedia.org/wikipedia/commons/6/65/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited a,.mw-parser-output .id-lock-registration a,.mw-parser-output .citation .cs1-lock-limited a,.mw-parser-output .citation .cs1-lock-registration a{background:url("//upload.wikimedia.org/wikipedia/commons/d/d6/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription a,.mw-parser-output .citation .cs1-lock-subscription a{background:url("//upload.wikimedia.org/wikipedia/commons/a/aa/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("//upload.wikimedia.org/wikipedia/commons/4/4c/Wikisource-logo.svg")right 0.1em center/12px no-repeat}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:#d33}.mw-parser-output .cs1-visible-error{color:#d33}.mw-parser-output .cs1-maint{display:none;color:#3a3;margin-left:0.3em}.mw-parser-output .cs1-format{font-size:95%}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}"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日閲覧。
^ 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。
^ a b c d e "Appropriate use of alternative text" (英語). WebAIM. 2010年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
^ 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.


次ページ
記事の検索
おまかせリスト
▼オプションを表示
ブックマーク登録
mixiチェック!
Twitterに投稿
オプション/リンク一覧
話題のニュース
列車運行情報
暇つぶしWikipedia

Size:32 KB
出典: フリー百科事典『ウィキペディア(Wikipedia)
担当:undef