跳至內容

維基百科:格式手冊/無障礙

本頁使用了標題或全文手工轉換
維基百科,自由的百科全書

這是本頁的一個歷史版本,由Suaveness留言 | 貢獻2017年7月10日 (一) 08:43 最佳慣例:使用維基標記和CSS語法:​ 修正筆誤 // Edit via Wikiplus)編輯。這可能和目前版本存在著巨大的差異。

網頁親和力致力於使網頁更易瀏覽與閱讀。雖然這主要旨在幫助身心障礙者,但亦能可以幫助所有讀者。我們旨在遵循WCAG標準2.0(即ISO/IEC 40500:2012),並以此提出以下建議。遵守這些內容會使條目更易於大家閱讀與編輯。

條目結構

條目結構規格化能增加親和力,因為它使使用者能夠從頁面特定部分獲得期望內容。例如一個盲人正在搜尋消歧義連結。如果他沒有從頁面頂部搜尋到任何內容,他就能知道此處什麼也沒有,並不必繼續閱讀整個頁面尋找內容。 期望內容是在頁面的特定部分。

規範是維基百科已經形成的習慣,因而只需簡單的遵循指引Wikipedia:版面指南Wikipedia:格式手冊/序言章節#導言文字

章節標題

章節標題應該是描述性的,且順序一致(參見—參考文獻—擴展閱讀—外部連結)。

章節標題應該巢狀遞進,以二級(==)起頭,接下來是三級(===)等等(不應當使用一級,它已經由頁面標題自動生成),請勿隨機使用章節標題層級(比如選擇加重,這不是標題的目的),也不要跳級。

請不要使用加粗或分號語法的偽章節標題。螢幕閱讀器等機器只能使用正確格式的章節標題。如果你想縮減目錄長度,請使用{{TOC limit}}。

章節標題使用(與誤用)範例
正確 隨機/亂序 跳級 偽章節標題

[這是條目序言]
==章節== [二級標題]
===子章節=== [三級]
==章節== [二級]
===子章節=== [三級]
====子章節的子章節==== [四級]
==章節== [二級]

[這是條目序言]
====章節?==== [四級]
===章節?=== [三級]
==章節?== [二級]
==章節?== [二級]
====章節?==== [四級]
===章節?=== [二級]

[這是條目序言]
[此處缺失二級標題]
===章節?=== [三級]
==章節== [二級]
[此處缺失三級標題]
====子章节?==== [四級]
==章節== [二級]

[這是條目序言]
==章節== [二級]
===子章節=== [三級]
'''子章節''' [偽章節標題]
==章節== [2]
===子章節=== [3]
;子子章節 [偽章節標題]
==章節== [二級]
==<small>子章節</small>== [偽三級標題]

浮動元素

在維基代碼中,浮動元素應置於所屬的章節之內。比如,雖然維基語法中圖像置於頁面頂部,但可能被其它浮動元素推到目錄下方顯示。圖像也應插入其所屬的章節之內

解析度

維基百科條目應便於使用小螢幕裝置,或低解析度顯示器的讀者訪問。我們將1024×768視作對其他使用者無可能不利影響的最低解析度;條目在該解析度下應無不必要的水平捲軸。這個問題有時會在螢幕兩邊同時出現多張圖像時出現;將圖像移至一側,即使這樣垂直捲軸會加長——注意不要同時在螢幕兩側加入圖像等浮動元素。大表格和圖像也會產生問題;有時無法避免水平捲軸的出現,但可設法調整表格,讓它朝垂直而非水平方向發展。

文字

在條目頁面中,請勿使用刪除線劃去有異議的文字。要麼用「<!--」和「-->」注釋掉,要麼直接移除。默認情況下,大多數螢幕閱讀器不支援呈現文字屬性(粗體、斜體、下劃線)乃至語義文字屬性(強調、重要、文字刪除),因此帶刪除線的文字和正常文字顯示效果相同。(而在參與維基百科方針和刪除討論時,我們建議編輯啟用顯示文字格式,而刪除線文字在維基百科內部討論中非常常見。)

不支援Unicode的螢幕閱讀器會將非Latin-1字元顯示為問號,即使對於最普及螢幕閱讀器JAWS的最新版本,Unicode字元依然非常難以閱讀。

  1. 在名稱、地點、事物等原文相當重要的地方,如果原文使用的既非漢字也不是拉丁書寫系統文字,則請始終給出轉寫,即羅馬化
  2. 請勿使用♥(心形符號)等無法發音的符號;請以注有替代文字的圖像代之[1]
  3. 對於在螢幕閱讀器上產生問題的符號,可能已經有了生成圖像和替代文字的模板。比如{{}}。

請勿使用需要互動來提供資訊的技術,比如工具提示(tooltip)或其他「懸停」文字。縮寫屬於例外,因此可以使用{{abbr}}模板來縮寫很長的術語。

不要在句子中插入換行符,這會讓螢幕閱讀器難以編輯。A single line break may follow a sentence, which may help some editors.

謹慎使用縮小字體。避免在資訊框、導航模板和參考章節等已經為小字體元素的地方再次使用小字體。無論何時都不應該使用比85%(或11像素)還小的字體。

外語

非中文單詞或短語應以使用ISO 639語言代碼的{{lang}}包圍,比如:{{lang|ja|Assemblée nationale}}

使用理由{{lang}}可以使語音合成器以正確的語言發音[2]。在中文維基百科中,對於日語如不使用模板,則日本漢字可能會被視作中文錯誤簡繁轉換。其它見Template:Lang/doc#使用理由的完整理由。

連結

  1. 建立好的連結描述,外部連結尤甚。(避免「點此!」「見此處」)[3][4]
  2. 不要用Unicode字元當圖符;以使用替代文字描述的圖符檔案代之。比如「→」等字元可能無法在螢幕閱讀器上重現為有效文字,讀者看到的可能是問號。

顏色

兩個文字使用者介面的同高度截圖。上方的使用了紅色、綠色和藍色;下方的則使用了對紅色和綠色幾乎相同的顏色,借個紅色文字幾乎淹沒在綠色的背景中。
一對截圖顯示紅/綠色盲對易讀性的影響

顏色最常見於維基百科條目的模板表格。欲檢視可用的顏色,請見顏色列表,關於如何使用顏色的技術幫助,請見Help:使用顏色

條目中的顏色應用須牢記親和力,如下:

  • 確保顏色並非唯一傳達重要資訊的方式。特別的,請不要使用上色文字,除非其狀態還用指示另一事物,比如親和性符號對應圖例,或註腳標籤。另外失明使用者或讀者通過列印物或非彩色裝置或獲得維基百科時,將無法獲得此類資訊。
  • 對於我們的讀者,連結應該如連結一樣清晰可辨識。
  • 維基百科的一些讀者為部分或全色盲。確保文字和背景的對比達到WCAG 2.0的AA等級,如可能則達到AAA等級。可以選擇這些工具檢查對比度是否正確:
    • 色彩對比剖析器使您能夠挑選在頁面上的顏色,並充分檢查其對比度。但請務必只使用最新的「亮度」演算法,而非過時的「色彩亮度/差」。
    • 你還可以選擇完全更新的斯努克的色彩對比工具
    • 網上還有其它工具,但請在使用前檢查它們是否更新。一些工具以WCAG 1.0演算法為基礎,而我們應該參考現今的WCAG 2.0演算法。如果工具沒有提到其基於WCAG 2.0,則假設它過時。
    • {{Color contrast ratio}}
  • 此外還有工具可以協助製作圖形圖表,或是地圖等的配色方案。這些工具對於對比度親和力檢查並不嚴格,但其可以在特定任務上有幫助作用。
  • 如果條目過度使用顏色,但你不知道如何親自修復,則可請其他編輯協助。請將{{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:格式手冊/親和力/資料表格指南列出了這些詳細要求:

  1. 正確的表格標題
  2. 正確的標題結構
  3. 圖像和顏色
  4. 避免巢狀表格

排版表格

部分導航框系列模板,以及資訊框由表格製成。

請不要使用表格做純排版用途。最佳的選擇是使用更有適應性的HTML<div>塊和樣式屬性。比如請見{{Navbox}}

可以選擇一些簡單的排版表格。特別是用align="right"等表格僅為獲得浮動效果之時,這會在一些完全不支援CSS的瀏覽器上良好執行。這實際上是一個<div>加CSS的繁瑣近似,而非被稱為(巢狀)「表格布局」的設計之最。

然而為避免親和性障礙,當表格用於布局時,請勿使用任何表格、行或列標題,也不要使用summary屬性。這些結構表格元素僅應在資料表格中使用。請勿將結構元素用於效果呈現,而是使用結構表。對於維基表格標記,這表示這種下方情形不要使用「!」(相當於XHTML中的 <th>):

{| class="toccolours" style="width:94%"
| style="text-align: center; background-color: #ccf;" | '''标题'''
|-
| [常规单元格] || [常规单元格]
|-
| [常规单元格] || [常规单元格]
|}

範例請見{{Navbox}}

圖像

  1. 即使是空白的圖像,也應該帶有替代文字,替代文字是給盲人讀者、搜尋蜘蛛和其他非視覺使用者的代替品。加入的替代文字應該簡潔,或者應該提到圖像題注或相鄰文字:見WP:ALT取得更多資訊。
  2. 多數情況下,無論是使用內建的圖像語法,還是一行附屬文字,圖像都應該帶有題注。題注應該簡潔描述圖像意義,即其試圖傳達的必要資訊。
  3. 若可能,任何圖表或圖表都應該有替代文字或充分描述,使無法檢視圖像的使用者可以明白一些內容。
  4. 如有不適合條目的詳細圖像說明,則應將其置於圖像描述頁,並留下文字註明,點開圖像連結可以獲得更詳細描述。
  5. 圖像應置於其所屬章節內(在章節標題和引導至其他條目的連結之後),不應放在標題裡面或上一章節末尾,否則螢幕閱讀器會在其它章節顯示圖像(和替代文字);行動版站點也同樣如此顯示。見Wikipedia:圖像指南獲得更多資訊。
  6. 不要使用左圖或右圖的描述。對於維基百科行動版而言,圖像的排列是不同的,而這對於使用輔助軟體的讀者也沒有意義。相反,使用題注來指明圖像。
  7. 該指引包括<math>模式下LaTeX格式公式的替代文字。

動畫、影片與音訊

動畫

出於親和力考慮,動畫(GIF–圖形交換格式)應該滿足以下兩者之一:

  • 持續時間不超過5秒(否則會變成純裝飾元素)[9],或者
  • 有控制模組(停止、暫停、播放)[10]

總而言之,大多數動畫GIF應當能轉換為影片。(轉換方法可見指南將動畫GIF轉換為Theora OGG

影片

影片可以加入計時文字格式的字幕。commons:Commons:Video#Subtitles and closed captioning有相應的幫助頁面。字幕為語音的轉錄。

對於聽力障礙者可以加入隱藏字幕。在2012年11月之前這很難做到,但通過bugzilla:41694的請求,現在可以簡單的加入此特性。隱藏字幕以文字形式提供了關於聲音的全部重要資訊。其可以包含在對話、聲音(自然或人聲)、環境與背景、人與動物的動作表情,以及文字或圖形[11]。關於如何建立隱藏字幕,請參閱:A quick and basic reference for closed captionsa 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)英語Semantic_HTML<font>標籤也應該要盡量避免在文章中使用;使用邏輯模板(例如{{em}}、{{strong}}或{{code}})來強調與其它文字的不同之處。使用及{{small}}及{{big}}模板來改變文字大小,而非以font-size=方式或是已過時的<small>來設定樣式。

CSS與JavaScript限制

維基百科條目應該讓使用受限或瀏覽器不支援JavaScriptCSS的讀者也能夠容易閱覽。想同時避開不必要的功能又提供相同的外觀質感給不同能力瀏覽器的使用者,是不可能的。不應該使用導致在CSS或JavaScript不可用時會保持隱藏或走樣的功能。This includes techniques such as the hiddenStructure method for hiding table content—which produces incomprehensible output without CSS—and some implementations of the NavFrame collapsing code—which can make content inaccessible without JavaScript support. 然而,考量不支援CSS或JavaScript的使用者,確保他們的閱讀體驗是「可能的」;無可避免地,部分效果質感會變差。

為了因應這些考量,測試任何潛在的破壞性變化都在關閉JavaScript或CSS的情況下進行。在Firefox或Chrome,這可以很容易地透過網頁開發擴展完成;IE瀏覽器可以在「選項」畫面禁用JavaScript。要特別小心內嵌式CSS效果,其在某些瀏覽器、媒體、以及XHTML版本並不支援。

參見

參考資料

外部連結