維基百科:格式手冊/無障礙/2025
本專案頁面目前為「2025」的草稿。 如有任何疑問,請至討論頁發起討論。 |
格式手冊 |
---|
灰字連結非正式指引,僅供參考 |
網站無障礙旨在讓網頁更易於瀏覽、閱讀。這最初只是用於幫助身心障礙人士,但確實利於所有讀者。我們致力於遵循WCAG標準2.1,基於該標準,提出以下建議。遵守這些規範的條目方便所有人閱讀、編輯。
條目結構
[編輯]條目結構規整能讓讀者對頁面的內容鋪排一目了然,因此有助達成無障礙。例如,某位失明讀者在尋找消歧義連結時,如果沒有在頁頂找到這種連結,則能明白頁面本來沒有消歧義連結,因此無需閱讀整頁。
標準化是維基百科的一大習慣,因此只需遵循Wikipedia:格式手冊/版面佈局和Wikipedia:格式手冊/序言章節 § 應該有的東西。
章節標題
[編輯]章節標題應該能簡潔描述主題,且按照格式手冊排列。
章節標題應該巢狀遞進,由二級標題(==
)開始,再到三級標題(===
),如此類推(一級標題是頁面標題)。不要為了凸顯某些內容而故意用錯或跳過章節標題層級,這樣做有悖於它們的作用。
為求視障編輯者的便利,使用原始碼編輯時可以在每個章節標題下面添加一個空行。如果添加多於一個空行,則會導致章節標題預覽時在下面出現空行。在部分條目中,您也應留意小型螢幕如何顯示章節標題下面的空行,因為許多編輯者都用流動裝置進行編輯,如果章節標題下面有空行,則反而可能會削弱他們對條目的可讀性。
正確 | 隨機/無規律 | 跳級 |
---|---|---|
[條目序言] |
[條目序言] |
[條目序言] |
不要濫用半形分號製作偽標題(分號只可用於製作定義列表),亦避免使用粗體。螢幕閱讀器和其他輔助工具只能依賴章節標題語法確定標題的排列。如欲縮小目錄,則可以改用{{TOC limit}}。如果{{TOC limit}}因條目存在低層章節標題而無法使用,則五級標題可以改用粗體,這樣就能減少對螢幕閱讀器的干擾。偽標題只能在方法窮盡時使用,不應頻繁出現。
可接受 | 錯誤 |
---|---|
[條目序言] |
[條目序言] |
浮動元素
[編輯]在維基代碼中,浮動元素(包括圖像)應該置於所述章節之內,而非前一章節的結尾。(在某些平台中,在一小段文字旁邊「堆疊」幾張圖像會導致某些圖像擠到下一章節,但這並非無障礙問題,因為螢幕閱讀器必定會在每張圖像代碼所指定的位置閱讀它們的alt=
。)
螢幕解像度
[編輯]
維基百科條目應該便利使用小型螢幕(比如流動裝置)或低解像度顯示器的讀者。在桌上顯示器中,螢幕兩側有多張圖像的條目可能會導致問題。雖然低解像度顯示器一般會垂直伸長段落,因而垂直移動圖像,但您也需要避免在螢幕兩側同時添加圖像或其他浮動元素。大型表格和圖像也能產生問題:水平捲軸或不可避免,但您亦可考慮重新鋪排大型表格,縮短水平篇幅。
文字
[編輯]大部分螢幕閱讀器預設不會標明視覺文字屬性(粗體、斜體、底線、等寬字型、刪除線)乃至語意文字屬性(着重、刪除文字),所以它們會將刪除線文字視為普通文字朗讀。如果您使用螢幕閱讀器且時常參與維基百科討論,則建議開啟文字屬性的通知,因為維基百科討論經常出現刪除線文字。
因為螢幕閱讀器一般忽略刪除線,所以如果它在條目中沒有任何其他標示,則會引起無障礙問題或者混淆。這個問題適用於<s>
、<del>
元素(以及一般呈現為底線的<ins>
)和使用它們的模板。如果您認為內容不適當或錯誤,則不要使用刪除線劃去它,而是用<!--
和-->
將其轉為註釋、刪除內容,或掛上內文爭議模板,再於討論頁發起話題。
- 【中文的螢幕閱讀器如何?
- 測試了一下我的裝置Windows 11上的講述人,沒下載其它語音的時候遇到阿拉伯字母和希臘字母幾乎完全跳過,因此我暫且這樣改。】
有些螢幕閱讀器不支援常用漢字和拉丁字母以外的字元(?),因此您不能假定閱讀器必然以某特定方式閱讀這些字元。遇到不支援的字元時,螢幕閱讀器和語音合成器可能會讀作問號或完全省去它。
- 在重要情況(如人名、地名、事物等)下,您需要為所有非拉丁、非漢字的文字(?)提供拉丁轉寫。您可以使用語言專用模板或{{Transliteration}}標註。這些模板在無障礙方面也有其他益處(參見「外語」一節)
- 不要加入螢幕閱讀器可能無法閱讀的符號(比如心形符號♥),反而使用附帶替代文字的圖像。[1]
您必須使用上下文清楚表達文字的語意特性(以及其他形態類似的內容)。不要依賴只能用CSS屬性或Wikitext分辨的自訂「特殊符號」。
不要使用需要互動才能提供資料的技術,包括提示框和其他「懸浮」文字。縮寫不受此限,所以您可以用{{abbr}}
(<abbr>
的包裝模板)標示縮寫(包括首字母縮略字)的全寫。
不要在句中插入換行符,因為會對螢幕閱讀器造成干擾;但您可以在句末加入換行符,對某些編輯者有所幫助。(譯註:如果指通過句末換行來產生空格的話,那中文不能有此體例。)?)
字型大小
[編輯]大小字形一般由自動化頁面元素(比如章節標題、表格標題和標準模板格式)負責實現,除此之外應避免使用。更改字型大小時,應當用原大小的百分比表示,而非以像素或點表示的絕對大小。如果使用相對大小,則視障用戶仍能按情況調大瀏覽器的預設字型大小,但他們無法直接調整絕對大小。
避免在使用小字型的頁面元素(比如資訊框、導航模板和參考章節中的文字)內再使用小字型。[a]換言之,您不應在這些元素中的純文字使用<small>...</small>
標籤,以及諸如{{small}}
和{{smalldiv}}
的模板。所得文字的大小不得小於頁面預設的85%,注意,HTML的<small>...</small>
標籤還具有「小字條款」(fine print)或「註疏」的語意含義,[2]不可用於風格化。
分數
[編輯]不要使用Unicode已有的分數字元,如½(已棄用標記的有½
和½
),因為部分螢幕閱讀器無法解析一些分數字元,而且視障讀者難以閱讀。請改用{{frac}}
,格式如3⁄4。(在科學和數學條目中,則用{{sfrac}}
,格式如3/4。)
外文
[編輯]標註外文
[編輯]中文維基百科預設會向瀏覽器指明條目以中文(zh
)書寫。除在中文語境內常用的非中文(外文)詞彙和字母詞外,外文文字必須用{{lang}}
(或其衍生模板)標明。這類別模板使用IETF語言標籤包裝文字,指定其語言和書寫系統,例如:
-
Assemblée nationale
並未指出自己的語言(法語)。大多數螢幕閱讀器處理時會讀錯。 -
{{lang|fr|Assemblée nationale}}
呈現為Assemblée nationale,螢幕閱讀器處理時改用法語發音。 -
{{lang-fr|Assemblée nationale}}
→ 法語:Assemblée nationale:同上。 -
上证A股、Facebook用户
→ 上證A股、Facebook用戶:由於「上證A股」和「Facebook」在中文語境內是常用詞彙,無需專為其加上{{lang}}
系列模板。
理由:如果使用{{lang}}
指定文字的語言,則螢幕閱讀器可以改用該語言的聲音。[3]
另外,在中文維基百科中,如果不將日語文字用模板包裹,日文漢字可能會被視作中文而錯誤簡繁轉換(韓文漢字、越南喃字等同理)。
關於使用{{lang}}
系列模板的完整理由,見Template:Lang/doc#使用理由。
書寫系統
[編輯]IETF語言標籤按照ISO 639標準指定文字的語言之餘,還能標明文字的書寫系統:
-
{{lang|sr-Cyrl|Народна скупштина}}
→ Народна скупштина -
{{lang|sr-Latn|Narodna skupština}}
→ Narodna skupština ——塞爾維亞語一般用拉丁文字或西里爾文字書寫。 -
{{lang|ja|Kokumin gikai}}
——日語文字一般用漢字和假名書寫。 -
{{lang|ja-Latn|Kokumin gikai}}
指明這段日語文字用拉丁文字書寫(日語羅馬字)。 -
{{transliteration|ja|Kokumin gikai}}
同上。
如果未指定書寫系統,則IETF標籤會預設使用該語言最常用的書寫系統。鑑於此,處理字母轉寫時,您應該在語言代碼加入-Latn
,抑或使用相應的{{transliteration}}
模板。維基百科的語言專用模板(比如{{lang-en}}
和{{nihongo}}
)能為編輯者提供各種功能,包括用一個模板展示幾種轉寫。有些語言沒有自己的專用模板,但這些模板防止編輯者頻繁使用{{lang}}
和{{transliteration}}
,從而簡化維基文字。
音標轉寫請用{{IPA}}
或其他合適模板。原始印歐語請用{{PIE}}
。
連結
[編輯]- 連結(尤其是外部連結)描述應該清楚易懂(不要使用「點擊我!」「此連結」)。[4][5]
- 不要使用Unicode符號替換圖示,反而應該使用附帶替代文字的圖示。例如,部分螢幕閱讀器無法將「→」等字元轉為有用文字。
- 為幫助視障讀者找到目標頁面的連結錨點,您可以利用
{{Visible anchor}}
標示錨點。
顏色
[編輯]在條目和其他頁面使用顏色時,您應時常留意無障礙,準則如下:
- 請確保顏色不是唯一傳達重要資料的途徑。特別而言,不要使用彩色文字或背景,除非其狀態也以其他方式指明,比如圖例上的無障礙符號或註腳標籤。如不遵循這個準則,則失明用戶或讀者無法通過印本或非彩色裝置取得資料。
- 讀者必須能清楚明白哪些互動元素是連結。
- 部分讀者有色盲、色弱或視覺障礙。請確保文字與背景的對比度最少能達到Web內容無障礙指南(WCAG)2.0的AA等級,且儘量達到AAA等級(參見WCAG「了解SC 1.4.3:對比度(最低限度)」)。如欲在白色背景下使用CSS顏色名稱顯示文字,請見Wikipedia:格式手冊/無障礙/CSS顏色與白色背景的對比度。此外,您也可以利用以下工具評估對比度:
- 網絡上有一些能檢查對比度的工具,包括WebAIM網上對比度檢查器、WhoCanUse網站和斯努克顏色對比度檢查器。
- 儘管如此,有些網上工具以WCAG 1.0的演算法為根據,因此需要事先甄別。如果工具未指定自己採用WCAG 2.0,則您可以假設它已過時。
- 維基媒體基金會設計團隊提供一套達到AA等級的配色表。維基媒體產品(不論電腦端還是流動端)的所有用戶介面元素都使用此配色,但連結文字除外。
- Wikipedia:格式手冊/無障礙/顏色表就14種色相對黑字、白字、連結文字和訪問連結文字展示達到AAA等級的最暗或最亮背景色。
- Google Chrome有附帶顏色挑選器的對比度檢查器。
- 您可以通過顏色對比度分析器選擇頁面上的顏色,然後詳細評估它們的對比度,但只有「luminosity」(光度)演算法是最新的,而「color brightness/difference」(顏色亮度/差)已過時。
- 網絡上有一些能檢查對比度的工具,包括WebAIM網上對比度檢查器、WhoCanUse網站和斯努克顏色對比度檢查器。
- 以下工具能幫助您製作圖表和地圖配色。它們未必能準確評價顏色的對比度,但在特定情況下也值得使用。
- 您可以在Paletton挑選圖表配色。
- Color Brewer 2.0可以提供地圖配色和詳解。
- 「明亮」定性數據配色方案是一套九種對色盲用戶便利的顏色。
- 網絡上有一些模擬色盲的工具:Toptal ColorFilter(網頁)和Coblis色盲模擬(本地檔案)。瀏覽器也有一些擴充程式:NoCoffee(Firefox)
- 您可以通過開源軟件Color Oracle模擬色盲視覺和全色盲,從而選擇更適當的對比色。
- 如果條目濫用顏色,但您無法改正問題,您可以掛上{{Overcolored}},尋求編輯者協助。
塊元素
[編輯]列表
[編輯]分隔列表項目時,不要在中間插入空行或制表符。這裏的列表包括描述列表(由行首半形分號或冒號製成的列表,也是維基百科大多數討論的格式)、有序列表和無序列表。列表的作用是組合同類元素,但MediaWiki會將空行解析為列表的結尾。此外,如果列表的雙空行過多,則螢幕閱讀器會讀出多個列表,因而誤導或迷惑用戶。此類不當格式也能大幅延長讀完列表所需的時間。
同樣,不要在同一列表內無規律使用項目符號標記(冒號、星號或井號)。回覆留言時,您需要在原本留言的項目符號之上多加一個同類字元,才算適當縮排回覆。您也可以「反縮排」,發起新的討論(即是另一個HTML列表)。
例子:
這是適當做法:
* 支持。我喜欢这个想法。—User:Example
** 疑问:你为什么喜欢?—User:Example2
*** 我觉得它符合维基百科的精神。—User:Example
如果留言沒有項目符號,則這也是適當的:
: 支持。我喜欢这个想法。—User:Example
:: 疑问:你为什么喜欢?—User:Example2
::: 我觉得它符合维基百科的精神。—User:Example
回覆時,您也可以讓項目符號保持在左邊:
* 支持。我喜欢这个想法。—User:Example
*: 疑问:你为什么喜欢?—User:Example2
*:: 我觉得它符合维基百科的精神。—User:Example
但是不要從無序列表轉為描述列表:
* 支持。我喜欢这个想法。—User:Example
:: 疑问:你为什么喜欢?—User:Example2
或者從無序列表轉為混合列表:
* 支持。我喜欢这个想法。—User:Example
:* 疑问:你为什么喜欢?—User:Example2
不應該在列表項目之間留空行:
* 支持。我喜欢这个想法。—User:Example
** 疑问:你为什么喜欢?—User:Example2
也不應該跳級:
* 支持。我喜欢这个想法。—User:Example
*** 疑问:你为什么喜欢?—User:Example2
不鼓勵以下做法:
: 支持。我喜欢这个想法。—User:Example
:* 疑问:你为什么喜欢?—User:Example2
這裏的項目符號令列表更為複雜,讓回覆的用戶更容易用錯縮排層次。
在列表項目內分段
[編輯]一般MediaWiki列表語法與一般MediaWiki段落語法不相容。
如欲在列表項目內寫下多個段落,您可以使用{{pb}}
分段:
* 这是第一项。{{pb}}这是同一项内的另一段。
* 这是第二项。
您也可以使用HTML的段落標籤(留意結尾的</p>
標籤):
* 这是第一项。<p>这是同一项内的另一段。</p>
* 这是第二项。
在以上例子中,您必須在同一代碼行中使用模板,但您也可以用HTML註釋包圍換行,防止換行顯示的同時,讓留言的分段更為清晰:
* 这是第一项。<!--
--><p>这是同一项内的另一段。</p>
* 这是第二项。
這個技巧可以用來在列表項目內加入各種塊元素(因為列表項目也是塊元素,能包含其他塊元素):
* 这是第一项。<!--
--><p>这是同一项内的另一段,这里放引用:</p><!--
-->{{talk quote block|红烧肉好吃。|User:Example}}<!--
--><p>这是同一项内的结尾段。</p>
* 这是第二项。
請注意,這個方法不適用於部分裝飾模板,比如一些裝飾引用模板使用表格,但MediaWiki解析器無法處理列表項目中的表格語法。
不要用換行模擬分段,因為它們的語意不同:
* 这是第一项。<br />这还是同一段,只是之前有换行标签。
* 这是第二项。
換行標籤之後的文字依然屬於同一段,而且它的作用本來是給詩歌或代碼塊分行。參見<poem>
和<syntaxhighlight>
標籤。
切勿用冒號與縮排層級對齊,因為它會產生三個列表:
* 这是第一个列表。
: 这是第二个列表。
* 这是第三个列表。
除此之外,HTML列表模板是在列表內加入塊元素(比如代碼)的最好方法:
{{bulleted list
|1=这是第一项:
<pre>
这是代码。
</pre>
这还是同一项。
|2=这是第二项。
}}
但討論頁面不使用這個技巧。
縮排
[編輯]您可以使用{{block indent}}
(原理是CSS)縮排多行文字。單行文字的縮排模板有很多種,包括所有維基媒體網站通用的{{in5}}
,用各種空格字元縮排文字。不要濫用<blockquote>...</blockquote>
元素或使用它的模板(如{{blockquote}}
)縮排文字:它們只可用來引用文字。{{block indent}}
正是為這些引用以外的用途而製作的。
MediaWiki剖析器將以半形冒號(:
)開始的行標記為HTML描述列表(<dl>
)的<dd>
部分。[b]大多數瀏覽器會縮排<dd>
行,因此可用來標註回覆。可是,這個語法缺乏描述列表中<dd>
所依賴的<dt>
(術語)。由網頁對瀏覽器輸送的代碼可見,這樣做會令HTML代碼產生錯誤(不符合驗證標準[6])。因此,螢幕閱讀器等輔助技術會宣告描述列表不存在,讓不熟悉維基百科的標記式語言的訪客費解。這個習慣對無障礙、HTML語意和維基百科的轉載不利,但還是十分常用。
不要在以冒號縮排的文字之間插入空行,尤其在條目內。螢幕閱讀器會將其解析為另一個列表的開端。
如果需要空行,則您可以採用以下任一方法,對螢幕閱讀器產生不同效果:
第一個方法是插入一個空行,再用相等數量的冒號縮排。這個方式適用於兩位編輯者在同一縮排層次中相繼發言的情況,比如:
: 完全同意。—User:Example : : 我还不信,还有更好的来源吗?–User:Example2
螢幕閱讀器會將其解析為兩個列表項目(無視空行)。
如果您只需要一個留言(或其他列表項目),則可以採用第二個方法:在同一行中使用分段語法:
: 文字。{{pb}}更多文字。 —User:Example3
如欲分行展示數學方程式或表示式,則建議使用<math display="block">1 + 1 = 2</math>
,不用:<math>1 + 1 = 2</math>
。
垂直列表
[編輯]帶圓點垂直列表
[編輯]帶圓點垂直列表中,不要用空行分隔項目,而是要使用帶圓點垂直列表模板或<p>
標籤。(列表開端前或結尾後的空行不會產生問題。)
在列表中間插入空行的壞處是,如果項目用多個換行符分隔,則那換行符會將列表「斷裂」為兩個。因此,螢幕閱讀器會將其解析為多個小列表,如:
* 白色玫瑰 * 黄色玫瑰 * 粉红色玫瑰 * 红色玫瑰
MediaWiki會隱藏部分換行符,所以會顯示這個:
- 白色玫瑰
- 黃色玫瑰
- 粉紅色玫瑰
- 紅色玫瑰
但螢幕閱讀器會讀出「2個項目的列表:白色玫瑰、黃色玫瑰,結束。1個項目的列表:粉紅色玫瑰,結束。1個項目的列表,紅色玫瑰,結束。」
不要用換行符(<br />
)分離列表項目。如果您想保持垂直結構,則可以使用{{plainlist}}
或{{unbulleted list}}
;如果您覺得應當將列表改為水平形式,則可以改用{{flatlist}}
或{{hlist}}
。
無圓點垂直列表
[編輯]製作無圓點垂直列表時,{{plainlist}}和{{unbulleted list}}可以標註哪些元素明顯是列表,因此能提升無障礙和語意意義。它們的差別僅在於製作列表所用的標記語法。注意,由於它們是模板,每一項的文字的豎線(|
)必須要替換成{{!}}
,或使用<nowiki>...</nowiki>
標籤包圍。同樣,等號(=
)也要替換成{{=}}
或者用<nowiki>...</nowiki>
包圍,但您也可以通過命名參數(|1=
、|2=
等)解決問題。如果這些問題太麻煩,您也可以選用{{endplainlist}}。
Wikitext | 顯示結果 |
---|---|
{{plainlist | * 白色玫瑰 * 黄色玫瑰 * 粉红色玫瑰 * 红色玫瑰 }} |
|
Wikitext | 顯示結果 |
---|---|
{{unbulleted list | 白色玫瑰 | 黄色玫瑰 | 粉红色玫瑰 | 红色玫瑰 }} |
|
此外,在導航模板等模板或任何合適容器中,此類列表可以使用「plainlist
」class,如下:
| listclass = plainlist
或| bodyclass = plainlist
資訊框可以使用以下:
| rowclass = plainlist
或| bodyclass = plainlist
其他垂直列表
[編輯]上述空行問題會讓編號列表的編號從頭開始計數。分項問題也適用於描述(定義、關聯)列表,但以{{glossary}}
系列模板製作的描述列表可以包含換行符。
水平列表
[編輯]製作水平列表和資訊框中的單列列表時,{{flatlist}}
和{{hlist}}
能對每個項目使用正確的HTML語法,因此防止輔助軟件讀出項目符號(比如「圓點,一,圓點,二,圓點,三……」),從而提升無障礙和語意意義。它們的差別僅在於製作列表所用的標記語法。注意,用這些模板製作列表時,豎線字元(|
)必須替代成{{!}}
跳脫。
Wikitext | 顯示結果 |
---|---|
{{flatlist | * 白色玫瑰 * 红色玫瑰 ** 粉红色玫瑰 * 黄色玫瑰 }} |
|
Wikitext | 顯示結果 |
---|---|
{{hlist | 白色玫瑰 | 红色玫瑰 | 粉红色玫瑰 | 黄色玫瑰 }} |
|
此外,在導航模板等模板或任何合適容器中,此類列表可以使用「hlist
」class,如下:
| listclass = hlist
或| bodyclass = hlist
資訊框可以使用以下:
| rowclass = hlist
或| bodyclass = hlist
列表標題
[編輯]在列表之前誤用分號製作偽標題(例1)會產生列表間隔。分號一行是沒有內容的描述列表,而之後的內容屬於另一個列表。
正確的做法是使用章節標題語法(例2)。
例1:錯誤
; 四书
* 《论语》
* 《孟子》
* 《大学》
* 《中庸》
例2:標題
== 四书 ==
* 《论语》
* 《孟子》
* 《大学》
* 《中庸》
表格
[編輯]螢幕閱讀器和其他瀏覽工具利用特定表格標籤幫助用戶明白表格內容。
唯有妥當使用表格的豎線語法,才能充分利用當中功能。表格的特殊語法請見mw:Help:Tables。不要只用格式(不論CSS還是表格代碼內,比如改變背景顏色)建立語意意義。
許多導航模板和資訊框都是用表格製成的。避免在相鄰儲存格中使用<br />
或<hr />
模擬列。螢幕閱讀器會按照HTML表格的順序逐列閱讀儲存格。
數據表格
[編輯]Wikitext:
{| class="wikitable"
|+ 标题
|-
! scope="col" | -{zh-hant:行;zh-hans:列;}-标题1
! scope="col" | -{zh-hant:行;zh-hans:列;}-标题2
! scope="col" | -{zh-hant:行;zh-hans:列;}-标题3
|-
! scope="row" | -{zh-hant:列;zh-hans:行;}-标题1
| 数据1 || 数据2
|-
! scope="row" | -{zh-hant:列;zh-hans:行;}-标题2
| 数据3 || 数据4
|}
效果:
行標題1 | 行標題2 | 行標題3 |
---|---|---|
列標題1 | 數據1 | 數據2 |
列標題2 | 數據3 | 數據4 |
- 標題(
|+
) - 表格標題的作用是描述其性質。[7]數據表格應包含標題。
- 行列標題(
!
) - 和標題一樣,這些標題有助有邏輯地鋪排資訊。[8]螢幕閱讀器可以憑藉標題了解有關數據儲存格的資訊,比如在數據儲存格之前讀出標題資訊,或者應要求提供標題資訊。[9]因為平面閱讀器可能會先讀出列標題和行標題,所以您必須確保這些標題標識在自身列/行中是唯一的。[10]
- 標題範圍(
! scope="col" |
和! scope="row" |
)() - 標題範圍能清楚指明儲存格是行標題或列標題。如果行標題佔據一組行,則請改用
! scope="colgroup" colspan="2" |
;如果列標題佔據一組列,則請改用! scope="rowgroup" rowspan="2" |
(數字視需要改變)。這個做法可以聯絡標題和對應的儲存格。[11]
Wikipedia:格式手冊/無障礙/數據表格教程就以下方面提供詳細要求:
- 適當表格標題
- 規整標題結構
- 複雜表格
- 圖像和顏色
- 避免巢狀表格
格式表格
[編輯]避免使用表格對齊非表格內容。數據表格在內容之外還提供額外資訊和導航方式,如果用於排列沒有行列邏輯關係的內容,則可能令人困惑。正確做法是使用語意合適的元素或<div>
以及style
屬性。
如果您需要用表格對齊非表格內容,則必須讓螢幕閱讀器將其解析為格式表格。您應該設置role="presentation"
屬性,不應設置summary
屬性。不要在表格和巢狀表格內使用<caption>
和<th>
元素。就Wiki表格標記式語言而言,不要使用|+
和!
字首。請確保內容的閱讀順序正確。置中和粗體等視覺效果可以用樣式表或語意元素實現。例如:
{| role="presentation"
|-
| colspan="2" style="text-align: center; background-color: #ccf;" | <strong>重要文字</strong>
|-
| 三个字 || 这是五个字
|-
| 又是五个字 || 再四个字
|}
重要文字 | |
三個字 | 這是五個字 |
又是五個字 | 再四個字 |
圖像
[編輯]除特殊情況外,您應該使用Wikitext語法為圖像加上題注。題注應間接描述圖像的意義和所傳達的重要資訊。
如果詳細描述不適合置於條目內,您可以將其置於描述頁,並指明點擊圖像連結可以檢視詳細描述。
- 不要使用圖像取代表格和圖表。圖表和示意圖應儘量包括文字版本或詳細描述,方便無法檢視圖像的用戶明白所表達的意思。
- 除非必需,則不要在兩張圖像之間夾雜文字或指定圖像絕對大小。
- 不要不經篩選地堆積圖像,因為在特定的螢幕大小和瀏覽器格式下,圖像會互相重疊,從而影響無障礙。條目圖像過多會延長載入時間,所以一頁不應包含超過100張圖像(不論大小)。
- 不要在文字中用左邊或右邊指代圖像。圖像排列在流動端可能有所變化,而且這種指稱在輔助技術中毫無價值。請使用題注辨識圖像。
圖像位置
[編輯]圖像應該置於有關章節之內(標題和頂註之後),而非在標題中或前一節的結尾。這樣能確保螢幕閱讀器會在正確位置閱讀圖像(及其替代文字),而圖像在流動端中會在適當位置出現。
此指引亦包括以<math>
標籤顯示的LaTeX方程式的替代文字。
不要在標題中插入圖像,包括旗幟圖示
和<math>
標籤,否則會使章節連結失效,並產生其他問題。
圖示
[編輯]非裝飾性圖像和圖示應包含Alt屬性,方便螢幕閱讀器、網絡爬蟲和其他輔助技術解析。替代文字應言簡意賅,或參照題注或附近文字。
動畫、影片和音頻
[編輯]動畫
[編輯]動畫(GIF)應滿足以下任一條件才能達到無障礙要求:
因此,時長超過五秒的GIF應轉換為影片(將GIF動畫轉換為Theora OGG檔案的教程)。
此外,動畫不得在任何一秒時段內閃爍超過三次。閃爍頻率超越此限的動畫可能會引致癲癇發作。[14]
影片
[編輯]隱藏式字幕(CC)和字幕是在視聽檔案顯示文字的常見方法,在維基百科中用定時文字實現。它們一般都會(逐字或經過修改)轉寫檔案的音頻,有時亦包含非言語音頻的描述。字幕可以幫助聽障用戶和非母語說話者理解多媒體檔案的內容。
隱藏式字幕是影片中所有重要音頻資訊的文字撰寫,可以包括對話、聲音(自然或人為)、背景、人事物的動作和表情、文字和圖像。[15]網絡上有許多編寫隱藏式字幕的教程。[16]
音頻
[編輯]音頻檔可以添加言語、歌詞、對話等的字幕,[17]方法與影片的類似::commons:Commons:Video/zh § 字幕。
樣式和標記式語言選項
[編輯]最佳做法:Wiki標記式語言和CSS樣式表
[編輯]表格和其他塊級元素的樣式應該使用CSS樣式表(而非內文樣式屬性)設置。全站通用的MediaWiki:Common.css經測試,對大部分主流瀏覽器皆無障礙(如顏色對比度足夠)且相容。此外,用戶有特定需要時可利用自己的樣式表(Special:MyPage/skin.css或瀏覽器的樣式表)調整配色方案。例如,Wikipedia:視障用戶樣式表為導航模板提供對比度更高的背景配色。然而,如果全站樣式表被覆蓋,則用戶很難自選合適的主題。
全站樣式表也能維持條目外觀一致,從而提升專業性。
您可以使用樣式表以外的配色方案,唯需符合無障礙條件即可。如果某模板或其他元素的配色方案與標準不同,作者應確保它能滿足無障礙要求,比如顏色對比度夠高。例如,某體育隊的資訊框和導航模板為了配合隊伍的代表顏色,可以採用紅黃配色方案。在此,深紅色連結與淺黃色背景的對比度足夠,但白字與黃色背景或黑字與紅色背景的對比度太低。
條目一般只能用可允許HTML元素所限的Wiki標記式語言標籤。特別的是,如果需要裝飾性的斜體和粗體,不要使用HTML樣式元素<i>
和<b>
,反而應使用Wiki內建的''
和'''
;如果在此之外還需要語意意義,則請使用語意標記式語言。
在條目中凸顯語意差別時,不要使用<font>
,反而應使用{{em}}
、{{code}}
等{{var}}
。改變字型大小需要用{{subst:resize}}、{{subst:small}}和{{subst:Large}}實現,不要使用font-size
、<big />
等HTML標籤。當然,這個準則也有例外,比如您可以使用<u>...</u>
元素表示某個範例連結不可點擊,但條目內文一般不出現底線。
CSS或JavaScript支援有限的用戶
[編輯]條目內文不應使用自動摺疊(預先摺疊)元素隱藏內容。
維基百科條目應兼顧瀏覽器或裝置缺少JavaScript或CSS支援的讀者,在網頁設計中稱為「漸進增強」。謹記維基百科內容可以自由轉載,當然也不乏瀏覽器陳舊的用戶,但亦請明白,我們必須犧牲功能齊全的瀏覽器才能支援的元素,才能為這些用戶提供質素相等的體驗。因此,你不應該使用依賴CSS或JavaScript顯示內容的元素。然而,您一般只需考慮缺乏CSS或JavaScript的用戶是否可以閱讀頁面,因為他們的閱讀體驗必然不如他人。
出於以上因素,您可以關閉JavaScript和CSS,查出任何重大變化。Firefox或Chrome的用戶可以通過Web Developer擴充程式實現,而使用其他瀏覽器的編輯者可以通過「選項」螢幕關閉JavaScript。很多瀏覽器、媒體和XHTML版本不支援內文CSS特效,所以處理時要特別小心。
參見
[編輯]註釋
[編輯]- ^ 資訊框和導航模板的字型大小一般為本頁預設的88%。參考章節的字型大小一般為本頁預設的90%。其他數值請見MediaWiki:Common.css。
- ^ HTML描述列表曾稱「定義列表」和「關聯列表」。
<dl><dt>...</dt><dd>...</dd></dl>
結構從未改變,但名稱隨HTML規範更迭而變化。
參考文獻
[編輯]- ^ F26: Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information. Techniques for WCAG 2.0. 萬維網聯盟. 7 October 2016 [29 December 2011].
- ^ 4.5.4 The small element. HTML5. 網頁超文字應用技術工作小組. 24 December 2023 [29 December 2023].
- ^ H58: Using language attributes to identify changes in the human language. Techniques for WCAG 2.0. 萬維網聯盟. 7 October 2016 [29 December 2023]. Accessibility level: AA.
- ^ G91: Providing link text that describes the purpose of a link. Techniques for WCAG 2.0. 萬維網聯盟. 7 October 2016 [29 December 2023].
- ^ 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. 萬維網聯盟. 7 October 2016 [29 December 2023].
- ^ Markup Validation Service: Check the markup (HTML, XHTML, ...) of Web documents. validator.w3.org. v1.3+hg. 萬維網聯盟. 2017 [December 13, 2017].驗證錯誤資訊為"Error: Element
dl
is missing a required child element." - ^ H39: Using caption elements to associate data table captions with data tables. Techniques for WCAG 2.0. 萬維網聯盟. 7 October 2016 [29 December 2023]. Accessibility level: A.
- ^ H51: Using table markup to present tabular information. Techniques for WCAG 2.0. 萬維網聯盟. 7 October 2016 [29 December 2023].
- ^ 4.9.10 The th element. HTML5. 網頁超文字應用技術工作小組. 24 December 2023 [29 December 2023].
- ^ HTML Tables with JAWS. FreedomScientific.com. Freedom Scientific. [29 December 2023].
- ^ H63: Using the scope attribute to associate header cells and data cells in data tables. Techniques for WCAG 2.0. 萬維網聯盟. 7 October 2016 [24 December 2023].
- ^ G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds). Techniques for WCAG 2.0. 萬維網聯盟. 7 October 2016 [29 December 2023].
- ^ G4: Allowing the content to be paused and restarted from where it was paused. Techniques for WCAG 2.0. 萬維網聯盟. 7 October 2016 [29 December 2023].
- ^ Guideline 2.3 Seizures: Do not design content in a way that is known to cause seizures. Web Content Accessibility Guidelines (WCAG) 2.0. 萬維網聯盟. 11 December 2008 [29 December 2023].
- ^ G69: Providing an alternative for time based media. Techniques for WCAG 2.0. 萬維網聯盟. [1 January 2011].
- ^ 參見:
- Media Access Group. Captioning FAQ. WGBH Educational Foundation. 2002. (原始內容存檔於21 November 2019).:隱藏式字幕的基礎資料。
- English-language Working Group on Closed Captioning Standards. Closed Captioning Standards and Protocol for Canadian English Language Television Programming Services (PDF). CAB-ACR.ca 3rd. Canadian Association of Broadcasters. 2008. (原始內容 (PDF)存檔於23 August 2021).:詳細資料。
- Captioning Key. DCMP.org. Described and Captioned Media Program, 美國教育部. [29 December 2023].:隱藏式字幕的注意事項。
- ^ G158: Providing an alternative for time-based media for audio-only content. Techniques for WCAG 2.0. 萬維網聯盟. 7 October 2016 [29 December 2023].
延伸閱讀
[編輯]- Clark, Joe. Building Accessible Websites. New Riders Press. 2003 [1 January 2011]. ISBN 0-7357-1150-X.
- Pilgrim, Mark. Dive into Accessibility: 30 Days to a More Accessible Web Site. 2002. (原始內容存檔於5 October 2017).
- Lynch, Patrick J.; Horton, Sarah. Web Style Guide. Yale University Press. 2016. ISBN 978-0-300-21165-8. OCLC 1004033147 –透過Google Books.
外部連結
[編輯]- The Wikimedia Design Style Guide
- Recommendations for mobile friendly articles on Wikimedia wikis
- 10 Quick Tips to Make Accessible Web Sites, from WAI
- Colorblind web page filter
- Legibility, from Web Style Guide, 3rd Edition
- Essential Components of Web Accessibility, from WAI
- Introduction to Web Accessibility, from WAI
- Known and tracked MediaWiki accessibility issues
{{Wikipedia policies and guidelines}} [[Category:Wikipedia Manual of Style (accessibility)| ]] [[Category:Wikipedia accessibility| ]]