求聞百科:無障礙存取

無障礙（英語：accessibility）是指網頁能夠更加易於存取、易於使用，即使是色盲、盲人或者其他的殘障人士等特殊群體，也能夠存取網頁並使用各種功能，而不會遇到明顯的障礙。為了做到無障礙，求聞百科的頁面應該儘可能遵循HTML的規範並使用語意，且在可能的情況下，利用好輔助功能的介面。

求聞百科並不提供專門的輔助功能外掛程式（如螢幕閱讀器、文字大小、按鍵回饋增強、盲文顯示）等，使用者可以在作業系統的輔助功能設定中啟用相應的功能，或直接縮放網頁的大小。

求聞百科的頁面應當儘可能遵循Web內容無障礙指南（WCAG）2.1版，該指南將無障礙的基本原則分為可感知、可操作、可理解和穩健。

基本原則

根據WCAG 2.1，無障礙共包含四大原則：可感知、可操作、可理解和穩健。

可感知

可感知（英語：perceivable）是指網頁的內容能夠以使用者可感知的方式呈現。它包含以下指南：

替代文字

非文字內容內容應該有替代文字，從而讓不能閱讀非文字內容的使用者也能夠知道其內容。例如，盲人可以透過螢幕閱讀器或者盲文來知曉圖片或者影片中是什麼內容。裝飾性的內容不要求可感知。

基於時間的媒體

媒體應該要提供替代文字以呈現相同的資訊。音訊內容應當有字幕或者描述（字幕功能也可以透過系統的輔助功能中的即時字幕實現）。

適應性

內容應該要可以以不同的方式呈現，而不應該遺失其資訊或結構。一個資訊，無論是用於理解還是指示的，不能僅透過形狀、大小、位置、方向等感官特性呈現。內容的資訊和關係應該要正確指定（參見#條目結構和#塊元素）。

可辨別

顏色不能用途傳達資訊的唯一手段，對比度應該要符合要求（參見#顏色）。此外，大多內容應該可以在不同時捲動兩個方向的捲軸的情況下完整呈現，除非無法實現（如圖表、地圖等）。

可操作

可操作（英語：operable）是指網頁內容組件和導航必須是可操作的。

鍵盤可存取

網頁內容（尤其是對於小工具）必須可以在僅使用鍵盤的情況下就完成大部分的操作，且不能有鍵盤陷阱。

充足的時間

除非必要，網頁的功能應該要給使用者充足的時間以使用其功能，對於有時間限制自動操作的內容，除非必要，應該要允許使用者取消此時間限制。

癲癇和身體反應

禁止設計會導致癲癇發作或身體反應的內容，如閃光超過每秒3次的內容，或低於一般閃光和紅色閃光閾值的閃光。

可導航

要求網頁中重複出現的內容塊可以跳過，此外還有一些其他的要求，這些主要都是透過外觀介面實現的，與條目內容的關聯性不大。

輸入模式

使用者能夠透過鍵盤以外的各種輸入更輕鬆地操作功能。 這些主要都是透過外觀介面實現的，與條目內容的關聯性不大。

可理解

可理解（英語：understandable）是指不同類型的使用者都可以理解其內容。

可讀

指定內容語言。每個頁面都自動指定的語言，一般不需要使用者去操作，但是部分內容可能需要使用者手動去指定，參見#外語。

可預測

這個是主要對於網頁介面尤其是小工具的。組件接收焦點不能夠有上下文變化。

輸入輔助

任何需要使用者輸入的地方，都應該提供標籤或說明。

穩健

穩健（英語：robust，也稱「健壯」）是指內容能夠被各種各樣的使用者代理（包括輔助技術）解釋。穩健性主要體現在以下方面：

相容

遵循HTML規範，元素應當有完整的開始和結束標籤，並根據其規範行巢狀，不得包含重複的屬性，且任何ID都是唯一的，除非規範允許這些特性。

章節標題

章節標題的內容應該要概括這一章節的主要內容。

章節標題應該以二級（==）開始，接下來是三級（===）等，禁止使用一級標題。禁止隨意使用章節標題層級，或者任何形式的「跳級」。

請避免使用加粗或「分號語法」生成偽章節標題，除非這些內容即使沒有被視為標題也不影響閱讀（通常是內容較少的情況）。螢幕閱讀器等輔助功能在對標題進行導航時，只能使用正確格式的章節標題。如果你想縮減目錄長度，請使用模板連結：{{TOC limit}}。

正確標題範例：

您所輸入的

這是條目序言
== 二級標題 ==
=== 三級標題 ===
== 二級標題 ==
=== 三級標題 ===
==== 四級標題 ====
== 二級標題 ==

您所看到的

這是條目序言

二級標題

三級標題

二級標題

三級標題

四級標題

二級標題

隨意使用層級的錯誤標題範例：

您所輸入的

這是條目序言
==== 四級標題 ====
=== 三級標題 ===
== 二級標題 ==
== 二級標題 ==
==== 四級標題 ====
=== 三級標題 ===

您所看到的

這是條目序言

四級標題

三級標題

二級標題

二級標題

四級標題

三級標題

跳級標題的錯誤範例：

您所輸入的

這是條目序言

此處缺失二級標題
=== 三級標題 ===
== 二級標題 ==
此處缺失三級標題
==== 四級標題 ====
== 二級標題 ==

您所看到的

這是條目序言

此處缺失二級標題

三級標題

二級標題

此處缺失三級標題

四級標題

二級標題

偽章節標題範例：

您所輸入的

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

您所看到的

這是條目序言

二級標題

三級標題

偽章節標題

二級標題

三級標題

偽章節標題

二級標題

偽三級標題

請勿濫用加粗或「分號語法」來生成「偽章節標題」，「分號語法」（行首半形分號）專用於定義列表，而螢幕閱讀器和其他輔助工具僅能使用被系統認為是的標題來導航定位。但是，如果其標題層級對內容不重要，例如內容較少，使用標題反而會比較冗餘，這種情況下也可以使用偽標題。

可接受的例子：

您所輸入的

條目首段
== 二級標題 ==
=== 三級標題 ===
'''偽標題'''
== 二級標題 ==
=== 三級標題 ====
; 術語
: 定義
; 術語
: 定義

您所看到的

條目首段

二級標題

三級標題

偽標題

二級標題

三級標題 =

術語

定義

術語

定義

不可接受的例子：

您所輸入的

條目首段
== 二級標題 ==
=== 三級標題 ===
; 偽標題
== 二級標題 ==
=== 三級標題 ===
== <small>偽三級標題</small> ==

您所看到的

條目首段

二級標題

三級標題

偽標題

二級標題

三級標題

偽三級標題

排版

浮動內容

浮動內容是指顯示在文字的右側或者左側，占用一定空間的內容。通常來說，資訊框、部分圖片以及旁註可能就是浮動的。

浮動的內容不宜過長，否則可能會影響頁面正常內容的顯示。不允許假定讀者使用的是較大的螢幕。

對於圖片和資訊框而言，樣式表對不同的螢幕大小有最佳化，當螢幕內容過小、不足以以浮動的方式顯示內容時，這些內容會直接顯示在內容的中間，避免浮動內容占用空間後給剩餘的文字留下的過小的空間。

如果您是手動使用的float: left或者float:right的樣式，請務必考慮該浮動內容在不同螢幕大小下的適應性。如有可能，在螢幕大小不足以顯示該浮動內容的情況下，顯示在內容中間，而非以浮動的方式顯示。

橫向排列的內容

一些模板或者計畫頁面等頁面可能會在條目中加入橫向排列的內容，一個很常見的列子就是將一個區域劃分為左右兩欄。使用這種方法時應當注意該內容在不同螢幕大小下的適應性，因為當螢幕較小時，橫向布局的內容會給每一部分留下非常小的空間，導致一行只能顯示少數幾個文字就被迫折行，在極端的情況下可能甚至一行只能顯示一個文字，或者因為不能換行的內容而強制把內容拉寬。因此，在使用橫向布局的內容時，應當考慮較小的螢幕下的顯示，例如在此情況下讓這些內容縱向顯示，確保相應的內容在各種合理的螢幕尺寸下都能夠正常地閱讀。

如果您是使用表格語法對內容進行排版的，請考慮使用flex或者grid布局，如果確實需要使用表格進行排版，應當加入role="presentation"以免被輔助技術作為表格進行使用。具體請參考#排版表格。

無法正常螢幕閱讀的內容

閱讀求聞百科的讀者不一定是透過觀察螢幕來閱讀其內容的，一些讀者存在視力障礙，需要透過螢幕閱讀器（又稱「講述人」（英語：narrator）或「複述功能」）來了解內容，並進行操作。因此，需要確保這些內容（除了僅用於裝飾的之外）也能夠正常被螢幕閱讀。

特殊符號

一些符號可能無法正常地被螢幕閱讀器閱讀，這種情況下，可以嘗試使用加有替代文字的圖像。例如，符號「♥」（心形符號）可能無法被閱讀，可以使用「」等圖像取代，螢幕閱讀器在閱讀時，將會讀出「心形」這個詞。

如果上述內容僅用於裝飾（參見#裝飾），則無需遵守上述規則。

非文字形式的可互動組件或表意內容

在一些頁面上（特別是在一些小工具中），會有一些沒有使用文字而僅使用圖示的可互動組件，這在求聞百科的網站外觀上也很常見。例如，用一個鈴鐺的圖示表示「通知」按鈕，用一個放大鏡的圖示表示「搜尋」按鈕。對於這類可互動組件，務必做到以下幾點：

• 提供相應的title或name屬性（或其他有關的HTML語意）來表明其目的，使得使用者在把滑鼠懸停在該可互動組件上或將焦點聚集在該可互動組件時，能夠看到其文字描述，這樣就不會導致看到沒有文字的可互動組件後產生困惑。對於有可見的文字描述的可互動組件，也建議如此，但這不一定是必需的。
• 提供相應的可螢幕閱讀的內容，這樣螢幕閱讀器在閱讀此可互動組件時，能夠直接將其內容讀出來。如果相應內容不是由<button>或類似標籤組成的，提供可螢幕閱讀的內容的方法請見下文。

此外，還有一些內容，需要表達相應的意思，但是它並沒有相應的文字。例如，在某網站上，需要用顏色來表示各個功能的支持情況，於是用以下的方式來表示各個顏色與支持情況的對應關係：

• 
  = 支持
• 
  = 不支持
• 
  = 部分支持

有完整視覺和色覺的人可以知道，上面這個內容表達的意思是，綠色表示支持，紅色表示不支持，棕黃色表示的是部分支持。等號前的色塊表示了這一個顏色。色盲使用者無法辨識顏色，但仍可透過其顏色中的條紋，看出無條紋的表示支持，斜條紋的表示不支持，縱向條紋的表示部分支持。但如果是使用螢幕閱讀器的使用者，就會感到困惑：螢幕閱讀器說，「等於支持，等於不支持，等於部分支持」，這是啥意思？實際上，在上面這個例子中，我們使用了空白的<span>...</span>來表述顏色，但它沒有內容，螢幕閱讀器不知道怎麼讀。

因此，為了照顧螢幕閱讀器，我們需要在裡面加入不會彩現在螢幕但是會被螢幕閱讀器閱讀出來的內容，例如：

• 綠色 = 支持
• 紅色 = 不支持
• 棕黃色 = 部分支持

從表面上看，這個例子和前面的那個例子沒有區別。但是如果啟用螢幕閱讀器，就會發現，螢幕閱讀器讀的是「綠色等於支持，紅色等於不支持，棕黃色等於部分支持」。這樣，使用螢幕閱讀器的盲人也能夠知道這些內容所表達的意思。

使元素可被螢幕閱讀器閱讀但不彩現在螢幕上的方法

在前面提到的這個例子中，我們給元素添加了文字，並使得這些文字不彩現在螢幕上，但能夠被螢幕閱讀器閱讀。display: none和visibility: hidden會使得內容隱藏後也不會被螢幕閱讀器閱讀，因此不符合其要求。以下幾種方法可以使內容不會彩現在螢幕上但仍能被螢幕閱讀器閱讀：

• 使用text-indent: -99999px，這是最簡單粗暴的方法，但是非常有效。例如：這個內容不會顯示但是會被讀出來。
• 使用clip-path: inset(50%)。這也會使得元素不顯示，但是不影響螢幕閱讀器。例如：
  這個內容不會顯示但是會被讀出來。

需要注意，以下幾種方式不建議：

• 使用position: absolute; opacity: 0：這樣的內容在不顯示的同時，仍然會被滑鼠像在選擇文字一樣選中，影響對其他普通內容的選擇，還可能導致困惑。
• 將元素移動到非常遠的位置，例如position: absolute; left: 99999px或position: fixed; left: 200%：這會使得元素的邊界無法正常顯示。螢幕閱讀器在閱讀內容時，會突出顯示正在閱讀的內容的邊框，而在閱讀此內容時，邊框消失了，或者螢幕捲動到了異常的位置，因此這種方式也會產生困惑。

僅裝飾的內容

僅裝飾的內容不需要被螢幕閱讀器閱讀，或者以其他形式被輔助技術辨識，否則，反而可能會產生困惑。對於這類內容，如果其有文字，可以給相應的元素添加aria-hidden="true"以從輔助功能樹中隱藏。

文字格式

刪除線

在條目頁面中，請勿使用刪除線划去任何文字。如有需要，請使用「<!--」和「-->」注釋處理，或直接移除。

請避免在導航框或者類似的列表、表格中，使用僅刪除線來表示某計畫已失效。可以直接透過括注文字的形式來表明，也可以兩者都有。例如（在導航框中）：

• 錯誤：張江有軌電車
• 正確：張江有軌電車（已停運）
• 正確：張江有軌電車（已停運）

螢幕閱讀器通常不支持呈現文字屬性（粗體、斜體、底線）乃至語意文字屬性（強調、重要、文字刪除），因此帶刪除線的文字和正常文字閱讀效果相同。此外，在上述使用刪除線的情形中，請使用<del>...</del>，不得使用<s>...</s>，後者違背了現代網頁設計中樣式與HTML標籤語意分離的原則。

如果條目內有錯誤的內容，不要使用刪除線。這些內容應該使用注釋處理，或者直接移除；你也可以用某個行內清理模板進行標記，並在討論頁上提出意見。

字型大小

謹慎使用縮小和放大字型。字號通常是由頁面元素自動決定，如標題、列表標題、標準模板。改變字號時，應當用原字型的百分比大小（相對大小）描述，而不用像素或點數描述絕對大小，以便利預設使用較大字型的使用者。

避免在資訊框、導航模板和參考章節等已經為小字型元素的地方再次使用縮小字型。所以，<small>...</small>標籤，及{{small}}、{{smaller}}等模板，不應用於該些頁面元素的純文字。無論何時都不應該使用比85%（或11像素）還小的字型。注意HTML的<small>...</small>標籤還有「小字條款」的含義，不用作字型風格變化。

語言元資料

主頁面：Template:Lang/doc § 使用理由

非中文單詞或短語應以使用ISO 639語言代碼的模板連結：{{lang}}包圍，這樣可以有助於螢幕閱讀器閱讀，同時提高內容的穩健性，因為搜尋引擎和人工智慧可能需要辨識內容的語言以正好地理解內容，此外系統還可以根據這個來選擇合適的字型。例如：

• 正確的例子：國民議會，法語稱為{{lang|fr|Assemblée nationale}}，是法國的機構，與參議院一起組成第五共和國議會。
• 錯誤的例子：國民議會，法語稱為Assemblée nationale，

或者，您也可以使用{{lang-fr|Assemblée nationale}}，例如：

• 正確的例子：國民議會（{{lang-fr|Assemblée nationale}}）是法國的機構，與參議院一起組成第五共和國議會。
• 顯示效果：國民議會（法語：Assemblée nationale）是法國的機構，與參議院一起組成第五共和國議會。

模板連結：{{lang}}或者以「lang-」開頭的一系列模板均可以使語音合成器以正確的語言發音。

此外，在求聞百科中，如果對於日文內容如不使用上述模板，那麼日本漢字可能會被視作中文錯誤簡繁轉換。

連結

連結（包括內部連結和外部連結）的顯示文字應該能夠描述連結的目的，而不是「點此」「此處」「檢視更多」這樣的文字。連結是可互動元素，如果使用螢幕閱讀器的使用者使用Tab鍵在連結之間進行導航，聽到的卻是「連結：點此」「連結：點擊此處」，就會感到困惑。因此，連結的顯示文字應該能夠表現出連結的主要內容。連結的目的應該要能夠僅從連結的顯示文字中就推斷出來。

例如：

• 錯誤：點擊此處以了解如何使用表格（僅從「此處」二字無法推斷出連結的目的）。
• 正確：請參考Help:表格以了解如何使用表格（從顯示文字中可以推斷出，連結的目的是一個叫做「Help:表格」的頁面）。
• 正確：點擊此處以了解如何使用表格（連結文字是整個句子，能夠表現出連結的目的）。

顏色

顏色最常用於表現某個內容的狀態，吸引讀者的注意，或者顏色是與條目的內容相關的。此外，一些內容的顏色可能會起到裝飾性作用。但是，使用顏色時，需注意無法看到有關顏色的讀者，以及確保能夠看到有關顏色的讀者能夠清楚地將其辨別出來。

顏色不是傳達資訊的唯一方式

任何內容都不能夠僅透過顏色的方式來表達。這是因為，不是所有的讀者都能夠準確地看到內容的顏色。一些人可能會需要透過螢幕閱讀器或者盲文來閱讀其內容，或者其顯示媒介本身就是沒有彩色的，或者讀者無法觀察到顏色。因此，在使用顏色的同時，務必使用非顏色的方式來相等地表達其內容。

例如：

某活動成員列表

名字		年齡	籍貫	居住地
	甲	15	蘇州	嘉興
	乙	16	南京	滁州
	丙	15	上饒	上饒
	丁	18	烏魯木齊	上海
	戊	17	台北	郴州
	己	14	台州	溫州
說明：紅隊、綠隊、藍隊

上面這個表格列舉了某活動內各個成員的基本資訊，以及其分組情況，不同的分組是透過顏色來展示的。名字前面的儲存格的顏色表示了該成員所屬的隊伍。但是，其隊伍的資訊只有擁有正常的視覺與色覺在彩色顯示器上閱讀時，才能夠理解，對於色盲或者使用螢幕閱讀器或盲文的使用者而言難以理解，且如果不理解其顏色，表格底部的：「說明：紅隊、綠隊、藍隊」更是令人費解。因此，我們可以對上述表格進行如下的修改：

某活動成員列表（修改後）

名字		隊伍	年齡	籍貫	居住地
	甲	紅隊	15	蘇州	嘉興
	乙	藍隊	16	南京	滁州
	丙	紅隊	15	上饒	上饒
	丁	綠隊	18	烏魯木齊	上海
	戊	藍隊	17	台北	郴州
	己	綠隊	14	台州	溫州

這個，即使是色盲使用者或者使用螢幕閱讀器或盲文的盲人，也能夠知道每個成員是屬於哪個隊伍的。同樣，以文字形式將其內容表達出來，也有助於搜尋引擎和人工智慧工具的理解和最佳化。

對比度

任何文字或者其他形式內容的前景色和背景色都應該有足夠的對比度。例如，不要在淺色的背景上使用淺色的文字，或者在深色的背景上使用深色的文字，否則這些內容看不清，或者即使你能看清楚，但是部分存在視力障礙的人無法看清楚。例如：

說明	效果	對比度
白色背景黃色文字	白色背景黃色文字	1.0738392309266
白色背景灰色文字	白色背景灰色文字	3.9494396480491
紅色背景綠色文字	紅色背景綠色文字	1.2848399716615
青色背景黑色文字	青色背景黑色文字	16.748

對於擁有視力的讀者，觀察上面這個表格，可以發現：第一行的白色和黃色非常接近，因此在白色背景上的黃色文字非常不明顯，基本難以看清。第二行大多數讀者可以看清，但是如果讀者有視力問題，可能仍會遇到一些困難，需要將內容放大才能夠看清楚裡面的內容。第三行或許也能夠看清，但如果讀者因色盲或者色弱而難以區分紅色和綠色，則在閱讀時可能存在一定的困難。而第四行，青色是比較淺的顏色，與黑色形成了一定的對比度，因此是能夠看清楚的。

根據Web內容無障礙指南2.1的標準，文字的前景色與背景色應達到如下標準（有兩種標準）：

• 最小標準（AA級）：文字的對比度不小於4.5，其中大文字的對比度不小於3。
• 增強標準（AAA級）：文字的對比度不小於7，其中大文字的對比度不小於4.5。

根據上述標準，在上面的例子中，只有「青色背景黑色文字」是符合標準的，且符合了AAA級標準。

對比度的計算方式

根據Web內容無障礙指南2.1，文字的對比度（英語：contrast ratio）的計算方式如下：

對比度 = $\dfrac{L1 + 0.05}{L2 + 0.05}$，其中$L1$和$L2$表示兩個顏色的相對亮度。

對於sRGB顏色空間，顏色的相對亮度（英語：relative luminance）的計算公式為:

$L = 0.2126 * R + 0.7152 * G + 0.0722 * B$

其中，R、G、B的定義如下：

• 如果$RsRGB \le 0.04045$，那麼$R = \frac{RsRGB}{12.92}$，否則$R = \left(\frac{RsRGB+0.055}{1.055}\right) ^ {2.4}$
• 如果$GsRGB \le 0.04045$，那麼$G = \frac{GsRGB}{12.92}$，否則$G = \left(\frac{GsRGB+0.055}{1.055}\right) ^ {2.4}$
• 如果$BsRGB \le 0.04045$，那麼$B = \frac{BsRGB}{12.92}$，否則$B = \left(\frac{BsRGB+0.055}{1.055}\right) ^ {2.4}$

其中，RsRGB、GsRGB、BsRGB的定義如下：

• $RsRGB = R8bit \div 255$
• $GsRGB = G8bit \div 255$
• $BsRGB = B8bit \div 255$

如果條目過度使用顏色，但你不知道如何親自修復，則可請其他編輯協助。請將模板連結：{{Overcolored}}放置於條目頂部。

需要準確表達的顏色

有些情況下，一些條目需要將一些顏色進行描述，使用了這個顏色，例如，下面這個例子直接給文字上了顏色：

武漢軌道交通2號線的標誌色為梅花紅。

這種做法有幾個缺點：

• 梅花紅色是比較淡的顏色，在淺色的背景上顯示得不是很清楚。
• 在深色模式下，受到其機制的影響，梅花紅會被扭曲成深紅色，導致與實際情況不符。
• 如果顏色正好接近紅色、藍色或者紫色，則容易被誤以為是連結。

一種可行的方案，是使用模板連結：{{color box}}或模板連結：{{color block}}模板，例如：

武漢軌道交通2號線的標誌色為 梅花紅 。

武漢軌道交通2號線的標誌色為
梅花紅。

根據此模板的運作機制，模板連結：{{color box}}模板會自動選擇一個對比度高的顏色用於文字的顯示。同時，由於使用了mw-no-invert類，在深色模式下，顏色會被糾正為原來的顏色。其中，第二種寫法是更好的，因為它可以確保文字的部分與背景保持應有的對比度。

除此之外，還有很多用於裝飾的場合也會使用需要準確表達的顏色。例如，在與軌道交通線路有關的模板中，通常會以裝飾為目的而使用線路標誌色，這些顏色也應該透過增加mw-no-invert類的方式，避免其在深色模式下被轉換。

列表

參見：Help:列表和Qiuwen:格式手冊/列表

在頁面中往往會出現各種形式的列表，用於列舉一系列的內容。列表不僅提供了一個外觀，在代碼層面，不同列表的使用還代表了一定的語意。因此，使用列表時，應當遵循相應的規範。

不要拆散列表

不要在列表項間用空行或表格切斷。如果使用空格或者其他內容將列表切斷，那麼將會變成多個列表，也就是說一個列表結束後開戶了新的列表。例如：

您所輸入的

* 白玫瑰
* 黃玫瑰

* 粉紅玫瑰

* 紅玫瑰

您所看到的

• 白玫瑰
• 黃玫瑰

• 粉紅玫瑰

• 紅玫瑰

可能你已經看出來了，這個列表的各項之間的顯示間距有問題。實際上這個列表是多個列表組成的。如果使用螢幕閱讀器（以Windows系統的講述人為例），那麼螢幕閱讀器會這麼讀：

輸入列表，2的1，計畫符號，白玫瑰，2的2，計畫符號，黃玫瑰，登出列表。

輸入列表，1的1，計畫符號，粉紅玫瑰，登出列表。

輸入列表，1的1，計畫符號，紅玫瑰，登出列表。

正確的做法應該是將一個列表連貫到底，例如：

您所輸入的

* 白玫瑰
* 黄玫瑰
* 粉红玫瑰
* 红玫瑰

您所看到的

• 白玫瑰
• 黃玫瑰
• 粉紅玫瑰
• 紅玫瑰

在討論頁中，也是遵循相同的規則，不要在討論串中切斷列表，下面這個例子就是錯誤的：

您所輸入的

* 支持，我喜歡此想法。——User:Example 

** 疑問：你為何喜歡？——User:Example2

您所看到的

• 支持，我喜歡此想法。——User:Example

• • 疑問：你為何喜歡？——User:Example2

不要中途改換列表形式

請勿在同一個、同一層級的列表中，混用不用種類的列表，即在原始碼中，中途更換行首的符號（分號、星號、井號）。在討論頁，如果您是在原始碼模式下回覆他人的留言，若對方行首混合用符號，則需要先複製該串符號，後另加一個符號，以正確縮排。開新話題，則取消縮排即可（等同開一個新的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:Example 
*: 疑問：你為何喜歡？——User:Example2
*:: 這似乎合乎求聞百科的宗旨和基本原則。——User:Example

您所看到的

• 支持，我喜歡此想法。——User:Example

  疑問：你為何喜歡？——User:Example2

  這似乎合乎求聞百科的宗旨和基本原則。——User:Example

請勿在中途改換為不同的列表格式

無序列表改換為定義列表的錯誤例子1

您所輸入的

* 支持，我喜歡此想法。—User:Example 
:: 疑問：你為何喜歡？—User:Example2

您所看到的

• 支持，我喜歡此想法。—User:Example

疑問：你為何喜歡？—User:Example2

無序列表改換為定義列表的錯誤例子2

您所輸入的

* 支持，我喜歡此想法。—User:Example 
:* 疑問：你為何喜歡？—User:Example2

您所看到的

• 支持，我喜歡此想法。—User:Example

• 疑問：你為何喜歡？—User:Example2

不要越級

一級列表的下一級是二級列表，然後是三級，不要從一級列表跳到三級列表。例如，下面這個做法就是錯誤的：

您所輸入的

* 兰花
* 玫瑰
*** 白玫瑰
*** 黄玫瑰
*** 粉红玫瑰
*** 红玫瑰
* 牡丹
* 杜鹃

您所看到的

• 蘭花
• 玫瑰
  • • 白玫瑰
    • 黃玫瑰
    • 粉紅玫瑰
    • 紅玫瑰
• 牡丹
• 杜鵑

您所輸入的

* 支持，我喜歡此想法。—User:Example 
*** 疑問：你為何喜歡？—User:Example2

您所看到的

• 支持，我喜歡此想法。—User:Example
  • • 疑問：你為何喜歡？—User:Example2

列表項中的多個段落

MediaWiki的列表標記與普通的MediaWiki段落標記不相容。若要在列表項中放置多個段落，請使用模板連結：{{pb}}模板將其分開。

使用模板链接：{{pb}}的例子

您所輸入的

* 這是列表中的第一項的第一行。{{pb}}這是列表第一項中的第二行。
* 這是列表中的第二項。

您所看到的

• 這是列表中的第一項的第一行。
  這是列表第一項中的第二行。
• 這是列表中的第二項。

換行字元（<br />）是在段落內折行，而不是開啟新的段落，因此不能用來形成新段落。

使用<br />的例子

您所輸入的

* 這是列表中的第一項。<br>這是列表第一項中的第二行，但行前有一個換行字元。
* 這是列表中的第二項。

您所看到的

• 這是列表中的第一項。
  這是列表第一項中的第二行，但行前有一個換行字元。
• 這是列表中的第二項。

不要混用列表符號和半形冒號做縮排排版，因為這會導致一個列表被分裂為三個。從外觀上看，似乎是開啟了新的段落，而且對齊的，但是這在語意上是不正確的，且容易產生困惑。

混用的錯誤例子

您所輸入的

* 這是第一個列表中的第一項。
: 這是另一個定義列表。
* 這是第三個列表中的第一項。

您所看到的

• 這是第一個列表中的第一項。

這是另一個定義列表。

• 這是第三個列表中的第一項。

可以使用HTML列表模板之一，以確保列表不會意外分開。若列表中包括塊元素（如<pre>...</pre>、表格等），則這一技巧非常有用。

使用列表模板的例子

您所輸入的

{{ordered list
|1=這是列表的第一項的第一段。

這是列表的第二項的第二段。
|2=這是列表的第二項，然後有一個表格：

<table class="wikitable"><tr><td>這是一個表格。</td></tr></table>
|3=這是列表的第三項，然後有一段代碼：
<syntaxhighlight lang="java">
public class ExampleClass implements ModInitializer {
  @Override
  public void onInitialize() {
    System.out.println("Hello world!");
  }
}
</syntaxhighlight>
|4=這是列表的第四項。
}}

您所看到的

1. 這是列表的第一項的第一段。 這是列表的第二項的第二段。
2. 這是列表的第二項，然後有一個表格：

   這是一個表格。

3. 這是列表的第三項，然後有一段代碼：

   public class ExampleClass implements ModInitializer {
     @Override
     public void onInitialize() {
       System.out.println("Hello world!");
     }
   }
   

4. 這是列表的第四項。

縮排

多行內容的縮排方法是模板模板链接：{{block indent}}，使用CSS實現縮排。不要濫用<blockquote>...</blockquote>元素或使用它的模板（如模板链接：{{Quote}}）進行視覺縮排，這些標記、模板只用於條目中的直接引語。

您所輸入的

{{block indent|
這是第一行。

這是第二行。
}}
參照未縮排的文字。

您所看到的

這是第一行。

這是第二行。

參照未縮排的文字。

您所輸入的

<blockquote>
这是第一行。

这是第二行。
</blockquote>
参照未缩进的文字。

您所看到的

這是第一行。

這是第二行。

參照未縮排的文字。

以英文冒號起頭的行會縮排。比如這種用法會在討論頁的往來討論中表示回覆。該縮排是使用了HTML的定義列表。這在可親和性和語意學上都並不理想，但目前卻廣泛應用。縮排行之間不應插入空行，因為這表示列表的結束並開啟新列表。如果確實需要空行，請插入一個以同樣數量冒號起頭的額外行。

MediaWiki解析器將帶有行首冒號（:）的所在行標記為HTML描述列表（<dl>...</dl>）的一部分（<dd>...</dd>）。在大多數網路瀏覽器中，其視覺效果是縮排行。例如，這用於表示討論頁中討論串中的回覆。然而，僅包含此標記就缺少描述列表中所需的<dt>元素（語意為「術語」），而<dd>元素（語意為「描述」「定義」）與該元素相關。透過檢查傳送到瀏覽器的代碼可以看出，這會導致HTML損壞（即驗證失敗）。結果是，螢幕閱讀器等輔助技術會報出一個實際上不存在的描述列表，這讓任何不習慣MediaWiki所輸出非標準HTML的存取者感到困惑。這並不利於無障礙存取，不符合HTML語意原則，也不利於其他使用者對內容加以利用。儘管它會給螢幕閱讀器的使用者帶來問題，但在MediaWiki中很常用。

空行不能放在冒號縮排的文字行之間，尤其是在文章內容中。這被軟體解釋為標記列表的結束和新列表的開始。如果需要空行，請在其上放置與空行下方文字前相同數量的冒號，例如：

您所輸入的

: 此處有文字。
: <br>
: 更多文字。

您所看到的

此處有文字。

更多文字。

無計畫符號列表

如果需要讓列表沒有計畫符號，可使用模板模板連結：{{plainlist}}和模板連結：{{unbulleted list}}以提供語意，表明這是一個列表，而非透過<br />換行。您也可以給相應的元素添加plainlist類。例如：

使用模板連結：{{plainlist}}模板的例子

您所輸入的

{{plainlist
|* 白玫瑰
* 黃玫瑰
* 粉紅玫瑰
* 紅玫瑰}}

您所看到的

• 白玫瑰
• 黃玫瑰
• 粉紅玫瑰
• 紅玫瑰

使用模板連結：{{unbulleted list}}的例子

您所輸入的

{{unbulleted list
|白玫瑰
|黃玫瑰
|粉紅玫瑰
|紅玫瑰}}

您所看到的

• 白玫瑰
• 黃玫瑰
• 粉紅玫瑰
• 紅玫瑰

使用<br />的錯誤例子

您所輸入的

白玫瑰<br>
黃玫瑰<br>
粉紅玫瑰<br>
紅玫瑰

您所看到的

白玫瑰
黃玫瑰
粉紅玫瑰
紅玫瑰

水平列表

對於頁面中橫向列出的，以及資訊框等表格中橫向列出的列表，請使用模板連結：{{flatlist}}和模板連結：{{hlist}}模板以提供語意，表明這是一個列表，同時這對內容的排版也會有一定的最佳化。

使用模板連結：{{flatlist}}的例子

您所輸入的

{{flatlist|
* [[东方绿舟站]]
* [[朱家角站]]
* [[淀山湖大道站]]
* [[漕盈路站]]
* ……}}

您所看到的

• 東方綠舟站
• 朱家角站
• 澱山湖大道站
• 漕盈路站
• ……

列表標題

參見： § PSEUDOHEAD

不應使用半形分號在列表前生成「偽標題」。語意上，分號開頭的列表應接續一組以半形冒號開頭的列表，以表示術語表的標題及其條目。若要表示一組無序列表，應使用章節標記。

錯誤例子：使用偽標題

您所輸入的

; 稀有气体
* 氦（He）
* 氖（Ne）
* 氩（Ar）
* 氪（Kr）
* 氙（Xe）
* 氡（Rn；放射性）
* 鿫（Og；人工合成，存疑）

您所看到的

稀有氣體

• 氦（He）
• 氖（Ne）
• 氬（Ar）
• 氪（Kr）
• 氙（Xe）
• 氡（Rn；放射性）
• 鿫（Og；人工合成，存疑）

正確例子：使用定義列表標題

您所輸入的

; 稀有气体
: 氦（He）
: 氖（Ne）
: 氩（Ar）
: 氪（Kr）
: 氙（Xe）
: 氡（Rn；放射性）
: 鿫（Og；人工合成，存疑）

您所看到的

稀有氣體

氦（He）

氖（Ne）

氬（Ar）

氪（Kr）

氙（Xe）

氡（Rn；放射性）

鿫（Og；人工合成，存疑）

正確例子：使用章節標題

您所輸入的

=== 稀有气体 ===
* 氦（He）
* 氖（Ne）
* 氩（Ar）
* 氪（Kr）
* 氙（Xe）
* 氡（Rn；放射性）
* 鿫（Og；人工合成，存疑）

您所看到的

稀有氣體

• 氦（He）
• 氖（Ne）
• 氬（Ar）
• 氪（Kr）
• 氙（Xe）
• 氡（Rn；放射性）
• 鿫（Og；人工合成，存疑）

表格

參見：Help:表格

表格可以用來呈現二維的資料。在HTML中，表格是具有一定的語意的。因此，表格不僅需要在視覺上正確，還應該有恰當的語意。

使用標題儲存格

標題儲存格內建了加粗、居中的樣式，同時還具有相應的語意。因此，請恰當地使用標題儲存格。在HTML中，它代表<th>...</th>元素。而在wikitext表格語法中，它是使用!（感嘆號）來實現的。

正確使用標題儲存格的例子

您所輸入的

{| class="wikitable"
! 標題儲存格1 !! 標題儲存格2
|-
| 資料1-1 || 資料1-2
|-
| 資料2-1 || 資料2-2
|}

您所看到的

標題儲存格1	標題儲存格2
資料1-1	資料1-2
資料2-1	資料2-2

請不要僅透過樣式來使得一些儲存格看上去像是標題儲存格。

使用樣式偽造標題儲存格的錯誤例子

您所輸入的

{| class="wikitable"
| style="text-align: center" | '''標題儲存格1'''
| style="text-align: center" | '''標題儲存格2'''
|-
| 資料1-1 || 資料1-2
|-
| 資料2-1 || 資料2-2
|}

您所看到的

標題儲存格1	標題儲存格2
資料1-1	資料1-2
資料2-1	資料2-2

如有可能，您可以使用scope="col"或者scope="row"來更加清晰地表明這個標題儲存格的用途，這有助於螢幕閱讀器更好地閱讀這個表格。

使用scope參數的正確例子

您所輸入的

{| class="wikitable"
! scope="col" | 列標題0
! scope="col" | 列標題1
! scope="col" | 列標題2
|-
! scope="row" | 行標題1
| 資料1-1 || 資料1-2
|-
! scope="row" | 行標題2
| 資料2-1 || 資料2-2
|}

您所看到的

列標題0	列標題1	列標題2
行標題1	資料1-1	資料1-2
行標題2	資料2-1	資料2-2

表格標題

表格標題是顯示在表格最上方的文字描述整個表格的內容。在HTML中，表格標題是<caption>...</caption>標籤。在wikitext中，表格標題是以|+（管道符號和一個加號）開始的內容。

使用表格標題的例子

您所輸入的

{| class="wikitable"
|+ 表格標題
! 標題儲存格1 !! 標題儲存格2
|-
| 資料1-1 || 資料1-2
|-
| 資料2-1 || 資料2-2
|}

您所看到的

表格標題

標題儲存格1	標題儲存格2
資料1-1	資料1-2
資料2-1	資料2-2

不建議使用橫跨一整行的儲存格來表示一個表格標題，因為這語意不太正確。

偽造表格標題的例子

您所輸入的

{| class="wikitable"
! colspan="2" | 表格標題
|-
! 標題儲存格1 !! 標題儲存格2
|-
| 資料1-1 || 資料1-2
|-
| 資料2-1 || 資料2-2
|}

您所看到的

表格標題
標題儲存格1	標題儲存格2
資料1-1	資料1-2
資料2-1	資料2-2

排版表格

請避免使用表格做純排版用途。表格是表格，並不是用來排版的。如有可能，請使用更具適應性的<div>...</div>或者style屬性。如果需要對內容排版，請使用flex或grid布局，而不是使用表格。

如確實需要使用表格進行布局，請添加role="presentation"屬性，這樣螢幕閱讀器就不會將其視為一個表格。例如：

使用表格進行布局的例子

您所輸入的

{| style="margin:auto; text-align:center; border-spacing: 1em 0.25em" role="presentation"
| colspan="2" style="font-weight: bold" | 詩經
|-
| 昔我往矣 || 楊柳依依
|-
| 今我來思 || 雨雪霏霏
|}

您所看到的

詩經 昔我往矣 楊柳依依 今我來思 雨雪霏霏

這樣，螢幕閱讀器在閱讀這首詩的時候，就會直接說這首詩的標題和內容，而不是將其說成是一個表格。

上面這個例子基本上等價於如下的grid布局：

使用grid布局的例子

您所輸入的

<div style="text-align: center; font-weight: bold">詩經</div>
<div style="text-align: center; margin: auto; display: grid; grid-template-columns: auto auto; gap: 0.25em 1em; width: fit-content">
<div>昔我往矣</div>
<div>楊柳依依</div>
<div>今我來思</div>
<div>雨雪霏霏</div>
</div>

您所看到的

詩經

昔我往矣

楊柳依依

今我來思

雨雪霏霏

圖像

更多資訊：Qiuwen:格式手冊 § 圖像

圖像除了裝飾之外，都應當有替代文字（英語：alternative text），供沒有載入圖片或者無法看到圖片的人使用。替代文字應該要能夠描述圖片的內容。

避免用圖片替代資料圖表，除了資料圖表中的絕大多數內容都可以透過替代文字表示出來。

為了能夠適應不同的場景，請避免使用固定的圖片大小。

請不要使用「左圖」或「右圖」的描述，除非能夠確保圖片確實是在左邊或者右邊。這是因為，當頁面內容顯示時，會為不同的顯示器幕進行調整，當使用較小的螢幕（例如手機）時，圖片並不會顯示在左邊或者右邊。而且，「左圖」「右圖」的表述對於輔助技術來說也是沒有意義的。

動畫、影片與音訊

更多資訊：Qiuwen:媒體幫助

動畫

出於無障礙考慮，動畫（GIF：圖形交換格式）應該滿足以下兩者之一：

• 持續時間不超過5秒（否則會變成純裝飾元素），或者
• 有控制模組（停止、暫停、播放）。

總而言之，大多數動畫GIF應當能轉換為影片。

此外，動畫在任何一秒鐘內產生的閃光嚴禁超過三次，否則這將違反不干涉原則，導致光敏癲癇發作。

視聽內容

視聽內容可以加入計時文字格式的字幕。對於影片內容，為便於聽力障礙者使用，可以加入隱藏字幕。隱藏字幕以文字形式提供了關於聲音的全部重要資訊。其可以包含在對話、聲音（自然或人聲）、環境與背景、人與動物的動作表情，以及文字或圖形。

對於聲音內容而言，可以很方便地為演講、歌詞和對話等加入字幕。

可互動組件

可互動組件通常由系統介面或者外觀提供。在求聞百科，可互動組件往往是由小工具產生的。對於這類可互動組件，應當：

1. 不僅可以使用滑鼠點擊來啟用，還可以透過鍵盤來啟用。例如，在不使用滑鼠的情況下，使用Tab鍵選擇到這個組件，然後按空格（Space）或者Enter（Enter）鍵，也能夠觸發該功能。 例如，下面這個代碼中，此元素不具備鍵盤可操作性：

   <button id="myButton">这是一个按钮</button>
   <script>
   $('#myButton').click(event => alert("你好，世界！"));
   </script>
   

   可以進行如下更改：

   <button id="myButton">这是一个按钮</button>
   <script>
   let eventHandler = (event) => {
       if (event.type === 'keydown' && event.key !== 'Enter' && event.key !== ' ') {
           return;
       }
       event.preventDefault();
       alert("你好，世界！");
   }
   $('#myButton').click(eventHandler);
   $('#myButton').keydown(eventHandler);
   </script>
   

2. 透過Tab鍵對元素進行選中的順序應當於相應內容的視覺上的順序保持一致，通常來說它們在代碼中也應當保持這樣的順序。
3. 對於有標籤的小型組件（例如單選框、核取方塊），應當將其置於使用的<label>...</label>標籤中，或者使用相應的for參數，確保當點擊的是標籤文字而非該組件本身時，也能夠選擇該組件。例如：

   错误写法：
   <input type="radio" name="agree" />设为默认
   
   正确写法：
   <label><input type="radio" name="agree" />设为默认</label>
   

4. 對於彈出式選單，該選單不應該只在滑鼠懸浮在相應元素上時才顯示，還應該提供一種機制，使其能夠在透過鍵盤或者滑鼠操作的情況下，即使沒有將滑鼠懸浮在有關的元素上，也能夠顯示彈出選單。如有可能，還應當提供相應的語意。
5. 可互動組件必須要有一個無障礙名稱（英語：accessible name）。請看下面這個例子，在例子中的錯誤寫法中，一些人能夠知道該按鈕使用字母「X」代表關閉，但是輔助功能只會說「X按鈕」，對於視覺受限的人而言，可能會產生困惑，因此需要讓輔助技術將其描述為「關閉」。

   错误写法：
   <button id="closeButton">X</button>
   
   正确写法：
   <button id="closeButton">关闭</button>
   <button id="closeButton" aria-label="关闭">X</button>
   

參考資料

• Web Content Accessibility Guidelines (WCAG) 2.1 [網頁內容無障礙指南（WCAG）2.1]. W3C. 2018 （英語）. 
  • 另請參見根據勘誤表進行勘誤的中文版本（非官方，僅供參考）。
• Web信息无障碍通用设计规范介绍介绍. 網際網路應用適老化及無障礙標準體系. 2021 （簡體中文（中國大陸））. 
• 网站设计无障碍技术要求介绍. 網際網路應用適老化及無障礙標準體系. 2012 （簡體中文（中國大陸））. 
• HTML 4.01 Specification. W3C. 1999.