維基百科:格式手冊/無障礙
格式手冊 |
---|
灰字連結非正式指引,僅供參考 |
此條目可參照英語維基百科相應條目來擴充。 |
網頁親和力致力於使網頁更易瀏覽與閱讀。雖然這主要旨在幫助身心障礙者,但亦能可以幫助所有讀者。我們旨在遵循WCAG標準2.0(即ISO/IEC 40500:2012),並以此提出以下建議。遵守這些內容會使條目更易於大家閱讀與編輯。
2006年1月14日,維基媒體基金會理事會作出了以下反歧視提議:「維基媒體基金會禁止基於種族、膚色、性別、宗教、民族血統、年齡、殘疾、性取向或任何其他受法律保護的特徵而歧視現有或未來的使用者和雇員。維基媒體基金會承諾遵守機會平等的原則,特別是在雇員關係的所有方面,包括就業、工資管理、雇員發展、晉升和調動」
。維基媒體基金會斷稱,此政策「不得被維基媒體基金會的官員或工作人員或任何維基媒體專案的地方政策規避、侵蝕或忽視」
。
條目結構
條目結構規格化能增加親和力,因為它使使用者能夠從頁面特定部分獲得期望內容。例如一個盲人正在搜尋消歧義連結。如果他沒有從頁面頂部搜尋到任何內容,他就能知道此處什麼也沒有,並不必繼續閱讀整個頁面尋找內容。 期望內容是在頁面的特定部分。
規範是維基百科已經形成的習慣,因而只需簡單的遵循指引Wikipedia:版面指南和Wikipedia:格式手冊/序言章節#導言文字。
章節標題
章節標題應該是描述性的,且順序一致(參見—參考文獻—擴展閱讀—外部連結)。
章節標題應該巢狀遞進,以二級(==
)起頭,接下來是三級(===
)等等(不應當使用一級,它已經由頁面標題自動生成),請勿隨機使用章節標題層級(比如選擇加重,這不是標題的目的),也不要跳級。
請不要使用加粗或分號語法的偽章節標題。螢幕閱讀器等機器只能使用正確格式的章節標題。如果你想縮減目錄長度,請使用{{TOC limit}}。
正確 | 隨機/亂序 | 跳級 | 偽章節標題 |
---|---|---|---|
[這是條目序言] |
[這是條目序言] |
[這是條目序言] |
[這是條目序言] |
浮動元素
在維基代碼中,浮動元素應置於所屬的章節之內。比如,雖然維基語法中圖像置於頁面頂部,但可能被其它浮動元素推到目錄下方顯示。圖像也應插入其所屬的章節之內。
解析度
維基百科條目應便於使用小螢幕裝置,或低解析度顯示器的讀者訪問。我們將1024×768視作對其他使用者無可能不利影響的最低解析度;條目在該解析度下應無不必要的水平捲軸。這個問題有時會在螢幕兩邊同時出現多張圖像時出現;將圖像移至一側,即使這樣垂直捲軸會加長——注意不要同時在螢幕兩側加入圖像等浮動元素。大表格和圖像也會產生問題;有時無法避免水平捲軸的出現,但可設法調整表格,讓它朝垂直而非水平方向發展。
文字
刪除線
在條目頁面及導航模板中,請勿使用刪除線劃去任何文字。如有需要,請使用「<!--」和「-->」注釋處理,或直接移除。默認情況下,大多數螢幕閱讀器不支援呈現文字屬性(粗體、斜體、下劃線)乃至語義文字屬性(強調、重要、文字刪除),因此帶刪除線的文字和正常文字顯示效果相同。然而,在參與維基百科的方針和存廢討論時,我們建議編輯啟用顯示文字屬性,因為帶有刪除線的文字在維基百科內部討論中非常常見。
符號
不支援Unicode的螢幕閱讀器會將非Latin-1和Windows-1252的字元顯示問號,即使對於最普及的螢幕閱讀器JAWS中,Unicode字元依然非常難以閱讀。
- 在名稱、地點、事物等原文相當重要的地方,如果原文使用的既非漢字也不是拉丁書寫系統文字,則請始終給出轉寫,即羅馬化。此功能在表示非羅馬字語言的模板中可用,也可以在諸如{{transl}}}等模板中找到;這些模板還具有可訪問性等其它優點(請參閱下文的「外語」章節)。
- 請勿使用♥(心形符號)等無法發音的符號;請以注有替代文字的圖像代之[1]。
- 對於在螢幕閱讀器上產生問題的符號,可能已經有了生成圖像和替代文字的模板。比如{{†}}。(有關更多資訊,請參見Category:圖像插入模板)
字元序列必須足以傳達文字的語意方面(最好是其他類似形式的內容); 只能使用CSS屬性或Wiki標記式語言區分的自訂「特殊符號」是不可接受的。 請勿使用需要互動來提供資訊的技術,比如工具提示(tooltip)或其他「懸停」文字。縮寫屬於例外,因此可以使用{{abbr}}模板來縮寫很長的術語。
不要在句子中插入換行符,這會讓螢幕閱讀器難以編輯。一個句子後面插入一個單獨的換行符,這可能會對某些編者有所幫助。
謹慎使用縮小字體。避免在資訊框、導航模板和參考章節等已經為小字體元素的地方再次使用縮小字體。無論何時都不應該使用比85%(或11像素)還小的字體。
外語
非中文單詞或短語應以使用ISO 639語言代碼的{{lang}}包圍,比如:{{lang|fr|Assemblée nationale}}
,會顯示為:
Assemblée nationale
或{{lang-fr|Assemblée nationale}}
,會顯示為:
法語:Assemblée nationale
使用理由:{{lang}}
可以使語音合成器以正確的語言發音[2]。在中文維基百科中,對於日語如不使用模板,則日本漢字可能會被視作中文錯誤簡繁轉換。其它見Template:Lang/doc#使用理由的完整理由。
連結
- 建立好的連結描述,外部連結尤甚。(避免「點此!」「見此處」)[3][4]
- 不要用Unicode字元當圖符;以使用替代文字描述的圖符檔案代之。比如「→」等字元可能無法在螢幕閱讀器上重現為有效文字,讀者看到的可能是問號。
顏色
顏色最常見於維基百科條目的模板和表格。欲檢視可用的顏色,請見顏色列表,關於如何使用顏色的技術幫助,請見Help:使用顏色。
條目中的顏色應用須牢記親和力,如下:
- 確保顏色並非唯一傳達重要資訊的方式。特別的,請不要使用上色文字或背景,除非其狀態還用指示另一事物,比如親和性符號對應圖例,或註腳標籤。另外失明使用者或讀者通過列印物或非彩色裝置或獲得維基百科時,將無法獲得此類資訊。
- 對於我們的讀者,連結應該如連結一樣清晰可辨識。
- 維基百科的一些讀者為部分或全色盲。確保文字和背景的對比達到WCAG 2.0的AA等級,如可能則達到AAA等級。可以選擇這些工具檢查對比度是否正確:
- 色彩對比剖析器使您能夠挑選在頁面上的顏色,並充分檢查其對比度。但請務必只使用最新的「亮度」演算法,而非過時的「色彩亮度/差」。
- 你還可以選擇完全更新的斯努克的色彩對比工具。
- 網上還有其它工具,但請在使用前檢查它們是否更新。一些工具以WCAG 1.0演算法為基礎,而我們應該參考現今的WCAG 2.0演算法。如果工具沒有提到其基於WCAG 2.0,則假設它過時。
- {{Color contrast ratio}}
- 此外還有工具可以協助製作圖形圖表,或是地圖等的配色方案。這些工具對於對比度親和力檢查並不嚴格,但其可以在特定任務上有幫助作用。
- 配色方案生成器可以協助在圖表中選擇好的顏色搭配。
- 色彩釀造師2.0提供了地圖的安全配色方案和詳細講解。
- Colorfilter.wickline.org和vischeck.com是用來類比色盲的工具。
- 如果條目過度使用顏色,但你不知道如何親自修復,則可請其他編輯協助。請將{{Overcolored}}放置於條目頂部。
塊元素
列表
不要在列表項間用空行或表格列分斷,即使是定義列表(以分號和冒號打頭形成的列表)和無序列表,這會讓MediaWiki理解為結束再新起列表。這會讓螢幕閱讀器顯示為多個列表,雖然編輯意在只做一個列表。列表是合為一體的一組元素,拆散分組會讓螢幕閱讀器讀者誤解與困惑。不當的格式還會讓閱讀列表消耗三倍以上的時間。
縮排
以英文冒號起頭的行會縮排。比如這種用法會在討論頁的往來討論中表示回覆。該縮排是使用了HTML的定義列表。這在可親和性和語意學上都並不理想,但目前卻廣泛應用。縮排行之間不應插入空行,因為這表示列表的結束並開啟新列表。如果確實需要空行,請插入一個以同樣數量冒號起頭的額外行。
垂直列表
無序垂直列表
對於無序垂直列表,請不要在專案之間用空行隔行。如果列表項之間有超過一次換行,HTML列表將會在換行後結束,並在下一項的換行之前開啟一個新HTML列表。這種有效換行在螢幕閱讀器中會被視為幾個小列表。比如代碼:
* 白玫瑰 * 黄玫瑰 * 粉红玫瑰 * 红玫瑰
因為軟體抑制了行距,所以看起來如:
- 白玫瑰
- 黃玫瑰
- 粉紅玫瑰
- 紅玫瑰
但是螢幕閱讀器讀者看起來是:「2個專案的列表:(圓點)白玫瑰,(圓點)黃玫瑰,列表結束。單專案列表:(圓點)粉紅玫瑰,列表結束。單專案列表:(圓點)紅玫瑰,列表結束。」
請不要以換行符分隔列表專案。請用以下方法代之。
無專案符號垂直列表
對於頁面中縱向列出的無專案符號列表,可使用模板{{plainlist}}和{{unbulleted list}}來提高親和性語意意義,表明這是一個清晰的列表,而非通過不應使用的<br />
換行。代之在導航框一類別模板或合適的容器中,可以使用類「plainlist
」,也就是:
| listclass = plainlist
或| bodyclass = plainlist
在資訊框中則可以使用:
| rowclass = plainlist
or| bodyclass = plainlist
。另見Wikipedia:格式手冊/列表#無專案符號列表。見WP:NAV獲得更多關於導航模板的細節。
水平列表
對於頁面中橫向列出的,以及資訊框等表格中在一行內列出的列表,請使用{{flatlist}}和{{hlist}}模板提升親和力和與語意意義。該特性對各列表項使用了正確的HTML標記,而不包含盲人用輔助軟體會讀出的專案符號字元(比如「點-貓-點-狗-點-馬-點……」)。
包含專案符號字元,比如讀出盲人使用的堵住軟體
代之,在導航框等模板或相似的容器中,列表可以使用類「hlist
」格式,也就是:
| listclass = hlist
或| bodyclass = hlist
資訊框中可使用:
| rowclass = hlist
或| bodyclass = hlist
見WP:NAV獲得更多關於導航模板的細節。
表格
螢幕閱讀器和其它網頁瀏覽器工具通過特定表格標籤幫助使用者導航其中記錄的資料。
使用正確的維基表格管道語法利於所有可用特性。見Help:表格獲得更多關於表格特定語法的資訊。請不要單獨使用格式——從CSS或寫死風格——建立語意意義。(如改變背景顏色)
通過在相鄰儲存格中嵌入成組的HTML<br />
標籤,可以在視覺上建立多行資訊框,不過該技術並不適合HTML表格結構。螢幕閱讀器使用者是以儲存格和HTML行為單位閱讀,而非以視覺上的行閱讀,因此這對它們會產生問題。
資料表格
{| |+ [标题文字] |- ! scope="col" | [列标题1] ! scope="col" | [列标题2] ! scope="col" | [列标题3] |- ! scope="row" | [列标题1] | [常规单元格1,2] || [常规单元格1,3] |- ! scope="row" | [列标题2] | [常规单元格2,2] || [常规单元格2,3] ... |}
- 標題文字(
|+
) - 標題文字是表格的題頭,描述其性質[5]。
- 行、列標題(
!
) - 如同標題文字,它們使資訊以更為邏輯的結構展現給讀者[6]。行列標題有助於螢幕閱讀器顯示資料儲存格的標題資訊。比如,標題資訊會在儲存格資料之前念出,或標題資訊根據要求提供[7]。
- 標題的範圍(
! scope="col" | and ! scope="row" |
) - 這清晰的定義了行標題或列標題。標題儲存格現在可以合併[8]。
Wikipedia:格式手冊/親和力/資料表格指南列出了這些詳細要求:
- 正確的表格標題
- 正確的標題結構
- 圖像和顏色
- 避免巢狀表格
排版表格
請不要使用表格做純排版用途。最佳的選擇是使用更有適應性的HTML的<div>
塊和樣式屬性。比如請見{{Navbox}}
。
可以選擇一些簡單的排版表格。特別是用align="right"
等表格僅為獲得浮動效果之時,這會在一些完全不支援CSS的瀏覽器上良好執行。這實際上是一個<div>
加CSS的繁瑣近似,而非被稱為(巢狀)「表格布局」的設計之最。
然而為避免親和性障礙,當表格用於布局時,請勿使用任何表格、行或列標題,也不要使用summary
屬性。這些結構表格元素僅應在資料表格中使用。請勿將結構元素用於效果呈現,而是使用結構表。對於維基表格標記,這表示這種下方情形不要使用「!
」(相當於XHTML中的 <th>):
{| class="toccolours" style="width:94%" | style="text-align: center; background-color: #ccf;" | '''标题''' |- | [常规单元格] || [常规单元格] |- | [常规单元格] || [常规单元格] |}
範例請見{{Navbox}}
。
圖像
- 即使是空白的圖像,也應該帶有替代文字,替代文字是給盲人讀者、搜尋蜘蛛和其他非視覺使用者的代替品。加入的替代文字應該簡潔,或者應該提到圖像題注或相鄰文字:見WP:ALT取得更多資訊。
- 在多數情況下,無論是使用內建的圖像語法,還是一行附屬文字,圖像都應該帶有題注。題注應該簡潔描述圖像意義,即其試圖傳達的必要資訊。
- 若可能,任何圖表或圖表都應該有替代文字或充分描述,使無法檢視圖像的使用者可以明白一些內容。
- 如有不適合條目的詳細圖像說明,則應將其置於圖像描述頁,並留下文字註明,點開圖像連結可以獲得更詳細描述。
- 圖像應置於其所屬章節內(在章節標題和引導至其他條目的連結之後),不應放在標題裡面或上一章節末尾,否則螢幕閱讀器會在其它章節顯示圖像(和替代文字);行動版站點也同樣如此顯示。見Wikipedia:圖像指南獲得更多資訊。
- 不要使用左圖或右圖的描述。對於維基百科行動版而言,圖像的排列是不同的,而這對於使用輔助軟體的讀者也沒有意義。相反,使用題注來指明圖像。
- 該指引包括<math>模式下LaTeX格式公式的替代文字。
動畫、影片與音訊
動畫
出於親和力考慮,動畫(GIF–圖形交換格式)應該滿足以下兩者之一:
總而言之,大多數動畫GIF應當能轉換為影片。(轉換方法可見指南將動畫GIF轉換為Theora OGG)
影片
影片可以加入計時文字格式的字幕。commons:Commons:Video#Subtitles and closed captioning有相應的幫助頁面。字幕為語音的轉錄。
對於聽力障礙者可以加入隱藏字幕。在2012年11月之前這很難做到,但通過bugzilla:41694的請求,現在可以簡單的加入此特性。隱藏字幕以文字形式提供了關於聲音的全部重要資訊。其可以包含在對話、聲音(自然或人聲)、環境與背景、人與動物的動作表情,以及文字或圖形[11]。關於如何建立隱藏字幕,請參閱:A quick and basic reference for closed captions、a detailed reference (PDF)和a list of best practices for closed captions。
聲音
可以很方便的為演講、歌詞和對話等加入字幕[12]。方法和影片相似:commons:Commons:Video#Subtitles and closed captioning。
樣式及標記選項
最佳慣例:使用維基標記和CSS語法
一般來說,表格與其他區塊元素的格式應該採用CSS類別,而不是內嵌式屬性。全站層級CSS的MediaWiki:Common.css經過最謹慎測試以增進對大多數瀏覽器的親和力(比如充足的顏色對比)和相容性。此外,透過個人樣式表(Special:MyPage/skin.css,或瀏覽器設定)使用者可以自訂配色方案以滿足特定需求。舉例來說,en: Wikipedia:Style sheets for visually impaired users 提供了視障使用者適用的高背景色對比導航模板。不過這會蓋過既定的全站CSS,使得個人選擇自己的主題會變得比較困難。
它還確保了文章之間的一致性且遵守格式指南,從而提高了專業度。
考量到無障礙訪問,只要可以達到目標,與標準不同是可以被容許的。此專案的成員應該確保默認樣式是可以無障礙訪問的。如果某些範本或特定的顏色方案偏離標準,其作者應確保它滿足可訪問性要求,如提供足夠的顏色對比。例如:與辛普森家庭有關的導航模板和訊息框會使用黃色以配合此系列的主色。在這種情況下,藍色連結提供了充足的對比度,因此它是可訪問的。
一般來講,文章應優先於使用Wiki標記來替代HTML元素。尤其是,不要使用物理HTML標籤<i>...</i>
和<b>...</b>
來單純格式粗體、斜體文字,請使用Wiki標記'''
、''
,或是語意HTML(Semantic HTML)。<font>
標籤也應該要盡量避免在文章中使用;使用邏輯模板(例如{{em}}、{{strong}}或{{code}})來強調與其它文字的不同之處。使用及{{small}}及{{big}}模板來改變文字大小,而非以font-size=
方式或是已過時的<small>
來設定樣式。
CSS與JavaScript限制
維基百科條目應該讓使用不完全支援JavaScript與CSS瀏覽器的讀者也能夠容易閱覽。想同時避開不必要的功能又提供相同的外觀質感給不同瀏覽器的使用者是不可能的,因此不應該使用在CSS或JavaScript無法使用時會直接隱藏或是走樣的功能。這包含了像是以結構隱藏方法來摺疊表格內容(但沒有CSS時會以不可折疊的樣式顯示)或是某些摺疊碼(可能會使沒有JavaScript的使用者無法閱讀內容)。請考慮到那些無法使用CSS或JavaScript的使用者,確保他們的閱讀體驗;然而,部分效果質感會變差。
為了因應這些考量,測試任何潛在的破壞性修改都在關閉JavaScript或CSS的情況下進行。在Firefox或Chrome,這可以很容易地透過網頁開發擴展完成;IE瀏覽器可以在「選項」畫面禁用JavaScript。要特別小心:內嵌式CSS效果在某些瀏覽器、媒體、以及XHTML版本並不支援。
參見
參考資料
- ^ F26: Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information. Techniques for WCAG 2.0. W3C. [2011-01-01].
- ^ H58: Using language attributes to identify changes in the human language, Techniques for WCAG 2.0, W3C, accessibility level: AA.
- ^ G91: Providing link text that describes the purpose of a link. Techniques for WCAG 2.0. W3C. [2011-01-01].
- ^ F84: Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text. Techniques for WCAG 2.0. W3C. [2011-01-01].
- ^ H39: Using caption elements to associate data table captions with data tables, A accessibility level.
- ^ H51: Using table markup to present tabular information. W3C. [2011-01-01].
- ^ Table cells: The TH and TD elements. Techniques for WCAG 2.0. W3C. [2011-01-01].
- ^ H63: Using the scope attribute to associate header cells and data cells in data tables. Techniques for WCAG 2.0. W3C. [2011-01-01].
- ^ Setting animated gif images to stop blinking after n cycles (within 5 seconds). Techniques for WCAG 2.0. W3C. [2011-01-01].
- ^ Allowing the content to be paused and restarted from where it was paused. Techniques for WCAG 2.0. W3C. [2011-01-01].
- ^ Providing an alternative for time based media. Techniques for WCAG 2.0. W3C. [2011-01-01].
- ^ Providing an alternative for time-based media for audio-only content. Techniques for WCAG 2.0. W3C. [2011-01-01].
- Clark, Joe. Building Accessible Websites. New Riders Press. 2003 [2011-01-01]. ISBN 0-7357-1150-X.
- Pilgrim, Mark. Dive Into Accessibility: 30 days to a more accessible web site. 2002 [2013-12-26].