Wikipedia:圖像的替代文字：修订间差异
删除的内容 添加的内容
小 →圖片精髓 |
无编辑摘要 |
||
| （未显示8个用户的14个中间版本） | |||
| 第1行： | 第1行： | ||
| ⚫ | |||
{{style-guideline-en|WP:alt}} |
|||
| ⚫ | |||
替 |
替代文字（[[alt屬性]]）是當圖像或影片不被顯示時作為一種替代輸出。所有可視影像都應該輸入替代文字，除非該圖像僅僅是作為一種裝飾，例如縮小成內文字體大小的旗幟圖片。替代文字應該準確地描述影像中最重要的特征、它的焦點所在，而不是無篩選的列出所有細節。替代文字的主要受眾是視力受損人士（先天或後天，[[失明]]或[[弱視]]），他們會使用[[輔具|輔助程序]]例如[[螢幕閱讀器]]將alt屬性的可讀文字全部讀出，讓使用者以聆聽理解影像內容；純文字網頁瀏覽器或一般的瀏覽器也會在用家停止讀取圖像時在原位顯示替代文字。 |
||
在維基百科中，影像指令都是作為 |
在維基百科中，影像指令都是作為連結存在所以都應該輸入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; " |
||
|+ style=" font-size: 78%; line-height: 1.3em; background-color:#ccf" | 如果你 |
|+ style=" font-size: 78%; line-height: 1.3em; background-color:#ccf" | 如果你使用普通的圖像瀏覽器而想閱讀圖像的替代文字，指示你的瀏覽器顯示圖像的屬性。 |
||
|- |
|- |
||
| [[File:Dannebrog.jpg |thumb |alt=一面紅色底、白色十字旗幟在空中飄揚，十字的直條較為靠向左邊的旗桿。|[[丹麥]]的[[丹麦国旗|國旗]]是現今依然被官式使用中、最古老的[[國旗]]設計。]] |
| [[File:Dannebrog.jpg |thumb |alt=一面紅色底、白色十字旗幟在空中飄揚，十字的直條較為靠向左邊的旗桿。|[[丹麥]]的[[丹麦国旗|國旗]]是現今依然被官式使用中、最古老的[[國旗]]設計。]] |
||
| 第15行： | 第14行： | ||
</nowiki></code></blockquote> |
</nowiki></code></blockquote> |
||
以[[國旗]]的首段為例，螢幕閱讀器可能會讀出：「 |
以[[國旗]]的首段為例，螢幕閱讀器可能會讀出：「連結 一面紅色底 白色十字旗幟在空中飄揚 十字的直條較為靠向左邊的旗桿 連結 丹麥的國旗是現今依然被官式使用中 最古老的國旗設計」。如果句法中缺乏了「alt=一面紅色底……」這個輸入，螢幕閱讀器就可能會將之讀成「file冒號Dannebrog點JAY PEE GEE」來權充alt屬性，讓看不到圖片的讀者無法了解旗幟的設計。 |
||
替 |
替代文字不是[[Wikipedia:题注|檔案題注]]（caption，即是上例中「丹麥的國旗是……」的參數輸入），替代文字是輸出給'''看不到'''影像的讀者用，題注則是給'''所有'''的讀者閱讀的。所以寫作替代文字時應該側重於描述影像中物體的外觀，題注就用作解說影像想傳達的意思和它與條目主題的關聯。一個讓編者自己思考怎樣寫出最有用的替代文字就是：想像自己在看不到影像的狀態下會希望獲得影像中包含著怎樣的表面視覺資訊。 |
||
== 目標 == |
== 目標 == |
||
雖然說替 |
雖然說替代文字是影像的替代品，但也只是個不完整的替代，或者說極其量的描述文字。所以寫作替代文字的根本意義是：有總好過什麼都沒有，但前提是它提供的訊息是有用的。由於不顯示圖片的瀏覽器一般都會先顯示alt屬性，後題注，所以編寫維基代碼（純渲染檔案代碼或設計顯示影像的模板）時建議也跟隨這個順序。以下是取自[[托勒密二世]]的首段圖像： |
||
[[File:Oktadrachmon Ptolemaios II Arsinoe II.jpg |thumb |alt=一枚圓形金幣上刻著一對男女的上半身的右側。男的在金幣的前方，頭戴象征王位的布帶和身穿布衣。金幣的上方刻著希臘文ΑΔΕΛΦΩΝ。|托勒密王朝公元前3世紀的金幣上刻畫著的一對統治者：托勒密二世（前方）和其姊兼王后[[阿爾西諾伊二世|阿西诺亚二世]]。刻文「ΑΔΕΛΦΩΝ」（adelphon）在希臘語的意思是「兄弟姊妹」（属格）。]] |
[[File:Oktadrachmon Ptolemaios II Arsinoe II.jpg |thumb |alt=一枚圓形金幣上刻著一對男女的上半身的右側。男的在金幣的前方，頭戴象征王位的布帶和身穿布衣。金幣的上方刻著希臘文ΑΔΕΛΦΩΝ。|托勒密王朝公元前3世紀的金幣上刻畫著的一對統治者：托勒密二世（前方）和其姊兼王后[[阿爾西諾伊二世|阿西诺亚二世]]。刻文「ΑΔΕΛΦΩΝ」（adelphon）在希臘語的意思是「兄弟姊妹」（属格）。]] |
||
| 第27行： | 第26行： | ||
</nowiki></code></blockquote> |
</nowiki></code></blockquote> |
||
替 |
替代文字主要對以下的狀況起作用： |
||
* 利用[[螢幕閱讀器]]如{{link-en|JAWS (螢幕閱讀器)|JAWS (screen reader)|JAWS}}或{{link-en|Orca (輔助科技)|Orca (assistive technology)|Orca}}，主要為視力受損的讀者 |
* 利用[[螢幕閱讀器]]如{{link-en|JAWS (螢幕閱讀器)|JAWS (screen reader)|JAWS}}或{{link-en|Orca (輔助科技)|Orca (assistive technology)|Orca}}，主要為視力受損的讀者 |
||
* 利用純文字瀏覽器如[[Lynx]]（因為光顧低速或按流量收費的[[ISP]]瀏覽網頁） |
* 利用純文字瀏覽器如[[Lynx]]（因為光顧低速或按流量收費的[[ISP]]瀏覽網頁） |
||
| 第34行： | 第33行： | ||
* 復制整份網頁內容到文字處理程序 |
* 復制整份網頁內容到文字處理程序 |
||
對於視力受損的讀者而言，缺乏或參差的影像替 |
對於視力受損的讀者而言，缺乏或參差的影像替代文字是他們在互聯網上遇上的最大障礙<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>正如視力正常（或可矯正）的讀者一樣，視力受損的讀者都有不同的需求，因此編者應該相應地提供這些對他們有用的文字。而在這些讀者中出生時已經失去視力的其實占了很小的比例，大部分人都是因為其他後期因素，視力隨著年齡而衰退例如得了[[老年性黃斑點退化症]]，因此很大部分視力受損讀者都能理解常用的外觀和顏色描述用詞。撰寫容易理解的替代文字還可以優化網絡搜尋器的圖片搜索結果，替代文字配合題注亦可以減少編輯條目時（特別是大條目）來回檢查預覽圖片內容的麻煩。 |
||
既然是寫作文字就小不免需要運用到編者本身的判斷力，本頁以下的章節將會教導怎樣去作這個判斷，一切都是為了宣揚營造[[無障礙環境]]的良好習慣，為無障礙工程提供協助和指引，它適用於全部的圖像，包括編排在列表、模板或畫廊中的一切圖片和 |
既然是寫作文字就小不免需要運用到編者本身的判斷力，本頁以下的章節將會教導怎樣去作這個判斷，一切都是為了宣揚營造[[無障礙環境]]和[[網頁親和力]]的良好習慣，為無障礙工程提供協助和指引，它適用於全部的圖像，包括編排在列表、模板或畫廊中的一切圖片和影片。雖然聲音檔理應都要附上替代文字，但它不是本指引的重點。 |
||
== 圖片精髓 == |
== 圖片精髓 == |
||
| 第44行： | 第43行： | ||
!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" |
|||
|+ 描述人物的外觀 |
|||
|width=auto rowspan=3| [[File:Sun Yat-sen 2.jpg|thumb|200px|alt=一位表情認真的中年男人的頭到肩膀，長著薄薄的黑色短髮，上唇上流著白色的鬍子，身穿藍色的方領外衣。|孫中山肖像]] |
|||
!colspan=2|[[孫中山]]條目開端信息框中的肖像 |
|||
|- |
|||
|width=120px| '''參差的替代文字''' || 一張彩色肖像畫，背景色是灰色到黃色，畫中人物的頭部微微面向右面。 |
|||
|- |
|||
|'''較好的替代文字''' || 一位表情認真的中年男人的頭到肩膀，長著薄薄的黑色短髮，上唇上留著白色的鬍子，身穿藍色的方領外衣。<!-- |
|||
|- |
|||
|rowspan=3| [[File:Milia big.png|thumb|200px|alt=|]] |
|||
!colspan=2| |
|||
|- |
|||
| '''參差的替代文字''' || |
|||
|- |
|||
| '''較好的替代文字''' || --> |
|||
|} |
|} |
||
| 第65行： | 第82行： | ||
== 輔助工具 == |
== 輔助工具 == |
||
* [http://toolserver.org/~dispenser/cgi-bin/altviewer.py Alternative.py]，用以debug條目中的alt與link屬性參數 |
* [http://toolserver.org/~dispenser/cgi-bin/altviewer.py Alternative.py]，用以debug條目中的alt與link屬性參數 |
||
[[en:Wikipedia:Alternative text for images]] |
|||
[[it:Aiuto:Testo alternativo per le immagini]] |
|||
2021年5月21日 (五) 18:54的最新版本
 | 本頁簡而言之：
|
替代文字（alt屬性）是當圖像或影片不被顯示時作為一種替代輸出。所有可視影像都應該輸入替代文字，除非該圖像僅僅是作為一種裝飾，例如縮小成內文字體大小的旗幟圖片。替代文字應該準確地描述影像中最重要的特征、它的焦點所在，而不是無篩選的列出所有細節。替代文字的主要受眾是視力受損人士（先天或後天，失明或弱視），他們會使用輔助程序例如螢幕閱讀器將alt屬性的可讀文字全部讀出，讓使用者以聆聽理解影像內容；純文字網頁瀏覽器或一般的瀏覽器也會在用家停止讀取圖像時在原位顯示替代文字。
在維基百科中，影像指令都是作為連結存在所以都應該輸入alt屬性，它在渲染影像（File:）的語法中是一個命名參數alt=，見下例：
 |
[[File:Dannebrog.jpg |thumb |alt=一面紅色底、白色十字旗幟在空中飄揚，十字的直條較為靠向左邊的旗桿。|[[丹麥]]的[[丹麦国旗|國旗]]是現今依然被官式使用中、最古老的[[國旗]]設計。]]
以國旗的首段為例，螢幕閱讀器可能會讀出：「連結 一面紅色底 白色十字旗幟在空中飄揚 十字的直條較為靠向左邊的旗桿 連結 丹麥的國旗是現今依然被官式使用中 最古老的國旗設計」。如果句法中缺乏了「alt=一面紅色底……」這個輸入，螢幕閱讀器就可能會將之讀成「file冒號Dannebrog點JAY PEE GEE」來權充alt屬性，讓看不到圖片的讀者無法了解旗幟的設計。
替代文字不是檔案題注（caption，即是上例中「丹麥的國旗是……」的參數輸入），替代文字是輸出給看不到影像的讀者用，題注則是給所有的讀者閱讀的。所以寫作替代文字時應該側重於描述影像中物體的外觀，題注就用作解說影像想傳達的意思和它與條目主題的關聯。一個讓編者自己思考怎樣寫出最有用的替代文字就是：想像自己在看不到影像的狀態下會希望獲得影像中包含著怎樣的表面視覺資訊。
目標
[编辑]雖然說替代文字是影像的替代品，但也只是個不完整的替代，或者說極其量的描述文字。所以寫作替代文字的根本意義是：有總好過什麼都沒有，但前提是它提供的訊息是有用的。由於不顯示圖片的瀏覽器一般都會先顯示alt屬性，後題注，所以編寫維基代碼（純渲染檔案代碼或設計顯示影像的模板）時建議也跟隨這個順序。以下是取自托勒密二世的首段圖像：
[[File:Oktadrachmon Ptolemaios II Arsinoe II.jpg |thumb |alt=一枚圓形金幣上刻著一對男女的上半身的右側。男的在金幣的前方，頭戴象征王位的布帶和身穿布衣。金幣的上方刻著希臘文ΑΔΕΛΦΩΝ。|托勒密王朝公元前3世紀的金幣上刻畫著的一對統治者：托勒密二世（前方）和其姊兼王后[[阿爾西諾伊二世|阿西诺亚二世]]。刻文「ΑΔΕΛΦΩΝ」（adelphon）在希臘語的意思是「兄弟姊妹」（属格）。]]
替代文字主要對以下的狀況起作用：
- 利用螢幕閱讀器如JAWS或Orca，主要為視力受損的讀者
- 利用純文字瀏覽器如Lynx（因為光顧低速或按流量收費的ISP瀏覽網頁）
- 因為網絡遲緩而未能成功下載到影像
- 閱讀網絡搜尋器的搜查結果
- 復制整份網頁內容到文字處理程序
對於視力受損的讀者而言，缺乏或參差的影像替代文字是他們在互聯網上遇上的最大障礙[1]，2008年對維基百科的視障輔助調查就列出缺少影像替代文字是眾多缺憾的首位。[2]正如視力正常（或可矯正）的讀者一樣，視力受損的讀者都有不同的需求，因此編者應該相應地提供這些對他們有用的文字。而在這些讀者中出生時已經失去視力的其實占了很小的比例，大部分人都是因為其他後期因素，視力隨著年齡而衰退例如得了老年性黃斑點退化症，因此很大部分視力受損讀者都能理解常用的外觀和顏色描述用詞。撰寫容易理解的替代文字還可以優化網絡搜尋器的圖片搜索結果，替代文字配合題注亦可以減少編輯條目時（特別是大條目）來回檢查預覽圖片內容的麻煩。
既然是寫作文字就小不免需要運用到編者本身的判斷力，本頁以下的章節將會教導怎樣去作這個判斷，一切都是為了宣揚營造無障礙環境和網頁親和力的良好習慣，為無障礙工程提供協助和指引，它適用於全部的圖像，包括編排在列表、模板或畫廊中的一切圖片和影片。雖然聲音檔理應都要附上替代文字，但它不是本指引的重點。
圖片精髓
[编辑] |
披頭四的1969年一節 | |
|---|---|---|
| 參差的替代文字 | 一根小天線豎立於兩棟建筑物的交接位。太陽照耀在天線的那邊，街道上一個人都沒有，除了在客貨車中的一個陰暗的人影，那架客貨車就泊在建筑物的前面。 | |
| 較好的替代文字 | 一棟聯排屋，地下那層外墻是石頭，中間的三層是紅磚，第四層頂樓是閣樓。每層都有四個窗戶，窗框都是白色的，除了地下那層有一扇大門代替了原本左邊第二窗戶的位置。 | |
 |
皮膚病列表中的一種 | |
| 參差的替代文字 | 汗疹的一種例子 | |
| 較好的替代文字 | 成年人的眼皮上起了一些極為細小的白色痘疤。 | |
人物肖像
[编辑] |
孫中山條目開端信息框中的肖像 | |
|---|---|---|
| 參差的替代文字 | 一張彩色肖像畫，背景色是灰色到黃色，畫中人物的頭部微微面向右面。 | |
| 較好的替代文字 | 一位表情認真的中年男人的頭到肩膀，長著薄薄的黑色短髮，上唇上留著白色的鬍子，身穿藍色的方領外衣。 | |
腳注
[编辑]- ^ Lazar J, Allen A, Kleinman J, Malarkey C. What frustrates screen reader users on the web: a study of 100 blind users（網上哪些問題困擾螢幕閱讀器用戶：對100個失明用戶的調查）. Int J Hum Comput Interact. 2007, 22 (3): 247–69. doi:10.1080/10447310709336964.
- ^ Buzzi M, Leporini B. Is Wikipedia usable for the blind?（維基百科對失明人士來說好用嗎？）. Proc 2008 W4A. Beijing: 15–22. 2008. doi:10.1145/1368044.1368049.
參考資料
[编辑]- Caldwell B, Cooper M, Guarino Reid L et al. (eds.). Web Content Accessibility Guidelines (WCAG) 2.0 （互聯網內容的視障輔助指引2.0）. W3C Web Accessibility Initiative. 2008-12-11 [2009-07-06].
- Caldwell B, Cooper M, Guarino Reid L et al. (eds.). Techniques for WCAG 2.0. W3C Web Accessibility Initiative. 2008-12-11 [2009-07-06].
輔助工具
[编辑]- Alternative.py，用以debug條目中的alt與link屬性參數