Help:图像的替代文字：修订间差异

帮助页面
以互动方式浏览历史
添加的内容 删除的内容
可视化wikitext
小无编辑摘要
无编辑摘要
 

（未显示同一用户的1个中间版本）

第1行： 第1行：
{{NoteTA|G1=IT}}
{{NoteTA|G1=IT}}
{{操作指南|H:ALT}}
{{操作指南|H:ALT}}
{{nutshell|替代文字是為協助視力受損的讀者理解圖片或影像的內容。|它的角色是為概括影像的外觀，而不是它要表達的意思，這方面應該是題注的工作。|所有的影像都應該提供替代文字，除非那是純碎裝飾用的圖標。}}
{{nutshell|替代文字是为协助视力受损的读者理解图片或影像的内容。|它的角色是为概括影像的外观，而不是它要表达的意思，这方面应该是题注的工作。|所有的影像都应该提供替代文字，除非那是纯碎装饰用的图标。}}


替代文字（[[alt屬性]]）是當圖像或影片不被顯示時作為一種替代輸出。所有可視影像都應該輸入替代文字，除非該圖像僅僅是作為一種裝飾，例如縮小成內文字體大小的旗幟圖片。替代文字應該準確地描述影像中最重要的特征、它的焦點所在，而不是無篩選的列出所有細節。替代文字的主要受眾是視力受損人士（先天或後天，[[失明]]或[[弱視]]），他們會使用[[輔具|輔助程序]]例如[[螢幕閱讀器]]將alt屬性的可讀文字全部讀出，讓使用者以聆聽理解影像內容；純文字網頁瀏覽器或一般的瀏覽器也會在用家停止讀取圖像時在原位顯示替代文字。
替代文字（[[Alt屬性|alt属性]]）是当图像或视频不被显示时作为一种替代输出。所有可视影像都应该输入替代文字，除非该图像仅仅是作为一种装饰，例如缩小成内文字体大小的旗帜图片。替代文字应该准确地描述影像中最重要的特征、它的焦点所在，而不是无筛选的列出所有细节。替代文字的主要受众是视力受损人士（先天或后天，[[失明]]或[[弱視|弱视]]），他们会使用[[輔具|辅助程序]]例如[[螢幕閱讀器|屏幕阅读器]]将alt属性的可读文字全部读出，让用户以聆听理解影像内容；纯文字网页浏览器或一般的浏览器也会在用家停止读取图像时在原位显示替代文字。


在維基百科中，影像指令都是作為連結存在所以都應該輸入alt屬性，它在渲染影像（File:）的語法中是一個命名參數<code>alt=</code>，見下例：
在求闻百科中，影像指令都是作为链接存在所以都应该输入alt属性，它在渲染影像（File:）的语法中是一个命名参数<code>alt=</code>，见下例：


{| style="float:right; caption-side:bottom; border: 1px black solid; margin-left: 10px; margin-bottom: 10px; "
{| style="float:right; caption-side:bottom; border: 1px black solid; margin-left: 10px; margin-bottom: 10px; "
第16行： 第16行：
</nowiki></code></blockquote>
</nowiki></code></blockquote>


以[[國旗]]的首段為例，螢幕閱讀器可能會讀出：「連結 一面紅色底 白色十字旗幟在空中飄揚 十字的直條較為靠向左邊的旗桿 連結 丹麥的國旗是現今依然被官式使用中 最古老的國旗設計」。如果句法中缺乏了「alt=一面紅色底……」這個輸入，螢幕閱讀器就可能會將之讀成「file冒號Dannebrog點JAY PEE GEE」來權充alt屬性，讓看不到圖片的讀者無法了解旗幟的設計。
以[[国旗]]的首段为例，屏幕阅读器可能会读出：“链接 一面红色底 白色十字旗帜在空中飘扬 十字的直条较为靠向左边的旗杆 链接 丹麦的国旗是现今依然被官式使用中 最古老的国旗设计”。如果句法中缺乏了“alt=一面红色底……”这个输入，屏幕阅读器就可能会将之读成“file冒号Dannebrog点JAY PEE GEE”来权充alt属性，让看不到图片的读者无法了解旗帜的设计。


替代文字不是[[Wikipedia:题注|檔案題注]]（caption，即是上例中「丹麥的國旗是……」的參數輸入），替代文字是輸出給'''看不到'''影像的讀者用，題注則是給'''所有'''的讀者閱讀的。所以寫作替代文字時應該側重於描述影像中物體的外觀，題注就用作解說影像想傳達的意思和它與條目主題的關聯。一個讓編者自己思考怎樣寫出最有用的替代文字就是：想像自己在看不到影像的狀態下會希望獲得影像中包含著怎樣的表面視覺資訊。
替代文字不是文件[[Qiuwen:题注|题注]]（caption，即是上例中“丹麦的国旗是……”的参数输入），替代文字是输出给看不到影像的读者用，题注则是给所有的读者阅读的。所以写作替代文字时应该侧重于描述影像中物体的外观，题注就用作解说影像想传达的意思和它与条目主题的关系。一个让编者自己思考怎样写出最有用的替代文字就是：想像自己在看不到影像的状态下会希望获得影像中包含着怎样的表面视觉信息。


== 目標 ==
== 目标 ==
雖然說替代文字是影像的替代品，但也只是個不完整的替代，或者說極其量的描述文字。所以寫作替代文字的根本意義是：有總好過什麼都沒有，但前提是它提供的訊息是有用的。由於不顯示圖片的瀏覽器一般都會先顯示alt屬性，後題注，所以編寫維基代碼（純渲染檔案代碼或設計顯示影像的模板）時建議也跟隨這個順序。以下是取自[[托勒密二世]]的首段圖像：
虽然说替代文字是影像的替代品，但也只是个不完整的替代，或者说极其量的描述文字。所以写作替代文字的根本意义是：有总好过什么都没有，但前提是它提供的消息是有用的。由于不显示图片的浏览器一般都会先显示alt属性，后题注，所以编写源代码（纯渲染文件代码或设计显示影像的模板）时建议也跟随这个顺序。以下是取自[[托勒密二世]]的首段图像：


[[File:Oktadrachmon Ptolemaios II Arsinoe II.jpg |thumb |alt=一枚圓形金幣上刻著一對男女的上半身的右側。男的在金幣的前方，頭戴象征王位的布帶和身穿布衣。金幣的上方刻著希臘文ΑΔΕΛΦΩΝ。|托勒密王朝公元前3世紀的金幣上刻畫著的一對統治者：托勒密二世（前方）和其姊兼王后[[阿爾西諾伊二世|阿西诺亚二世]]。刻文「ΑΔΕΛΦΩΝ」（adelphon）在希臘語的意思是「兄弟姊妹」（属格）。]]
[[File:Oktadrachmon Ptolemaios II Arsinoe II.jpg |thumb |alt=一枚圓形金幣上刻著一對男女的上半身的右側。男的在金幣的前方，頭戴象征王位的布帶和身穿布衣。金幣的上方刻著希臘文ΑΔΕΛΦΩΝ。|托勒密王朝公元前3世紀的金幣上刻畫著的一對統治者：托勒密二世（前方）和其姊兼王后[[阿爾西諾伊二世|阿西诺亚二世]]。刻文「ΑΔΕΛΦΩΝ」（adelphon）在希臘語的意思是「兄弟姊妹」（属格）。]]
⚫
<blockquote><code><nowiki>[[File:Oktadrachmon Ptolemaios II Arsinoe II.jpg |thumb |alt=一枚圓形金幣上刻著一對男女的上半身的右側。男的在金幣的前方，頭戴象征王位的布帶和身穿布衣。金幣的上方刻著希臘文ΑΔΕΛΦΩΝ。|托勒密王朝公元前3世紀的金幣上刻畫著的一對統治者：托勒密二世（前方）和其姊兼王后[[阿爾西諾伊二世|阿西诺亚二世]]。刻文「ΑΔΕΛΦΩΝ」（adelphon）在希臘語的意思是「兄弟姊妹」（属格）。]]</nowiki>
<blockquote><code><nowiki>
⚫
</code></blockquote>
⚫
[[File:Oktadrachmon Ptolemaios II Arsinoe II.jpg |thumb |alt=一枚圓形金幣上刻著一對男女的上半身的右側。男的在金幣的前方，頭戴象征王位的布帶和身穿布衣。金幣的上方刻著希臘文ΑΔΕΛΦΩΝ。|托勒密王朝公元前3世紀的金幣上刻畫著的一對統治者：托勒密二世（前方）和其姊兼王后[[阿爾西諾伊二世|阿西诺亚二世]]。刻文「ΑΔΕΛΦΩΝ」（adelphon）在希臘語的意思是「兄弟姊妹」（属格）。]]
⚫
</nowiki></code></blockquote>


替代文字主要對以下的狀況起作用：
替代文字主要对以下的状况起作用：
* 利用[[螢幕閱讀器]]如{{link-en|JAWS (螢幕閱讀器)|JAWS (screen reader)|JAWS}}或{{link-en|Orca (輔助科技)|Orca (assistive technology)|Orca}}，主要為視力受損的讀者
⚫
* 利用純文字瀏覽器如[[Lynx]]（因為光顧低速或按流量收費的[[ISP]]瀏覽網頁）
⚫
* 因為網絡遲緩而未能成功下載到影像
⚫
* 閱讀網絡搜尋器的搜查結果
⚫
* 復制整份網頁內容到文字處理程序


* 利用[[螢幕閱讀器|屏幕阅读器]]如JAWS或Orca，主要为视力受损的读者
⚫
對於視力受損的讀者而言，缺乏或參差的影像替代文字是他們在互聯網上遇上的最大障礙<ref>{{cite journal |author=Lazar J, Allen A, Kleinman J, Malarkey C |year=2007 |title=What frustrates screen reader users on the web: a study of 100 blind users（網上哪些問題困擾螢幕閱讀器用戶：對100個失明用戶的調查）|journal=Int J Hum Comput Interact |volume=22 |issue=3 |pages=247–69 |doi=10.1080/10447310709336964 }}</ref>，2008年對維基百科的視障輔助調查就列出缺少影像替代文字是眾多缺憾的首位。<ref>{{cite conference |author=Buzzi M, Leporini B |year=2008 |title=Is Wikipedia usable for the blind?（維基百科對失明人士來說好用嗎？）|booktitle=Proc 2008 W4A |location=Beijing |pages=15–22 |doi=10.1145/1368044.1368049 }}</ref>正如視力正常（或可矯正）的讀者一樣，視力受損的讀者都有不同的需求，因此編者應該相應地提供這些對他們有用的文字。而在這些讀者中出生時已經失去視力的其實占了很小的比例，大部分人都是因為其他後期因素，視力隨著年齡而衰退例如得了[[老年性黃斑點退化症]]，因此很大部分視力受損讀者都能理解常用的外觀和顏色描述用詞。撰寫容易理解的替代文字還可以優化網絡搜尋器的圖片搜索結果，替代文字配合題注亦可以減少編輯條目時（特別是大條目）來回檢查預覽圖片內容的麻煩。
⚫
* 利用纯文字浏览器如[[Lynx]]（因为光顾低速或按流量收费的[[ISP]]浏览网页）
⚫
* 因为网络迟缓而未能成功下载到影像
⚫
* 阅读网络搜索器的搜查结果
⚫
* 复制整份网页内容到文字处理软件


⚫
对于视力受损的读者而言，缺乏或参差的影像替代文字是他们在互联网上遇上的最大障碍<ref>{{cite journal |author=Lazar J, Allen A, Kleinman J, Malarkey C |year=2007 |title=What frustrates screen reader users on the web: a study of 100 blind users|journal=Int J Hum Comput Interact |volume=22 |issue=3 |pages=247–69 |doi=10.1080/10447310709336964 }}</ref>，2008年对维基百科的视障辅助调查就将“缺少影像替代文字是”列为众多缺憾的首位<ref>{{cite conference |author=Buzzi M, Leporini B |year=2008 |title=Is Wikipedia usable for the blind?|booktitle=Proc 2008 W4A |location=Beijing |pages=15–22 |doi=10.1145/1368044.1368049 }}</ref>。正如视力正常（或可矫正）的读者一样，视力受损的读者都有不同的需求，因此编者应该相应地提供这些对他们有用的文字。而在这些读者中出生时已经失去视力的其实占了很小的比例，大部分人都是因为其他后期因素，视力随着年龄而衰退例如得了[[老年性黃斑點退化症|老年性黄斑点退化症]]，因此很大部分视力受损读者都能理解常用的外观和颜色描述用词。撰写容易理解的替代文字还可以优化网络搜索器的图片搜索结果，替代文字配合题注亦可以减少编辑条目时（特别是大条目）来回检查预览图片内容的麻烦。
⚫
既然是寫作文字就小不免需要運用到編者本身的判斷力，本頁以下的章節將會教導怎樣去作這個判斷，一切都是為了宣揚營造[[無障礙環境]]和[[網頁親和力]]的良好習慣，為無障礙工程提供協助和指引，它適用於全部的圖像，包括編排在列表、模板或畫廊中的一切圖片和影片。雖然聲音檔理應都要附上替代文字，但它不是本指引的重點。

⚫
既然是写作文字就小不免需要运用到编者本身的判断力，本页以下的章节将会教导怎样去作这个判断，一切都是为了宣扬营造[[無障礙環境|无障碍环境]]和[[網頁親和力|网页亲和力]]的良好习惯，为无障碍工程提供协助和指引，它适用于全部的图像，包括编排在列表、模板或画廊中的一切图片和视频。虽然声音档理应都要附上替代文字，但它不是本指引的重点。


== 圖片精髓 ==
== 圖片精髓 ==
{| class="wikitable"
{| class="wikitable"
|+ 捕捉圖片精髓
|+ 捕捉图片精髓
|width=auto rowspan=3| [[File:3 Savile Row.jpg|thumb|200px|alt=一棟聯排屋，地下那層外墻是石頭，中間的三層是紅磚，第四層頂樓是閣樓。每層都有四個窗戶，窗框都是白色的，除了地下那層有一扇大門代替了原本左邊第二窗戶的位置。|蘋果唱片公司位於倫敦Savile街3號的原址，屋頂就是''Let It Be''的演出場所]]
|width=auto rowspan=3| [[File:3 Savile Row.jpg|thumb|200px|alt=一棟聯排屋，地下那層外墻是石頭，中間的三層是紅磚，第四層頂樓是閣樓。每層都有四個窗戶，窗框都是白色的，除了地下那層有一扇大門代替了原本左邊第二窗戶的位置。|苹果唱片公司位于伦敦Savile街3号的原址，屋顶就是''Let It Be''的演出场所]]
!colspan=2|'''披頭四'''的[[披头士乐队#1969|1969年]]一節
!colspan=2|披头士的[[披头士乐队#1969|1969年]]一节
|-
|-
|width=120px| '''參差的替代文字''' || 一根小天線豎立於兩棟建筑物的交接位。太陽照耀在天線的那邊，街道上一個人都沒有，除了在客貨車中的一個陰暗的人影，那架客貨車就泊在建筑物的前面。
|width=120px| 参差的替代文字 || 一根小天线竖立于两栋建筑物的交接位。太阳照耀在天线的那边，街道上一个人都没有，除了在客货车中的一个阴暗的人影，那架客货车就泊在建筑物的前面。
|-
|-
|'''較好的替代文字''' || 一棟聯排屋，地下那層外墻是石頭，中間的三層是紅磚，第四層頂樓是閣樓。每層都有四個窗戶，窗框都是白色的，除了地下那層有一扇大門代替了原本左邊第二窗戶的位置。
|较好的替代文字 || 一栋联排屋，地下那层外墙是石头，中间的三层是红砖，第四层顶楼是阁楼。每层都有四个窗户，窗框都是白色的，除了地下那层有一扇大门代替了原本左边第二窗户的位置。
|-
|-
|rowspan=3| [[File:Milia big.png|thumb|200px|alt=成年人的眼皮上起了一些極為細小的白色痘疤。|[[汗疹]]]]
|rowspan=3| [[File:Milia big.png|thumb|200px|alt=成年人的眼皮上起了一些極為細小的白色痘疤。|[[汗疹]]]]
!colspan=2|[[皮膚病列表]]中的一種
!colspan=2|[[皮膚病列表|皮肤病列表]]中的一种
|-
|-
| '''參差的替代文字''' || 汗疹的一種例子
| 参差的替代文字 || 汗疹的一种例子
|-
|-
| '''較好的替代文字''' || 成年人的眼皮上起了一些極為細小的白色痘疤。
| 较好的替代文字 || 成年人的眼皮上起了一些极为细小的白色痘疤。
|}
|}


=== 人物肖像 ===
=== 人物肖像 ===
{| class="wikitable"
{| class="wikitable"
|+ 描述人物的外觀
|+ 描述人物的外观
|width=auto rowspan=3| [[File:Sun Yat-sen 2.jpg|thumb|200px|alt=一位表情認真的中年男人的頭到肩膀，長著薄薄的黑色短髮，上唇上流著白色的鬍子，身穿藍色的方領外衣。|孫中山肖像]]
|width=auto rowspan=3| [[File:Sun Yat-sen 2.jpg|thumb|200px|alt=一位表情認真的中年男人的頭到肩膀，長著薄薄的黑色短髮，上唇上流著白色的鬍子，身穿藍色的方領外衣。|孙中山肖像]]
!colspan=2|[[孫中山]]條目開端信息框中的肖像
!colspan=2|孙中山条目开端信息框中的肖像
|-
⚫
|width=120px| '''參差的替代文字''' || 一張彩色肖像畫，背景色是灰色到黃色，畫中人物的頭部微微面向右面。
|-
⚫
|'''較好的替代文字''' || 一位表情認真的中年男人的頭到肩膀，長著薄薄的黑色短髮，上唇上留著白色的鬍子，身穿藍色的方領外衣。<!--
|-
|rowspan=3| [[File:Milia big.png|thumb|200px|alt=|]]
!colspan=2|
|-
|-
⚫
|width=120px| 参差的替代文字 || 一张彩色肖像画，背景色是灰色到黄色，画中人物的头部微微面向右面。
| '''參差的替代文字''' ||
|-
|-
⚫
|较好的替代文字 || 一位表情认真的中年男人的头到肩膀，长著薄薄的黑色短发，上唇上留着白色的胡子，身穿蓝色的方领外衣。
| '''較好的替代文字''' || -->
|}
|}


第78行： 第71行：
{{reflist}}
{{reflist}}


== 參考資料 ==
== 参考资料 ==
* {{cite web |url=http://www.w3.org/TR/WCAG20/ |title=Web Content Accessibility Guidelines (WCAG) 2.0 （互聯網內容的視障輔助指引2.0）|date=2008-12-11 |accessdate=2009-07-06 |publisher=W3C Web Accessibility Initiative |author=Caldwell B, Cooper M, Guarino Reid L ''et al.'' (eds.) |ref=CITEREFWAI2008a}}
* {{cite web |url=http://www.w3.org/TR/WCAG21/ |title=Web Content Accessibility Guidelines (WCAG) 2.1 |accessdate= |publisher=W3C Web Accessibility Initiative |ref=CITEREFWAI2008a}}
* {{cite web |url=http://www.w3.org/TR/WCAG20-TECHS/ |title= Techniques for WCAG 2.0 |date=2008-12-11 |accessdate=2009-07-06 |publisher=W3C Web Accessibility Initiative |author=Caldwell B, Cooper M, Guarino Reid L ''et al.'' (eds.) |ref=CITEREFWAI2008b }}


{{-}}
== 輔助工具 ==
{{帮助页面}}
* [http://toolserver.org/~dispenser/cgi-bin/altviewer.py Alternative.py]，用以debug條目中的alt與link屬性參數
取自“https://www.qiuwenbaike.cn/wiki/Help:图像的替代文字”