跳转到内容

Wikipedia:格式手冊/無障礙:修订间差异

维基百科,自由的百科全书
删除的内容 添加的内容
留言 | 贡献
格式手册不合格式;基于格式手册修正日期格式,由Javascript驱动
Cewbot留言 | 贡献
清理跨語言連結刪除線成為內部連結:編輯摘要的紅色內部連結乃正常現象,經繁簡轉換後存在,非bot錯誤編輯 (本次機械人作業已完成77.1%)
 
(未显示18个用户的46个中间版本)
第1行: 第1行:
{{NoteTA|G1=IT}}
{{NoteTA|G1=IT}}
<!--{{hatnote|本页面是无障碍的编辑指南。关于专题,请见{{tsl|en|Wikipedia:WikiProject Accessibility|WikiProject:无障碍|无障碍专题}}}}-->
{{style-guideline-en|WP:MOS/ACCESS|WP:ACCESS|WP:ACCESSIBILITY}}
{{style-guideline-en|MOS:ACCESS|MOS:A11Y|MOS:无障碍}}
{{style}}
{{style|content}}
{{expand English}}


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

2006年1月14日,维基媒体基金会理事会提议了以下[[wmf:Resolution:Nondiscrimination|反歧视政策]]:{{tq|“维基媒体基金会禁止基于种族、肤色、性别、宗教、民族血统、年龄、残疾、性取向或任何其他受法律保护的特征而歧视现有或未来的用户和雇员。维基媒体基金会承诺遵守机会平等的原则,特别是在雇员关系的所有方面,包括就业、工资管理、雇员发展、晋升和调动”}},並断称,{{tq|“维基媒体基金会的官员或工作人员或任何维基媒体项目的地方政策不得规避、侵蚀或忽视”}}此政策。


== 條目結構 ==
== 條目結構 ==


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


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


=== 章節標題 ===
=== 章節標題 ===
{{Shortcut|MOS:GOODHEAD|MOS:BADHEAD}}
章節標題應該是具體描述,且順序一致(參見—參考文獻—擴展閱讀—外部連結)。


章節標題應該嵌套遞進,以二級(<code>==</code>)起頭,接下來是三級(<code>===</code>)等(不應該用自動生成的一級標題),請勿隨機使用章節標題層級(比如選擇加重,這不是標題的目的),也不要跳級。
章節標題應該是描述性的,且順序一致(參見—參考文獻—擴展閱讀—外部連結)。

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


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


{| class="wikitable"
{| class="wikitable"
第61行: 第65行:
<code>===子章節===</code> ''&#91;三級&#93;''
<code>===子章節===</code> ''&#91;三級&#93;''
<code><nowiki>'''子章節'''</nowiki></code> ''&#91;偽章節標題&#93;''
<code><nowiki>'''子章節'''</nowiki></code> ''&#91;偽章節標題&#93;''
<code>==章節==</code> ''&#91;2&#93;''
<code>==章節==</code> ''&#91;二級&#93;''
<code>===子章節===</code> ''&#91;3&#93;''
<code>===子章節===</code> ''&#91;三級&#93;''
<code>;子子章節</code> ''&#91;偽章節標題&#93;''
<code>;子子章節</code> ''&#91;偽章節標題&#93;''
<code>==章節==</code> ''&#91;二級&#93;''
<code>==章節==</code> ''&#91;二級&#93;''
<code><nowiki>==<small>子章節</small>==</nowiki></code> ''&#91;偽三級標題&#93;''</poem>
<code><nowiki>==<small>子章節</small>==</nowiki></code> ''&#91;偽三級標題&#93;''</poem>
|}
|}
{{Anchor|偽章節標題}}{{Shortcut|MOS:PSEUDOHEAD}}
請勿濫用行首半形分號和粗體來「偽裝」標題,行首半形分號是[[MOS:LIST#定義列表|定義列表]]專用。[[螢幕閱讀器|讀屏器]]和其他輔助工具僅能使用有章節標記(半形等號)的標題來導航定位。如欲縮小目錄,請用{{t|TOC limit}}。在{{t|TOC limit}}因為條目其他地方有低層級標題而無用的情況,才可妥協用粗體,但要先將子子子標題用粗體取代,因為這對讀屏器使用者構成的滋擾最少。必先窮盡其他解決方案,才可以使用偽標題。此為罕見情況。
{| class="wikitable"
|+ style="padding-top: 10px;" |偽標題與定義表的可接受例子和錯誤例子
! scope="col" style="background: PaleGreen;" |可接受
! scope="col" style="background: Pink;" |錯誤
|- style="vertical-align: top;"
| style="width: 50%;" |<poem>
''&#91;條目首段&#93;''
<code>==章節==</code> ''&#91;二級&#93;''
<code>===子章節===</code> ''&#91;三級&#93;''
<code><nowiki>'''偽標題'''</nowiki></code>
<code>==章節==</code> ''&#91;二級&#93;''
<code>===子章節===</code> ''&#91;三級&#93;''
<code>====子子章節====</code> ''&#91;四級&#93;''
<code><nowiki>;(定義列表中)術語</nowiki></code>
<code><nowiki>:術語的定義</nowiki></code>
</poem>
| style="width: 50%;" |<poem>
''&#91;條目首段&#93;''
<code>==章節==</code> ''&#91;二級&#93;''
<code>===子章節===</code> ''&#91;三級&#93;''
<code><nowiki>;偽標題</nowiki></code>
<code>==章節==</code> ''&#91;二級&#93;''
<code>===子章節===</code> ''&#91;三級&#93;''
<code><nowiki><small>==子子章節==</small></nowiki></code> ''&#91;2&#93;''</poem>
|}
{{Anchor|FLOAT}}


=== 浮動元素 ===
=== 浮動元素 ===


在維基代碼中,浮動元素應置於所屬章節<u>之內</u>。比如,雖然維基語法中圖像置於頁面頂部,但可能被其它浮動元素推到目錄下方顯示。圖像也應插入其所屬的章節<u>之內</u>。
在維基代碼中,浮動元素應置於所屬章節<u>之內</u>。比如,雖然維基語法中圖像置於頁面頂部,但可能被其它浮動元素推到目錄下方顯示。圖像也應插入其所屬的章節<u>之內</u>。(視乎所用平台,若將多張圖片「堆疊」在很少文字的旁邊,則可能會使某圖片被推擠到後面的章節。然而,此並非親和力問題,因為讀屏器總會在圖片源代碼的位置,將其<code>alt=</code>讀出。)


=== 解析度 ===
=== 解析度 ===
{{Shortcut|MOS:RESOL}}

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


== 文字 ==
== 文字 ==
{{Shortcut|WP:NOSTRIKE|WP:NOSYMBOLS}}

{{See also|Wikipedia:格式手冊/文字格式}}
{{See also|Wikipedia:格式手冊/文字格式}}


=== 刪除線 ===
在條目頁面中,請勿使用[[刪除線]]劃去有異議的文字。要麼用<nowiki>「<!--」和「-->」</nowiki>注釋掉,要麼直接移除。默認情況下,大多數[[螢幕閱讀器]]不支援呈現文本屬性(粗體、斜體、下劃線)乃至語義文本屬性(強調、重要、文字刪除),因此帶刪除線的文字和正常文字顯示效果相同。(而在參與維基百科方針和刪除討論時,我們建議編輯啟用顯示文字格式,而刪除線文字在維基百科內部討論中非常常見。)
{{Shortcut|MOS:STRIKE|MOS:NOSTRIKE}}
請勿在條目頁面及導航模板中用[[刪除線]]劃去任何文字。如有需要,请用「<nowiki><!--</nowiki>」和「<nowiki>--></nowiki>」注釋處理,或直接移除。大多數[[螢幕閱讀器]]-{zh-hant:預設;zh-hans:默认}-不呈現文本屬性(粗體、斜體、下劃線)乃至語義文本屬性(強調、重要、文字刪除),帶刪除線的文字和正常文字阅读效果相同。然而,带刪除線的文字在維基百科內部討論中非常常見,建議在參與維基百科的方針和存废討論時,編輯啟用顯示文本属性。


如果条目有显然错误的内容,应该用注释处理,或者直接移除,不要使用删除线;也可用[[Wikipedia:模板消息/清理|行内清理模板]]标记,并在讨论页提出意见。
不支援Unicode的螢幕閱讀器會將非[[Latin-1]]字元顯示為問號,即使對於最普及螢幕閱讀器[[JAWS]]的最新版本,Unicode字元依然非常難以閱讀。


=== 符號 ===
# 在名稱、地點、事物等原文相當重要的地方,如果原文使用的既非漢字也不是拉丁書寫系統文字,則請始終給出[[转写]],即[[羅馬化]]。
{{Copyedit|section=yes|for=本地化(字符集、音译要求)}}{{Shortcut|MOS:SYMBOLS|MOS:NOSYMBOLS}}
# 請勿使用♥(心形符號)等無法發音的符號;請以注有替代文本的圖像代之<ref>{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F26.html| title = F26: Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information| work = Techniques for WCAG 2.0 | accessdate=2011-01-01|publisher = [[W3C]]}}</ref>。
不支援Unicode的螢幕閱讀器會將非[[Latin-1]]和[[Windows-1252]]的字元显示问号,即使對於最普及的螢幕閱讀器[[JAWS]]中,Unicode字元依然非常難以閱讀。
# 對於在螢幕閱讀器上產生問題的符號,可能已經有了生成圖像和替代文字的模板。比如{{tl|†}}。
# 在名稱、地點、事物等原文相當重要的地方,如果原文使用的既非漢字也不是拉丁書寫系統文字,則請始終給出[[转写]],即[[羅馬化]]。此功能在表示非罗马字语言的模板中可用,也可以在诸如{{tl|transl}}}等模板中找到;这些模板还具有可访问性等其它优点(请参阅下文的[[#外語|“外语”章节]])。
# 請勿使用♥(心形符號)等無法發音的符號;請以注有替代文本({{Code|1={{!}}alt=}})的圖像(如[[File:Twemoji2 2665.svg|15px|alt=心形|link=]])代之<ref>{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F26.html| title = F26: Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information| work = Techniques for WCAG 2.0 | accessdate=2011-01-01|publisher = [[W3C]]}}</ref>。
# 對於在螢幕閱讀器上產生問題的符號,可能已經有了生成圖像和替代文字的模板。比如{{tl|†}}。(有关更多信息,请参见[[:Category:圖像插入模板]])
字符序列必须足以传达文本的语义方面(最好是其他类似形式的内容); 不可使用只能使用[[CSS]]属性或[[Wiki标记语言]]区分的自定义“特殊符号”。


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


不要在句中插入換行符,這會讓[[螢幕閱讀器]]難以編輯。A single line break may follow a sentence, which may help some editors.
不要在句中插入[[換行|換行符]]({{Xtag|br}}),會讓[[螢幕閱讀器]]難以編輯。句子后面允许插入单独的换行符,可能对某些编者有帮助。


=== 字体大小 ===
謹慎使用縮小字體。避免在資訊框、導航模板和參考章節等已經為小字體元素的地方再次使用小字體。無論何時都不應該使用比85%(或11像素)還小的字體。<!-- Replicated at [[Wikipedia:Manual of Style/Text formatting#Font size]] -->
{{main|MOS:TEXT#字型大小}}{{Shortcut|MOS:SMALL|MOS:BIG|MOS:FONTSIZE}}謹慎使用縮小和放大字体。字型大小通常是由頁面元素自動決定,如標題、列表標題、標準模板。改變字型大小時,應當用原字型的'''百分比大小'''(相對大小)描述,而不用像素或[[點 (印刷)|點數]]描述絕對大小,以便利預設使用較大字體的使用者。


避免在資訊框、導航模板和參考章節等已經為小字體元素的地方再次使用缩小字體。所以,{{tag|small}}標籤,及{{tlx|small}}、{{tlx|smaller}}等模板,不應用於該些頁面元素的純文字。無論何時都不應該使用比85%(或11像素)還小的字體。注意HTML的{{tag|small}}標籤還有{{le|小字條款|Fine_print}}的含義,不用作字體風格變化。<!--Replicated at [[Wikipedia:Manual of Style/Text formatting#Font size]].-->
== 外語 ==
{{shortcut|WP:ATLANG}}


{{For|为二名法的命名者使用小字|Wikipedia:Manual of Style/Text formatting#Scientific names}}

== 外語 ==
{{anchor|LANG}}{{shortcut|MOS:ATLANG|MOS:A11Y#LANG}}
{{Main|Template:Lang/doc#使用理由}}
{{Main|Template:Lang/doc#使用理由}}
{{See also|Wikipedia:格式手冊/文字格式#外語術語|Category:多語言支援模板|en:Wikipedia:Manual of Style/Text formatting#Foreign terms}}

非中文單詞或短語應以使用[[ISO 639]]語言代碼的{{tl|lang}}包圍,比如:{{tnull|lang|fr|Assemblée nationale}},会显示为:

{{lang|fr|Assemblée nationale}}


或{{tnull|lang-fr|Assemblée nationale}},会显示为:
{{See also|Wikipedia:格式手冊/文字格式#外語術語|Category:多語言支援模板}}


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


{{strong|使用理由}}:{{tnull|lang}}可以使語音合成器以正確的語言發音<ref>[http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H58 H58: Using language attributes to identify changes in the human language], Techniques for WCAG 2.0, W3C, accessibility level: AA.</ref>。在中文維基百科中,對於日語如不使用模板,則[[日本漢字]]可能會被視作中文錯誤[[Wikipedia:簡繁轉換|簡繁轉換]]。其它見[[Template:Lang/doc#使用理由]]的完整理由。
{{strong|使用理由}}:{{tnull|lang}}可以使語音合成器以正確的語言發音<ref>[http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H58 H58: Using language attributes to identify changes in the human language], Techniques for WCAG 2.0, W3C, accessibility level: AA.</ref>。在中文維基百科中,對於日語如不使用模板,則[[日本漢字]]可能會被視作中文錯誤[[Wikipedia:簡繁轉換|簡繁轉換]]。其它見[[Template:Lang/doc#使用理由]]的完整理由。
第108行: 第153行:
== 連結 ==
== 連結 ==


# 建立好的連結描述,外部連結尤甚。(避免「[[點此]]!」「見[http://example.com/ 此處]」)<ref>{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G91.html | title = G91: Providing link text that describes the purpose of a link| work = Techniques for WCAG 2.0 | accessdate = 2011-01-01| publisher = [[W3C]]}}</ref><ref>{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F84 | title = 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| work = Techniques for WCAG 2.0 | publisher = [[W3C]] | accessdate = 2011-01-01}}</ref>
# 建立好的連結描述,外部連結尤甚。(避免「{{Translink|en|Mystery meat navigation|神秘肉式导航|點此}}!」「見[http://example.com/ 此處]」)<ref>{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G91.html | title = G91: Providing link text that describes the purpose of a link| work = Techniques for WCAG 2.0 | accessdate = 2011-01-01| publisher = [[W3C]]}}</ref><ref>{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F84 | title = 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| work = Techniques for WCAG 2.0 | publisher = [[W3C]] | accessdate = 2011-01-01}}</ref>
# 不要用[[Unicode]]字元當圖符;以使用替代文字描述的圖符檔案代之。比如「→」等字元可能無法在[[螢幕閱讀器]]上重現為有效文字,讀者看到的可能是問號。
# 不要用[[Unicode]]字元當圖符;以使用替代文字描述的圖符檔案代之。比如「→」等字元可能無法在[[螢幕閱讀器]]上重現為有效文字,讀者看到的可能是問號。


{{Anchor|COLOR|COLOUR}}
== 顏色 ==
== 顏色 ==
{{shortcut|WP:COLOR|WP:COLOUR|WP:CONTRAST}}
{{shortcut|MOS:COLOR|MOS:COLOUR|MOS:CONTRAST|MOS:顏色|MOS:用色|MOS:對比度}}


{{另見|Help:使用顏色|Wikipedia:格式手冊/文字格式#颜色及内联图像|Wikipedia:連結顏色}}
{{另見|Help:使用顏色|Wikipedia:格式手冊/文字格式#颜色及内联图像|Wikipedia:連結顏色}}
第122行: 第168行:
条目中的颜色应用须牢记亲和力,如下:
条目中的颜色应用须牢记亲和力,如下:


* 确保颜色并非唯一传达重要信息的方式。特别的,请不要使用上色文字,除非其状态还用指示另一事物,比如[[#文字|亲和性符号]]对应图例,或[[Wikipedia:脚注|脚注标签]]。另外[[失明]]用户或读者通过打印物或非彩色装置或获得维基百科时,将无法获得此类信息。
* 确保颜色并非唯一传达重要信息的方式。特别的,请不要使用上色文字或背景,除非其状态还用指示另一事物,比如[[#文字|亲和性符号]]对应图例,或[[Wikipedia:脚注|脚注标签]]。另外[[失明]]用户或读者通过打印物或非彩色装置或获得维基百科时,将无法获得此类信息。
* 对于我们的读者,链接应该如链接一样清晰可识别。
* 对于我们的读者,链接应该如链接一样清晰可识别。
* 维基百科的一些读者为部分或全[[色盲]]。确保文字和背景的对比达到[[WCAG|WCAG 2.0]]的AA等级,如可能则达到AAA等级。可以选择这些工具检查对比度是否正确:
* 维基百科读者为部分或全[[色盲]]。确保文字和背景的对比达到[[WCAG|WCAG 2.0]]的AA等级,如可能则达到AAA等级。可以选择这些工具检查对比度是否正确:
** [http://www.paciellogroup.com/resources/contrastAnalyser#download 色彩对比分析器]使您能够挑选在页面上的颜色,并充分检查其对比度。但请务必只使用最新的“亮度”算法,而非过时的“色彩亮度/差”。
** [http://www.paciellogroup.com/resources/contrastAnalyser#download 色彩对比分析器]使您能够挑选在页面上的颜色,并充分检查其对比度。但请务必只使用最新的“亮度”算法,而非过时的“色彩亮度/差”。
** 你还可以选择完全更新的[http://snook.ca/technical/colour_contrast/colour.html 斯努克的色彩对比工具]。
** 你还可以选择完全更新的[http://snook.ca/technical/colour_contrast/colour.html 斯努克的色彩对比工具]。
**The Wikimedia Foundation Design team [https://design.wikimedia.org/style-guide/visual-style_colors.html has provided a color palette] with colors being marked towards level AA conformance. It is used for all user-interface elements across products and in the main Wikimedia themes, desktop and mobile. However, it does not consider linked text.
**The table at [[:en:Wikipedia:Manual_of_Style/Accessibility/Colors|Wikipedia:Manual of Style/Accessibility/Colors]] shows the results for 14 hues of finding the darkest or lightest backgrounds that are AAA-compliant against black text, white text, linked text and visited linked text.
**Google's Chrome Canary has a [https://a11ywins.tumblr.com/post/167324368213/google-chromes-color-contrast-debugger color contrast debugger] with visual guide and color-picker.
** 网上还有其它工具,但请在使用前检查它们是否更新。一些工具以[[WCAG 1.0]]算法为基础,而我们应该参考现今的[[WCAG 2.0]]算法。如果工具没有提到其基于WCAG 2.0,则假设它过时。
** 网上还有其它工具,但请在使用前检查它们是否更新。一些工具以[[WCAG 1.0]]算法为基础,而我们应该参考现今的[[WCAG 2.0]]算法。如果工具没有提到其基于WCAG 2.0,则假设它过时。
** {{tl|Color contrast ratio}}
* 此外还有工具可以协助制作图形图表,或是地图等的配色方案。这些工具对于对比度亲和力检查并不严格,但其可以在特定任务上有帮助作用。
* 此外还有工具可以协助制作图形图表,或是地图等的配色方案。这些工具对于对比度亲和力检查并不严格,但其可以在特定任务上有帮助作用。
** [http://ColorSchemeDesigner.com/ 配色方案生成器]可以协助在图表中选择好的颜色搭配。
** [http://Paletton.com/ 配色方案生成器](Paletton)可以协助在图表中选择好的颜色搭配。
** [http://colorbrewer2.org/ 色彩酿造师2.0]提供了地图的安全配色方案和详细讲解。
** [http://colorbrewer2.org/ 色彩酿造师2.0]提供了地图的安全配色方案和详细讲解。
**[https://personal.sron.nl/~pault/#fig:scheme_light Light qualitative colour scheme] provides a set of 9 colours that work for color blind users and with black text labels (among other palettes).
** [http://colorfilter.wickline.org/?j=1;t=a Colorfilter.wickline.org]和[http://www.vischeck.com/vischeck/vischeckURL.php vischeck.com]是用来模拟色盲的工具。
**There are some tools for simulating color-blind vision: [https://www.toptal.com/designers/colorfilter toptal] (webpage analysis) and [https://www.color-blindness.com/coblis-color-blindness-simulator/ coblis] (local file analysis). There are also browser extensions for webpage analysis: [https://chrome.google.com/webstore/detail/colorblinding/dgbgleaofjainknadoffbjkclicbbgaa Colorblinding] (Chrome) [https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl NoCoffee] (Chrome) [https://addons.mozilla.org/en-US/firefox/addon/nocoffee/ NoCoffee] (Firefox)
**A very simple open-source tool that can be helpful for choosing contrasting colours is [https://colororacle.org/ Color Oracle], a "free color blindness simulator for Windows, Mac and Linux". It lets you view whatever is on your screen as it would be seen by someone with one of three types of colourblindness or in greyscale.
* 如果条目过度使用颜色,但你不知道如何亲自修复,则可请其他编辑协助。请将{{tl|Overcolored}}放置于条目顶部。
* 如果条目过度使用颜色,但你不知道如何亲自修复,则可请其他编辑协助。请将{{tl|Overcolored}}放置于条目顶部。


第137行: 第189行:


=== 列表 ===
=== 列表 ===
{{shortcut|WP:LISTGAP|WP:LISTGAPS}}
{{shortcut|MOS:LISTGAP|MOS:LISTGAPS}}
{{see also|Wikipedia:列表#列表样式|Help:列表|en:Wikipedia:Manual of Style#Bulleted and numbered lists}}


不要在列表项间用空行或表格列分断,即使是[[定义列表]](以分号和冒号打头形成的列表)和[[無序列表]]。列表是用来把项目组合起来的,但分断会让[[MediaWiki]]理解为结束再新起列表。拆散分组会让屏幕阅读器读者误解与困惑,因为阅读器也会跟着播报多个列表。不当的格式还会让阅读列表消耗三倍以上的时间。
{{see also|Wikipedia:列表#列表样式}}


同樣,請勿列表之中,切換行首符號<!--行首不禁止 *:: :::*-->(分號、星號、井號)。回覆時,若對方行首混合用分號與星號(甚至井號),則需要先複製該串符號,後另加一個符號,以正確縮進。開新話題,則[[WP:OUTDENT|取消縮進]]即可(等同開一個新的HTML表)。
不要在列表项间用空行或表格列分断,即使是[[定义列表]](以分号和冒号打头形成的列表)和[[無序列表]],这会让[[MediaWiki]]理解为结束再新起列表。这会让[[屏幕阅读器]]显示为多个列表,虽然编辑意在只做一个列表。列表是合为一体的一组元素,拆散分组会让屏幕阅读器读者误解与困惑。不当的格式还会让阅读列表消耗三倍以上的时间。

例如,在討論區,請遵循以下{{tick}}最佳做法:

<syntaxhighlight lang="tid">
* 支持。我喜歡此想法。—User:Example
** 疑問:你為何喜歡?—User:Example2
*** 似乎合乎維基百科的精神。—User:Example
</syntaxhighlight>

或{{tick}}用無圓點的縮進:

<syntaxhighlight lang="tid">
: 支持。我喜歡此想法。—User:Example
:: 疑問:你為何喜歡?—User:Example2
::: 似乎合乎維基百科的精神。—User:Example
</syntaxhighlight>

{{tick}}在回覆中隱藏圓點,也可以接受:

<syntaxhighlight lang="text">
* 支持。我喜歡此想法。—User:Example
*: 疑問:你為何喜歡?—User:Example2
*:: 似乎合乎維基百科的精神。—User:Example
</syntaxhighlight>

但{{xmark}}請勿將表格類型由點列表變成定義列表:

<syntaxhighlight lang="text">
* 支持。我喜歡此想法。—User:Example
:: 疑問:你為何喜歡?—User:Example2
</syntaxhighlight>

也{{xmark}}請勿用以下方法(同樣將表格類型由點列表變成定義列表):

<syntaxhighlight lang="text">
* 支持。我喜歡此想法。—User:Example
:* 疑問:你為何喜歡?—User:Example2
</syntaxhighlight>

亦{{xmark}}請勿在列表項之間隔空行:

<syntaxhighlight lang="tid">
* 支持。我喜歡此想法。—User:Example

** 疑問:你為何喜歡?—User:Example2
</syntaxhighlight>

以及{{xmark}}請勿越級:

<syntaxhighlight lang="tid">
* 支持。我喜歡此想法。—User:Example
*** 疑問:你為何喜歡?—User:Example2
</syntaxhighlight>

以下做法{{xmark|color=yellow}}不鼓勵:

<syntaxhighlight lang="text">
: 支持。我喜歡此想法。—User:Example
:* 疑問:你為何喜歡?—User:Example2
</syntaxhighlight>
因為加入的圓點,令列表變得更複雜,且令讀屏器較難跟上討論,因為可能將多出的圓點視為全新嵌套列表的開始。
==== Multiple paragraphs within list items ====
Normal MediaWiki list markup is unfortunately incompatible with normal MediaWiki paragraph markup. To put multiple paragraphs in a list item, {{tick}} separate them with {{tlx|pb}}:<syntaxhighlight lang="tid">
* This is one item.{{pb}}This is another paragraph within this item.
* This is another item.
</syntaxhighlight>Do not {{cross}} use line breaks to simulate paragraphs, because they have different semantics:<syntaxhighlight lang="tid">
* This is one item.<br>This is the same paragraph, with a line break before it.
* This is another item.
</syntaxhighlight>Definitely do not {{cross}} attempt to use a colon to match the indentation level, since (as mentioned above) it produces three separate lists:<pre>
* This is one item.
: This is an entirely separate list.
* This is a third list.
</pre>Alternatively, you can {{tick}} use one of the [[:en:Template:HTML_lists|HTML list templates]] to guarantee grouping. This is most useful for including block elements, such as formatted code, in lists:<pre>
{{bulleted list
|1=This is one item:
&lt;pre>
This is some code.
&lt;/pre>
This is still the same item.
|2=This is a second item.
}}
</pre>


==== 缩进 ====
==== 缩进 ====
{{shortcut|WP:INDENTGAP|WP:INDENTGAPS}}
{{shortcut|MOS:INDENT|MOS:INDENTGAP|MOS:INDENTGAPS}}<!--
{{see also|Wikipedia:缩进}}-->

An accessible approach to indentation is the template {{tlx|block indent}} for multi-line content; it uses [[:en:Cascading_style_sheets|CSS]] to indent the material. For single lines, a variety of templates exist, including {{tlx|in5}} (a universal template, with the same name on all Wikimedia sites); these indent with various whitespace characters. [[:en:Wikipedia:Manual_of_style#Indentation|Do not abuse]] the {{tag|blockquote}} element or templates that use it (such as {{tlx|Quote}}) for visual indentation; they are only for directly quoted material.

以英文冒号起头的行会缩进。比如这种用法会在讨论页的往来讨论中表示回复。该缩进用了HTML的定义列表。这在可亲和性和语义学都并不理想,但目前却广泛应用。缩进行之间不应插入空行,因为这表示列表的结束并开启新列表。如果确实需要空行,请插入一个以同样数量冒号起头的额外行。


A colon (<code>:</code>) at the start of a line marks that line in the MediaWiki parser as the {{tag|dd}} part of an HTML [[:en:Description_list|description list]] ({{tag|dl}}).{{efn|HTML [[description list]]s were formerly called ''definition lists'' and ''association lists''. The <code><nowiki><dl><dt>...</dt><dd>...</dd></dl></nowiki></code> structure is the same; only the terminology has changed between HTML specification versions.}} The visual effect in most Web browsers is to indent the line. This is used, for example, to indicate replies in a threaded discussion on talk pages. However, this markup alone is missing the required {{tag|dt|o}} (term) element of a description list, to which the {{tag|dd|o}} (description/definition) pertains. As can be seen by inspecting the code sent to the browser, this results in broken HTML (i.e. it fails [[:en:W3C_Markup_Validation_Service|validation]]<ref>{{cite web|title=Markup Validation Service: Check the markup (HTML, XHTML, …) of Web documents|url=https://validator.w3.org/|date=2017|work=validator.w3.org|publisher=[[World Wide Web Consortium]]|version=v1.3+hg|access-date=December 13, 2017}} The validator failure reported is "'''Error''': Element <code>dl</code> is missing a required child element."</ref>). The result is that assistive technology, such as screen readers, will announce a description list that does not exist, which is confusing for any visitor unused to Wikipedia's broken markup. This is not ideal for accessibility, [[:en:Semantic_HTML|semantics]], or [[:en:Wikipedia:Reusing_Wikipedia_content|reuse]], but is currently commonly used, despite the problems it causes for users of screen readers.<!--Accessibility editors consider this a legacy usage, some others disagree, and a Phabricator ticket is open to change the parsing of ":" markup, at https://phabricator.wikimedia.org/T6521-->
{{see also|Wikipedia:缩进}}


Blank lines must {{em|not}} be placed between colon-indented lines of text – especially in article content. This is interpreted by the software as marking the end of a list and the start of a new one. If a blank line is needed, place the same number of colons on it as those preceding the text below the blank line, for instance:<pre>
以英文冒号起头的行会缩进。比如这种用法会在讨论页的往来讨论中表示回复。该缩进是使用了HTML的定义列表。这在可亲和性和语义学上都并不理想,但目前却广泛应用。缩进行之间不应插入空行,因为这表示列表的结束并开启新列表。如果确实需要空行,请插入一个以同样数量冒号起头的额外行。
: Text here.
:
: More text.
</pre>Another solution is new-paragraph markup, but it must be in one unbroken line in the wiki code:<pre>
: Text here.<p>More text.</p>
</pre>For more information on the weaknesses of colon-based description list markup – even for [[:en:Wikipedia:Manual_of_Style/Lists#Description_(definition,_association)_lists|actual description lists]] – {{crossref|see [[WP:Manual of Style/Glossaries/DD bug test cases]]}}.


==== 垂直列表 ====
==== 垂直列表 ====
第154行: 第300行:
===== 无序垂直列表 =====
===== 无序垂直列表 =====


对于无序垂直列表,请不要在项目之间用空行隔行。如果列表项之间有超过一次换行,[[WP:HTML|HTML]]列表将会在换行后结束,并在下一项的换行之前开启一个新HTML列表。这种有效换行在[[屏幕阅读器]]中会视为几小列表比如代码:
对于无序垂直列表,请不要在项目之间用空行隔行。如果列表项之间有超过一次换行,[[WP:HTML|HTML]]列表将会在换行后结束,并在下一项的换行之前开启新HTML列表。这种有效换行在[[屏幕阅读器]]中会视为几小列表比如代码:


<pre>* 白玫瑰
<pre>* 白玫瑰
第177行: 第323行:


===== 无项目符号垂直列表 =====
===== 无项目符号垂直列表 =====
{{shortcut|WP:PLIST|WP:VLIST}}
{{shortcut|MOS:PLIST|MOS:VLIST}}


对于页面中纵向列出的无项目符号列表,可使用模板{{tl|plainlist}}和{{tl|unbulleted list}}来提高亲和性语义意义,表明这是一个清晰的列表,而非通过不应使用的{{Tag|br|single}}换行。代之在导航框一类模板或合适的容器中,可以使用类<code>plainlist</code>”,也就是:
对于页面中纵向列出的无项目符号列表,可使用模板{{tl|plainlist}}和{{tl|unbulleted list}}来提高亲和性语义意义,表明这是清晰的列表,而非通过不应使用的{{Tag|br|single}}换行。
代之在导航框一类模板或合适的容器中,可以使用类“S<code>plainlist</code>”,也就是:


: <code>| listclass = plainlist</code>或
: <code>| listclass = plainlist</code>或
第192行: 第340行:


==== 水平列表 ====
==== 水平列表 ====
{{shortcut|WP:HLIST}}
{{shortcut|MOS:HLIST}}


对于页面中横向列出的,以及信息框等表格中在一行内列出的列表,请使用{{tl|flatlist}}和{{tl|hlist}}模板提升亲和力和与语义意义。该特性对各列表项使用了正确的HTML标记,而不包含盲人用辅助软件会读出的项目符号字元(比如“点-猫-点-狗-点-马-点……”)。
对于页面中横向列出的,以及信息框等表格中在一行内列出的列表,请使用{{tl|flatlist}}和{{tl|hlist}}模板提升亲和力和与语义意义。该特性对各列表项使用了正确的HTML标记,而不包含盲人用辅助软件会读出的项目符号字元(比如“点-猫-点-狗-点-马-点……”)。


代之在导航框等模板或相似的容器中,列表可以使用CSS类“<code>hlist</code>”格式,也就是:
包含项目符号字元,比如读出盲人使用的堵住软件

代之,在导航框等模板或相似的容器中,列表可以使用类“<code>hlist</code>”格式,也就是:


: <code>| listclass = hlist</code>或
: <code>| listclass = hlist</code>或
第209行: 第355行:


见[[WP:NAV]]获得更多关于导航模板的细节。
见[[WP:NAV]]获得更多关于导航模板的细节。

==== List headings ====
{{see also|MOS:PSEUDOHEAD}}Improper use of a semicolon to bold a "fake heading" before a list (figure 1) creates a list gap, and worse. The semicolon line is a one-item description list, with no description content, followed by a second list.

Instead, use heading markup (figure 2).<div role="figure" style="display: inline-block; margin: 0 1em; width: 13em;">
'''{{cross}} 1. Incorrect'''<syntaxhighlight lang="tid">
; Noble gases
* Helium
* Neon
* Argon
* Krypton
* Xenon
* Radon
</syntaxhighlight></div><div role="figure" style="display: inline-block; margin: 0 1em; width: 13em;">
'''{{tick}} 2. Heading'''<pre>
== Noble gases ==
* Helium
* Neon
* Argon
* Krypton
* Xenon
* Radon
</pre></div>


=== 表格 ===
=== 表格 ===
第214行: 第383行:
屏幕阅读器和其它网页浏览器工具通过特定表格标签帮助用户导航其中记录的数据。
屏幕阅读器和其它网页浏览器工具通过特定表格标签帮助用户导航其中记录的数据。


使用正确的维基表格管道语法利于所有可用特性。见[[Help:表格]]获得更多关于表格特定语法的信息。请不要单独使用格式——从CSS或硬编码风格——创建语义意义。(如改变背景颜色)
使用正确的维基表格管道语法利于所有可用特性。见[[Help:表格]]获得更多关于表格特定语法的信息。请不要单独使用格式——从CSS或硬编码风格——创建语义意义。(如改变背景颜色)


部分[[Wikipedia:导航模板|导航框]]和[[Wikipedia:系列模板|系列]]模板,以及[[Help:信息框|信息框]]由表格制成。
通过在相邻单元格中嵌入成组的HTML{{tag|br|single}}标签,可以在视觉上创建多行信息框,不过该技术并不适合HTML表格结构。屏幕阅读器用户是以单元格和HTML行为单位阅读,而非以视觉上的行阅读,因此这对它们会产生问题。

通过在相邻单元格中嵌入成组的HTML{{tag|br|single}}、{{Xtag|hr}}标签,可以在视觉上创建多行信息框,不过该技术并不适合HTML表格结构。屏幕阅读器用户是以单元格和HTML行为单位阅读,而非以视觉上的行阅读,因此这对它们会产生问题。英文维基的信息框亲和度项目([[:en:WikiProject Accessibility/Infobox accessibility|WikiProject Accessibility/Infobox accessibility]])就是为此而生。


==== 数据表格 ====
==== 数据表格 ====
{{shortcut|WP:DTAB}}
{{Main article|Wikipedia:格式手册/亲和力/数据表格指南}}{{shortcut|MOS:DTAB}}


<pre>
<pre>
第240行: 第411行:
; 标题文字(<code>|+</code>) : 标题文字是表格的题头,描述其性质<ref name="H39">[http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H39 H39: Using caption elements to associate data table captions with data tables], A accessibility level.</ref>。
; 标题文字(<code>|+</code>) : 标题文字是表格的题头,描述其性质<ref name="H39">[http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H39 H39: Using caption elements to associate data table captions with data tables], A accessibility level.</ref>。
; 行、列标题(<code> ! </code>) : 如同标题文字,它们使信息以更为逻辑的结构展现给读者<ref>{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H51 | title = H51: Using table markup to present tabular information| accessdate = 2011-01-01| publisher = [[W3C]]}}</ref>。行列标题有助于屏幕阅读器显示数据单元格的标题信息。比如,标题信息会在单元格数据之前念出,或标题信息根据要求提供<ref>{{Cite web | url = http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TH | title= Table cells: The TH and TD elements | work = Techniques for WCAG 2.0 | publisher = [[W3C]] | accessdate = 2011-01-01}}</ref>。
; 行、列标题(<code> ! </code>) : 如同标题文字,它们使信息以更为逻辑的结构展现给读者<ref>{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H51 | title = H51: Using table markup to present tabular information| accessdate = 2011-01-01| publisher = [[W3C]]}}</ref>。行列标题有助于屏幕阅读器显示数据单元格的标题信息。比如,标题信息会在单元格数据之前念出,或标题信息根据要求提供<ref>{{Cite web | url = http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TH | title= Table cells: The TH and TD elements | work = Techniques for WCAG 2.0 | publisher = [[W3C]] | accessdate = 2011-01-01}}</ref>。
; 标题的范围(<code> ! scope="col" | and ! scope="row" | </code>) : 这清晰的定义了行标题或列标题标题单元格现在可以合并<ref name="H63">{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H63.html | title = H63: Using the scope attribute to associate header cells and data cells in data tables| work = Techniques for WCAG 2.0 | accessdate = 2011-01-01| publisher = [[W3C]]}}</ref>
; 标题的范围(<code> ! scope="col" | and ! scope="row" | </code>) : 这清晰的定义了行标题或列标题,指明了标题和其他单元格的对应关系。<ref name="H63">{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H63.html | title = H63: Using the scope attribute to associate header cells and data cells in data tables| work = Techniques for WCAG 2.0 | accessdate = 2011-01-01| publisher = [[W3C]]}}</ref>


[[Wikipedia:格式手册/亲和力/数据表格指南]]列出了这些详细要求:
[[Wikipedia:格式手册/亲和力/数据表格指南]]列出了这些详细要求:
第250行: 第421行:


==== 排版表格 ====
==== 排版表格 ====
{{shortcut|WP:LTAB}}
{{shortcut|MOS:LTAB}}

部分[[Wikipedia:导航模板|导航框]]和[[Wikipedia:系列模板|系列]]模板,以及[[Help:信息框|信息框]]由表格制成。

请不要使用表格做纯排版用途。最佳的选择是使用更有适应性的[[HTML]]的<code>&lt;div&gt;</code>块和样式属性。比如请见{{tlx|Navbox}}。


请避免使用表格做纯排版用途。Data tables provide extra information and navigation methods that can be confusing when the content lacks logical row and column relationships. 最佳的选择是使用更有适应性的[[HTML]]的<code>&lt;div&gt;</code>块和样式({{Code|style}})属性。
可以选择一些简单的排版表格。特别是用<code>align="right"</code>等表格仅为获得浮动效果之时,这会在一些完全[[#对CSS/JavaScript支持有限的用户|不支持CSS]]的浏览器上良好运行。这实际上是一个<code>&lt;div&gt;</code>加CSS的繁琐近似,而非被称为(嵌套)“表格布局”的设计之最。


When using a table to position non-tabular content, help screen readers identify it as a layout table, not a data table. Set a <code>role="presentation"</code> attribute on the table, and do not set any <code>summary</code> attribute. Do not use any <code>&#x3C;caption&#x3E;</code> or <code>&#x3C;th&#x3E;</code> elements inside the table, or inside any nested tables. In wiki table markup, this means do not use the <code>|+</code> or <code>!</code> prefixes. Make sure the content's reading order is correct. Visual effects, such as centering or bold typeface, can be achieved with style sheets or semantic elements. For example:<pre>
然而为避免亲和性障碍,当表格用于布局时,请勿使用任何表格、行或列标题,也不要使用<code>summary</code>属性。这些结构表格元素仅应在数据表格中使用。请勿将结构元素用于效果呈现,而是使用结构表。对于维基表格标记,这表示这种下方情形不要使用“<code>!</code>”(相当于XHTML中的&#160;&lt;th&gt;):
{| role="presentation" class="toccolors" style="width:94%"

| colspan="2" style="text-align: center; background-color: #ccf;" | <strong>Important text</strong>
<pre>
{| class="toccolours" style="width:94%"
| style="text-align: center; background-color: #ccf;" | '''标题'''
|-
|-
| The quick || brown fox
| [常规单元格] || [常规单元格]
|-
|-
| jumps over || the lazy dog.
| [常规单元格] || [常规单元格]
|}
|}
</pre>
</pre>

示例请见{{tlx|Navbox}}。


== 圖像 ==
== 圖像 ==
{{Shortcut|WP:ACCIM}}
{{Shortcut|MOS:ACCIM}}
{{Further|Wikipedia:图像的替代文字|Wikipedia:格式手册#图像|Wikipedia:文件使用守则#大小}}
{{Further|Wikipedia:图像的替代文字|Wikipedia:格式手册#图像|Wikipedia:文件使用守则#大小}}


# 即使是空白的图像,也应该带有[[替代文字]]替代文字是给盲人读者、搜索蜘蛛和其他非视觉用户的代替品。加入的替代文字应该简洁,或者应该提到图像题注或相邻文字:见[[WP:ALT]]获取更多信息。
# 所有非装饰的图像都要有[[替代文字]]替代文字是给盲人读者、搜索蜘蛛和其他非视觉用户的代替品。加入的替代文字应该简洁,或者应该提到图像题注或相邻文字:见[[WP:ALT]]获取更多信息。
# 在[[Wikipedia:题注#特殊情况|多数情况下]],无论是使用内置的图像语法,还是一行附属文字,图像都应该带有[[Wikipedia:题注|题注]]。题注应该简洁描述图像意义,即其试图传达的必要信息。
# 在[[Wikipedia:题注#特殊情况|多数情况下]],无论是使用内置的图像语法,还是一行附属文字,图像都应该带有[[Wikipedia:题注|题注]]。题注应该简洁描述图像意义,即其试图传达的必要信息。
# 若可能,任何图表或图表都应该有替代文字或充分描述,使无法查看图像的用户可以明白一些内容。
# 避免用图片替代数据图表。若可能,任何图表都应该有替代文字或充分描述,使无法查看图像的用户可以明白一些内容。
#Avoid [[:en:MOS:IMAGELOCATION|sandwiching]] text between two images or, unless absolutely necessary, using [[:en:Wikipedia:Image_use_policy#Displayed_image_size|fixed image sizes]].
# 如有不适合条目的详细图像说明,则应将其置于图像描述页,并留下文字注明,点开图像链接可以获得更详细描述。
#Avoid indiscriminate [[:en:Wikipedia:GALLERY|gallery sections]] because screen size and browser formatting may affect accessibility for some readers due to fragmented image display.
# 图像应置于其所属章节内(在章节标题和引导至其他条目的链接之后),不应放在标题里面或上一章节末尾,否则屏幕阅读器会在其它章节显示图像(和替代文字);移动版站点也同样如此显示。见[[Wikipedia:图像指南]]获得更多信息。
# 不要使用左图或右图的描述。对于维基百科移动版而言,图像的排列是不同的,而这对于使用辅助软件的读者也没有意义。相反,使用题注来指明图像。
# 不要使用左图或右图的描述。对于维基百科移动版而言,图像的排列是不同的,而这对于使用辅助软件的读者也没有意义。相反,使用题注来指明图像。
#如有不适合条目的详细图像说明,则应将其置于图像描述页,并留下文字注明,点开图像链接可以获得更详细描述。
#图像应置于其所属章节内(在章节标题和引导至其他条目的链接之后),不应放在标题里面或上一章节末尾,否则屏幕阅读器会在其它章节显示图像(和替代文字);移动版站点也同样如此显示。见[[Wikipedia:图像指南]]获得更多信息。
# 该指引包括<nowiki><math></nowiki>模式下LaTeX格式公式的替代文字。
# 该指引包括<nowiki><math></nowiki>模式下LaTeX格式公式的替代文字。
#[[:en:Wikipedia:Manual_of_Style#Section_headings|Do not put images in headings]]; this includes [[:en:Wikipedia:Manual_of_Style/Icons#Encyclopedic_purpose|icons]] and [[:en:Wikipedia:Manual_of_Style/Mathematics#Typesetting_of_mathematical_formulae|{{tag|math|o}}]] markup. Doing so can break links to sections and cause other problems.


== 动画、视频与音频 ==
== 动画、视频与音频 ==
第295行: 第461行:


总而言之,大多数动画GIF应当能转换为视频。(转换方法可见指南[http://commons.wikimedia.org/w/index.php?title=Help_talk:Converting_video&oldid=39737985#Converting_an_animated_GIF 将动画GIF转换为Theora OGG])
总而言之,大多数动画GIF应当能转换为视频。(转换方法可见指南[http://commons.wikimedia.org/w/index.php?title=Help_talk:Converting_video&oldid=39737985#Converting_an_animated_GIF 将动画GIF转换为Theora OGG])

In addition, animations {{strong-em|must not}} produce more than three flashes in any one-second period. Content that flashes more than that limit is known to cause seizures.<ref name="wcag 2.0 gl2.3">{{cite web|title=Guideline 2.3 Seizures: Do not design content in a way that is known to cause seizures.|url=http://www.w3.org/TR/2008/REC-WCAG20-20081211/#seizure-does-not-violate|accessdate=28 May 2015|date=11 December 2008|work=Web Content Accessibility Guidelines (WCAG) 2.0|publisher=[[World Wide Web Consortium]]}}</ref>


=== 视频 ===
=== 视频 ===
第301行: 第469行:


对于听力障碍者可以加入[[隱藏字幕]]。在2012年11月之前这很难做到,但通过[[bugzilla:41694]]的请求,现在可以简单的加入此特性。隱藏字幕以文字形式提供了关于声音的全部重要信息。其可以包含在对话、声音(自然或人声)、环境与背景、人与动物的动作表情,以及文本或图形<ref>{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G69 | title = Providing an alternative for time based media | work = Techniques for WCAG 2.0 | accessdate = 2011-01-01| publisher = [[W3C]]}}</ref>。关于如何创建隱藏字幕,请参阅:[http://main.wgbh.org/wgbh/pages/mag/services/captioning/faq/sugg-styles-conv-faq.html A quick and basic reference for closed captions]、[http://www.cab-acr.ca/english/social/captioning/captioning.pdf a detailed reference (PDF)]和[http://www.dcmp.org/captioningkey/index.html a list of best practices for closed captions]。
对于听力障碍者可以加入[[隱藏字幕]]。在2012年11月之前这很难做到,但通过[[bugzilla:41694]]的请求,现在可以简单的加入此特性。隱藏字幕以文字形式提供了关于声音的全部重要信息。其可以包含在对话、声音(自然或人声)、环境与背景、人与动物的动作表情,以及文本或图形<ref>{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G69 | title = Providing an alternative for time based media | work = Techniques for WCAG 2.0 | accessdate = 2011-01-01| publisher = [[W3C]]}}</ref>。关于如何创建隱藏字幕,请参阅:[http://main.wgbh.org/wgbh/pages/mag/services/captioning/faq/sugg-styles-conv-faq.html A quick and basic reference for closed captions]、[http://www.cab-acr.ca/english/social/captioning/captioning.pdf a detailed reference (PDF)]和[http://www.dcmp.org/captioningkey/index.html a list of best practices for closed captions]。

A text version of the video would also be needed for the blind, but as of November 2012 there is no convenient way to provide alt text for videos.


=== 声音 ===
=== 声音 ===
第308行: 第478行:
== 样式及标记选项 ==
== 样式及标记选项 ==


{{shortcut|WP:Deviations}}
{{shortcut|MOS:DEVIATIONS}}


=== 最佳慣例:使用維基標記和CSS語法 ===
=== 最佳慣例:使用維基標記和CSS語法 ===


一般來說,表格與其他區塊元素的格式應該採用CSS類別,而不是內嵌式屬性。全站層級CSS的[[MediaWiki:Common.css]]經過最謹慎測試以增進對大多數瀏覽器的親和力(比如充足的顏色對比)和相容性。此外,透過個人樣式表([[Special:MyPage/skin.css]],或瀏覽器設定)用戶可以自訂配色方案以滿足特定需求。For example, a style sheet at [[Wikipedia:Style sheets for visually impaired users]] 提供適用於導航模板的高背景色對比。不過這會蓋過既定的全站CSS, it makes it far more difficult for an individual to choose his/her own theme.
一般來說,表格與其他區塊元素的格式應該採用CSS類別,而不是內嵌式屬性。全站層級CSS的[[MediaWiki:Common.css]]經過最謹慎測試以增進對大多數瀏覽器的親和力(比如充足的顏色對比)和相容性。此外,透過個人樣式表([[Special:MyPage/skin.css]],或瀏覽器設定)用戶可以自訂配色方案以滿足特定需求。舉例來說,[[:en: Wikipedia:Style sheets for visually impaired users]] 提供了視障用戶適用的高背景色對比導航模板。不過這會蓋過既定的全站CSS,使得個人選擇自己的主題會變得比較困難。


它還確保了文章之間的一致性且遵守格式指南,從而提高了專業度。
It also creates a greater degree of professionalism by ensuring a consistent appearance between articles, and conformance to a style guide.


考量到無障礙訪問,只要可以達到目標,與標準不同是可以被容許的。亲和度专题的成員應該確保默認樣式是可以無障礙訪問的。如果某些範本或特定的顏色方案偏離標準,其作者應確保它滿足可訪問性要求,如提供足夠的顏色對比。例如:與[[辛普森家庭]]有關的導航模板和訊息框會使用黃色以配合此系列的主色。在這種情況下,藍色連結提供了充足的對比度,因此它是可訪問的。
Regarding accessibility, deviations from standard conventions may be tolerated so long as they are accessible. Members of the accessibility project ensured that the default style is accessible. If some template or specific color scheme deviates from the standard, its authors should make sure that it meets accessibility requirements such as providing enough color contrast. For instance, the infoboxes and [[Template:The Simpsons|navigational templates]] relating to ''[[The Simpsons]]'' use a yellow colour-scheme, to tie in with the dominant colour in the series. In this case, blue links on yellow provides enough color contrast, thus it is accessible.


一般來講,文章應優先於使用[[Help:EDIT|Wiki標記]]來替代[[使用說明:HTML|HTML元素]]。尤其是,不要使用物理HTML標籤{{tag|i}}和{{tag|b}}來單純格式粗體、斜體文字,請使用Wiki標記<code><nowiki>'''</nowiki></code>、<code><nowiki>''</nowiki></code>,或是{{tsl|en|Semantic_HTML|語意HTML|語意HTML(Semantic HTML)}}。{{tag|font|o}}標籤也應該要盡量避免在文章中使用;使用邏輯模板(例如{{tl|em}}、{{tl|strong}}或{{tl|code}})來強調與其它文字的不同之處。使用及{{tl|small}}及{{tl|big}}模板來改變文字大小,而非以<code>font-size=</code>方式或是已過時的{{tag|small|o}}來設定樣式。Of course there are natural exceptions; e.g., it may be beneficial to use the {{tag|u}} element to indicate something like an example link that isn't really clickable, but underlining is otherwise generally [[:en:MOS:BADEMPHASIS|not used in article text]].
In general, articles should use [[wikimarkup]] in preference to the limited set of allowed HTML elements. In particular, do not use the HTML style tags {{tag|i|o}} and {{tag|b|o}} to format text; it is preferable to use Wiki markup '''<nowiki>''</nowiki>''' or '''<nowiki>'''</nowiki>''', or logical style tags. Of course there are natural exceptions: it may be beneficial to use {{tag|u|o}} tags to indicate something like an example of an unclickable link. The {{tag|font|o}} tag should also be avoided in article text; use logical style tags like {{tag|em|o}}, {{tag|code|o}}, or {{tag|strong|o}} to emphasise semantic differences. Use the {{tag|small|o}} semantic tag and the {{tl|big}} template to change font size, rather than setting it explicitly with the <code>font-size=</code> style attribute.


=== CSS與JavaScript限制 ===
=== CSS與JavaScript支持不足的读者 ===
{{anchor|滾動及摺疊章節}}
{{anchor|滾動及摺疊章節}}{{shortcut|MOS:PRECOLLAPSE}}
{{seealso|Wikipedia:格式手册#滾動列表及摺疊內容}}
{{seealso|Wikipedia:格式手册#滾動列表及摺疊內容|mw:No-JavaScript notes}}


Auto-collapsed (pre-collapsed) elements [[:en:Wikipedia:Manual_of_Style#Scrolling_lists_and_collapsible_content|should not be used to hide content]] in the article's main body, though elements such as tables can be made collapsible at the reader's option.
維基百科條目應該讓使用受限或瀏覽器不支援[[JavaScript]]與[[CSS]]的讀者也能夠容易閱覽。想同時避開不必要的功能又提供相同的外觀質感給不同能力瀏覽器的用戶,是不可能的。不應該使用導致在CSS或JavaScript不可用時會保持隱藏或走樣的功能。This includes techniques such as the [[Wikipedia:HiddenStructure|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]]瀏覽器的讀者也能夠容易閱覽。想同時避開不必要的功能又提供相同的外觀質感給不同瀏覽器的用戶是不可能的,因此不應該使用在CSS或JavaScript無法使用時會直接隱藏或是走樣的功能。這包含了像是以[[:en: Wikipedia:HiddenStructure|結構隱藏]]方法來摺疊表格內容(但沒有CSS時會以不可折疊的樣式顯示)或是某些[[H:COLL|摺疊]]碼(可能會使沒有JavaScript的用戶無法閱讀內容)。請考慮到那些無法使用CSS或JavaScript的用戶,確保他們{{Zh-em|可以}}閱讀;效果變差是意料之中。
為了因應這些考量,測試任何潛在的破壞性變化都在關閉JavaScript或CSS的情況下進行。在Firefox或Chrome,這可以很容易地透過網頁開發擴展完成;IE瀏覽器可以在「選項」畫面禁用JavaScript。要特別小心內嵌式CSS效果,其在某些瀏覽器、媒體、以及XHTML版本並不支援。


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


In 2016 around 7% of visitors to Wikipedia did not request JavaScript resources.<ref>[https://commons.wikimedia.org/w/index.php?title=File:Browsers,_Geography,_and_JavaScript_Support_on_Wikipedia_Portal.pdf&page=5 File:Browsers, Geography, and JavaScript Support on Wikipedia Portal.pdf] and [[:File:Analysis of Wikipedia Portal Traffic and JavaScript Support.pdf]].</ref>
=== Best practice: Use Wikimarkup and CSS classes in preference to alternatives ===

In general, styles for tables and other block-level elements should be set using CSS classes, not with inline style attributes. The site-wide CSS in [[MediaWiki:Common.css]] is more carefully tested to ensure accessibility (e.g. sufficient color contrast) and compatibility with a wide range of browsers. Moreover, it allows for users with very specific needs to change the color schemes in their own style sheet ([[Special:MyPage/skin.css]], or their browser's style sheet). For example, a style sheet at [[Wikipedia:Style sheets for visually impaired users]] provides higher contrast backgrounds for navboxes. The problem is that when the default site-wide classes are overridden, it makes it far more difficult for an individual to choose his/her own theme.

It also creates a greater degree of professionalism by ensuring a consistent appearance between articles, and conformance to a style guide.

Regarding accessibility, deviations from standard conventions may be tolerated so long as they are accessible. Members of the accessibility project ensured that the default style is accessible. If some template or specific color scheme deviates from the standard, its authors should make sure that it meets accessibility requirements such as providing enough color contrast. For instance, the infoboxes and [[Template:The Simpsons|navigational templates]] relating to ''[[The Simpsons]]'' use a yellow colour-scheme, to tie in with the dominant colour in the series. In this case, blue links on yellow provides enough color contrast, thus it is accessible.

In general, articles should use [[wikimarkup]] in preference to the limited set of allowed HTML elements. In particular, do not use the HTML style tags <tt><nowiki><i></nowiki></tt> and <tt><nowiki><b></nowiki></tt> to format text; it is preferable to use Wiki markup <tt><nowiki>''</nowiki></tt> or <tt><nowiki>'''</nowiki></tt>, or logical style tags. Of course there are natural exceptions: it may be beneficial to use <tt><nowiki><u></u></nowiki></tt> tags to indicate something like an example of an unclickable link. The <tt><nowiki><font></nowiki></tt> tag should also be avoided in article text; use logical style tags like <tt><nowiki><em></nowiki></tt>, <tt><nowiki><code></nowiki></tt>, or <tt><nowiki><strong></nowiki></tt> to emphasise semantic differences. Use <tt><nowiki><small></nowiki></tt> and <tt><nowiki><big></nowiki></tt> semantic tags to change font size, rather than setting it explicitly with the <tt><nowiki>font-size=</nowiki></tt> style attribute.

=== Users with limited CSS/JavaScript support {{anchor|Scrolling and collapsible sections}} ===
{{seealso|Wikipedia:Manual of Style#Scrolling lists and collapsible content}}

Wikipedia articles should be accessible to readers using browsers and devices which have limited or no support for [[JavaScript]] or [[Cascading Style Sheets]]. At the same time, it is recognised that it is impossible to provide the same quality of appearance to such users without unnecessarily avoiding features that would benefit users with more capable browsers. As such, features which would cause content to be hidden or corrupted when CSS or JavaScript is unavailable must not be used. This includes techniques such as the [[Wikipedia:HiddenStructure|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. However, consideration for users without CSS or JavaScript should extend mainly to making sure that their reading experience is ''possible''; it is recognised that it will inevitably be ''inferior''.

To accommodate these considerations, test any potentially disruptive changes with JavaScript or CSS disabled. In Firefox or Chrome, this can be done easily with the Web Developer extension; JavaScript can be disabled in IE in the "Options" screen. Be particularly careful with inline CSS effects, which are not supported by several browsers, media, and XHTML versions.
{{TransF}}


== 参见 ==
== 参见 ==

* [[usability:Accessibility Initiative]]
* [[usability:Accessibility Initiative]]

== 注释 ==
{{Notelist}}


== 参考资料 ==
== 参考资料 ==
{{Reflist|3}}

{{Reflist}}
{{Refbegin}}
{{Refbegin}}
* {{cite book | first = Joe | last = Clark | year = 2003 | month = | title = Building Accessible Websites | edition = | publisher = New Riders Press | location = | id = ISBN 0-7357-1150-X | url = http://www.joeclark.org/book/ | accessdate = 2011-01-01 }}
* {{cite book | first = Joe | last = Clark | year = 2003 | month = | title = Building Accessible Websites | edition = | publisher = New Riders Press | location = | isbn= 0-7357-1150-X | url = http://www.joeclark.org/book/ | accessdate = 2011-01-01 }}
* {{cite web | first = Mark | last = Pilgrim | title = Dive Into Accessibility: 30 days to a more accessible web site | year = 2002 | accessdate = 2013-12-26| url = http://diveintoaccessibility.info }}
* {{cite web | first = Mark | last = Pilgrim | title = Dive Into Accessibility: 30 days to a more accessible web site | year = 2002 | accessdate = 2013-12-26| url = http://diveintoaccessibility.info }}
{{Refend}}
{{Refend}}


== 外部链接 ==
== 外部链接 ==

* [http://www.w3.org/WAI/quicktips/ 10 Quick Tips to Make Accessible Web Sites], from WAI
* [http://www.w3.org/WAI/quicktips/ 10 Quick Tips to Make Accessible Web Sites], from WAI
* [http://colorfilter.wickline.org/ Colorblind web page filter]
* [http://colorfilter.wickline.org/ Colorblind web page filter]

2024年3月20日 (三) 15:06的最新版本

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

2006年1月14日,维基媒体基金会理事会提议了以下反歧视政策“维基媒体基金会禁止基于种族、肤色、性别、宗教、民族血统、年龄、残疾、性取向或任何其他受法律保护的特征而歧视现有或未来的用户和雇员。维基媒体基金会承诺遵守机会平等的原则,特别是在雇员关系的所有方面,包括就业、工资管理、雇员发展、晋升和调动”,並断称,“维基媒体基金会的官员或工作人员或任何维基媒体项目的地方政策不得规避、侵蚀或忽视”此政策。

條目結構

[编辑]

規範條目結構可讓用戶從頁面特定部分獲得期望內容,增加親和力;如果有盲人在搜索消歧義連結,沒有從頁面頂部搜索到任何內容,就可知道此處什麼也沒有,不必費時繼續閱讀下去。 期望內容是在頁面的特定部分。

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

章節標題

[编辑]

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

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

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

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

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

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

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

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

請勿濫用行首半形分號和粗體來「偽裝」標題,行首半形分號是定義列表專用。讀屏器和其他輔助工具僅能使用有章節標記(半形等號)的標題來導航定位。如欲縮小目錄,請用{{TOC limit}}。在{{TOC limit}}因為條目其他地方有低層級標題而無用的情況,才可妥協用粗體,但要先將子子子標題用粗體取代,因為這對讀屏器使用者構成的滋擾最少。必先窮盡其他解決方案,才可以使用偽標題。此為罕見情況。

偽標題與定義表的可接受例子和錯誤例子
可接受 錯誤

[條目首段]
==章節== [二級]
===子章節=== [三級]
'''偽標題'''
==章節== [二級]
===子章節=== [三級]
====子子章節==== [四級]
;(定義列表中)術語
:術語的定義

[條目首段]
==章節== [二級]
===子章節=== [三級]
;偽標題
==章節== [二級]
===子章節=== [三級]
<small>==子子章節==</small> [2]

浮動元素

[编辑]

在維基代碼中,浮動元素應置於所屬章節之內。比如,雖然維基語法中圖像置於頁面頂部,但可能被其它浮動元素推到目錄下方顯示。圖像也應插入其所屬的章節之內。(視乎所用平台,若將多張圖片「堆疊」在很少文字的旁邊,則可能會使某圖片被推擠到後面的章節。然而,此並非親和力問題,因為讀屏器總會在圖片源代碼的位置,將其alt=讀出。)

解析度

[编辑]

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

文字

[编辑]

刪除線

[编辑]

請勿在條目頁面及導航模板中用刪除線劃去任何文字。如有需要,请用「<!--」和「-->」注釋處理,或直接移除。大多數螢幕閱讀器默认不呈現文本屬性(粗體、斜體、下劃線)乃至語義文本屬性(強調、重要、文字刪除),帶刪除線的文字和正常文字阅读效果相同。然而,带刪除線的文字在維基百科內部討論中非常常見,建議在參與維基百科的方針和存废討論時,編輯啟用顯示文本属性。

如果条目有显然错误的内容,应该用注释处理,或者直接移除,不要使用删除线;也可用行内清理模板标记,并在讨论页提出意见。

符號

[编辑]

不支援Unicode的螢幕閱讀器會將非Latin-1Windows-1252的字元显示问号,即使對於最普及的螢幕閱讀器JAWS中,Unicode字元依然非常難以閱讀。

  1. 在名稱、地點、事物等原文相當重要的地方,如果原文使用的既非漢字也不是拉丁書寫系統文字,則請始終給出转写,即羅馬化。此功能在表示非罗马字语言的模板中可用,也可以在诸如{{transl}}}等模板中找到;这些模板还具有可访问性等其它优点(请参阅下文的“外语”章节)。
  2. 請勿使用♥(心形符號)等無法發音的符號;請以注有替代文本(|alt=)的圖像(如心形)代之[1]
  3. 對於在螢幕閱讀器上產生問題的符號,可能已經有了生成圖像和替代文字的模板。比如{{}}。(有关更多信息,请参见Category:圖像插入模板

字符序列必须足以传达文本的语义方面(最好是其他类似形式的内容); 不可使用只能使用CSS属性或Wiki标记语言区分的自定义“特殊符号”。

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

不要在句中插入換行符<br>),會讓螢幕閱讀器難以編輯。句子后面允许插入单独的换行符,可能对某些编者有帮助。

字体大小

[编辑]

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

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

外語

[编辑]

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

Assemblée nationale

{{lang-fr|Assemblée nationale}},会显示为:

法語:Assemblée nationale

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

連結

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

顏色

[编辑]
两个文本用户界面的同高度截图。上方的使用了红色、绿色和蓝色;下方的则使用了对红色和绿色几乎相同的颜色,借个红色文字几乎淹没在绿色的背景中。
一对截图显示红/绿色盲对易读性的影响

颜色最常见于维基百科条目的模板表格。欲查看可用的颜色,请见颜色列表,关于如何使用颜色的技术帮助,请见Help:使用颜色

条目中的颜色应用须牢记亲和力,如下:

  • 确保颜色并非唯一传达重要信息的方式。特别的,请不要使用上色文字或背景,除非其状态还用指示另一事物,比如亲和性符号对应图例,或脚注标签。另外失明用户或读者通过打印物或非彩色装置或获得维基百科时,将无法获得此类信息。
  • 对于我们的读者,链接应该如链接一样清晰可识别。
  • 维基百科有读者为部分或全色盲。确保文字和背景的对比达到WCAG 2.0的AA等级,如可能则达到AAA等级。可以选择这些工具检查对比度是否正确:
    • 色彩对比分析器使您能够挑选在页面上的颜色,并充分检查其对比度。但请务必只使用最新的“亮度”算法,而非过时的“色彩亮度/差”。
    • 你还可以选择完全更新的斯努克的色彩对比工具
    • The Wikimedia Foundation Design team has provided a color palette with colors being marked towards level AA conformance. It is used for all user-interface elements across products and in the main Wikimedia themes, desktop and mobile. However, it does not consider linked text.
    • The table at Wikipedia:Manual of Style/Accessibility/Colors shows the results for 14 hues of finding the darkest or lightest backgrounds that are AAA-compliant against black text, white text, linked text and visited linked text.
    • Google's Chrome Canary has a color contrast debugger with visual guide and color-picker.
    • 网上还有其它工具,但请在使用前检查它们是否更新。一些工具以WCAG 1.0算法为基础,而我们应该参考现今的WCAG 2.0算法。如果工具没有提到其基于WCAG 2.0,则假设它过时。
    • {{Color contrast ratio}}
  • 此外还有工具可以协助制作图形图表,或是地图等的配色方案。这些工具对于对比度亲和力检查并不严格,但其可以在特定任务上有帮助作用。
    • 配色方案生成器(Paletton)可以协助在图表中选择好的颜色搭配。
    • 色彩酿造师2.0提供了地图的安全配色方案和详细讲解。
    • Light qualitative colour scheme provides a set of 9 colours that work for color blind users and with black text labels (among other palettes).
    • There are some tools for simulating color-blind vision: toptal (webpage analysis) and coblis (local file analysis). There are also browser extensions for webpage analysis: Colorblinding (Chrome) NoCoffee (Chrome) NoCoffee (Firefox)
    • A very simple open-source tool that can be helpful for choosing contrasting colours is Color Oracle, a "free color blindness simulator for Windows, Mac and Linux". It lets you view whatever is on your screen as it would be seen by someone with one of three types of colourblindness or in greyscale.
  • 如果条目过度使用颜色,但你不知道如何亲自修复,则可请其他编辑协助。请将{{Overcolored}}放置于条目顶部。

块元素

[编辑]

列表

[编辑]

不要在列表项间用空行或表格列分断,即使是定义列表(以分号和冒号打头形成的列表)和無序列表。列表是用来把项目组合起来的,但分断会让MediaWiki理解为结束再新起列表。拆散分组会让屏幕阅读器读者误解与困惑,因为阅读器也会跟着播报多个列表。不当的格式还会让阅读列表消耗三倍以上的时间。

同樣,請勿列表之中,切換行首符號(分號、星號、井號)。回覆時,若對方行首混合用分號與星號(甚至井號),則需要先複製該串符號,後另加一個符號,以正確縮進。開新話題,則取消縮進即可(等同開一個新的HTML表)。

例如,在討論區,請遵循以下checkY最佳做法:

* 支持。我喜歡此想法。—User:Example 
** 疑問:你為何喜歡?—User:Example2
*** 似乎合乎維基百科的精神。—User:Example

checkY用無圓點的縮進:

: 支持。我喜歡此想法。—User:Example 
:: 疑問:你為何喜歡?—User:Example2
::: 似乎合乎維基百科的精神。—User:Example

checkY在回覆中隱藏圓點,也可以接受:

* 支持。我喜歡此想法。—User:Example 
*: 疑問:你為何喜歡?—User:Example2
*:: 似乎合乎維基百科的精神。—User:Example

☒N請勿將表格類型由點列表變成定義列表:

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

☒N請勿用以下方法(同樣將表格類型由點列表變成定義列表):

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

☒N請勿在列表項之間隔空行:

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

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

以及☒N請勿越級:

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

以下做法☒N不鼓勵:

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

因為加入的圓點,令列表變得更複雜,且令讀屏器較難跟上討論,因為可能將多出的圓點視為全新嵌套列表的開始。

Multiple paragraphs within list items

[编辑]

Normal MediaWiki list markup is unfortunately incompatible with normal MediaWiki paragraph markup. To put multiple paragraphs in a list item, checkY separate them with {{pb}}:

* This is one item.{{pb}}This is another paragraph within this item.
* This is another item.

Do not ☒N use line breaks to simulate paragraphs, because they have different semantics:

* This is one item.<br>This is the same paragraph, with a line break before it.
* This is another item.

Definitely do not ☒N attempt to use a colon to match the indentation level, since (as mentioned above) it produces three separate lists:

* This is one item.
: This is an entirely separate list.
* This is a third list.

Alternatively, you can checkY use one of the HTML list templates to guarantee grouping. This is most useful for including block elements, such as formatted code, in lists:

{{bulleted list |1=This is one item: <pre> This is some code. </pre> This is still the same item. |2=This is a second item. }}

缩进

[编辑]

An accessible approach to indentation is the template {{block indent}} for multi-line content; it uses CSS to indent the material. For single lines, a variety of templates exist, including {{in5}} (a universal template, with the same name on all Wikimedia sites); these indent with various whitespace characters. Do not abuse the <blockquote>...</blockquote> element or templates that use it (such as {{Quote}}) for visual indentation; they are only for directly quoted material.

以英文冒号起头的行会缩进。比如这种用法会在讨论页的往来讨论中表示回复。该缩进用了HTML的定义列表。这在可亲和性和语义学都并不理想,但目前却广泛应用。缩进行之间不应插入空行,因为这表示列表的结束并开启新列表。如果确实需要空行,请插入一个以同样数量冒号起头的额外行。

A colon (:) at the start of a line marks that line in the MediaWiki parser as the <dd>...</dd> part of an HTML description list (<dl>...</dl>).[a] The visual effect in most Web browsers is to indent the line. This is used, for example, to indicate replies in a threaded discussion on talk pages. However, this markup alone is missing the required <dt> (term) element of a description list, to which the <dd> (description/definition) pertains. As can be seen by inspecting the code sent to the browser, this results in broken HTML (i.e. it fails validation[5]). The result is that assistive technology, such as screen readers, will announce a description list that does not exist, which is confusing for any visitor unused to Wikipedia's broken markup. This is not ideal for accessibility, semantics, or reuse, but is currently commonly used, despite the problems it causes for users of screen readers.

Blank lines must not be placed between colon-indented lines of text – especially in article content. This is interpreted by the software as marking the end of a list and the start of a new one. If a blank line is needed, place the same number of colons on it as those preceding the text below the blank line, for instance:

: Text here.
:
: More text.

Another solution is new-paragraph markup, but it must be in one unbroken line in the wiki code:

Text here.<p>More text.</p>

For more information on the weaknesses of colon-based description list markup – even for actual description listssee WP:Manual of Style/Glossaries/DD bug test cases.

垂直列表

[编辑]
无序垂直列表
[编辑]

对于无序垂直列表,请不要在项目之间用空行隔行。如果列表项之间有超过一次换行,HTML列表将会在换行后结束,并在下一项的换行之前开启新HTML列表。这种有效换行在屏幕阅读器中会视为几張小列表,比如代码:

* 白玫瑰
* 黄玫瑰

* 粉红玫瑰

* 红玫瑰

因为软件抑制了行距,所以看起来如:

  • 白玫瑰
  • 黄玫瑰
  • 粉红玫瑰
  • 红玫瑰

但是屏幕阅读器读者看起来是:“2个项目的列表:(圆点)白玫瑰,(圆点)黄玫瑰,列表结束。单项目列表:(圆点)粉红玫瑰,列表结束。单项目列表:(圆点)红玫瑰,列表结束。”

请不要以换行符分隔列表项目。请用以下方法代之。

无项目符号垂直列表
[编辑]

对于页面中纵向列出的无项目符号列表,可使用模板{{plainlist}}和{{unbulleted list}}来提高亲和性语义意义,表明这是清晰的列表,而非通过不应使用的<br />换行。

代之在导航框一类模板或合适的容器中,可以使用类“Splainlist”,也就是:

| listclass = plainlist
| bodyclass = plainlist

在信息框中则可以使用:

| rowclass = plainlist or
| bodyclass = plainlist

。另见Wikipedia:格式手册/列表#无项目符号列表。见WP:NAV获得更多关于导航模板的细节。

水平列表

[编辑]

对于页面中横向列出的,以及信息框等表格中在一行内列出的列表,请使用{{flatlist}}和{{hlist}}模板提升亲和力和与语义意义。该特性对各列表项使用了正确的HTML标记,而不包含盲人用辅助软件会读出的项目符号字元(比如“点-猫-点-狗-点-马-点……”)。

代之在导航框等模板或相似的容器中,列表可以使用CSS类“hlist”格式,也就是:

| listclass = hlist
| bodyclass = hlist

信息框中可使用:

| rowclass = hlist
| bodyclass = hlist

WP:NAV获得更多关于导航模板的细节。

List headings

[编辑]

Improper use of a semicolon to bold a "fake heading" before a list (figure 1) creates a list gap, and worse. The semicolon line is a one-item description list, with no description content, followed by a second list. Instead, use heading markup (figure 2).

☒N 1. Incorrect
; Noble gases
* Helium
* Neon
* Argon
* Krypton
* Xenon
* Radon
checkY 2. Heading
== Noble gases ==
* Helium
* Neon
* Argon
* Krypton
* Xenon
* Radon

表格

[编辑]

屏幕阅读器和其它网页浏览器工具通过特定表格标签帮助用户导航其中记录的数据。

使用正确的维基表格管道语法利于所有可用特性。见Help:表格获得更多关于表格特定语法的信息。请不要单独使用格式——从CSS或硬编码风格——创建语义意义。(如改变背景颜色)。

部分导航框系列模板,以及信息框由表格制成。

通过在相邻单元格中嵌入成组的HTML<br /><hr>标签,可以在视觉上创建多行信息框,不过该技术并不适合HTML表格结构。屏幕阅读器用户是以单元格和HTML行为单位阅读,而非以视觉上的行阅读,因此这对它们会产生问题。英文维基的信息框亲和度项目(WikiProject Accessibility/Infobox accessibility)就是为此而生。

数据表格

[编辑]
{|
|+ [标题文字]
|-
! scope="col" | [列标题1]
! scope="col" | [列标题2]
! scope="col" | [列标题3]
|-
! scope="row" | [列标题1]
| [常规单元格1,2] || [常规单元格1,3]
|-
! scope="row" | [列标题2]
| [常规单元格2,2] || [常规单元格2,3]
...
|}
标题文字(|+
标题文字是表格的题头,描述其性质[6]
行、列标题( !
如同标题文字,它们使信息以更为逻辑的结构展现给读者[7]。行列标题有助于屏幕阅读器显示数据单元格的标题信息。比如,标题信息会在单元格数据之前念出,或标题信息根据要求提供[8]
标题的范围( ! scope="col" | and ! scope="row" |
这清晰的定义了行标题或列标题,指明了标题和其他单元格的对应关系。[9]

Wikipedia:格式手册/亲和力/数据表格指南列出了这些详细要求:

  1. 正确的表格标题
  2. 正确的标题结构
  3. 图像和颜色
  4. 避免嵌套表格

排版表格

[编辑]

请避免使用表格做纯排版用途。Data tables provide extra information and navigation methods that can be confusing when the content lacks logical row and column relationships. 最佳的选择是使用更有适应性的HTML<div>块和样式(style)属性。

When using a table to position non-tabular content, help screen readers identify it as a layout table, not a data table. Set a role="presentation" attribute on the table, and do not set any summary attribute. Do not use any <caption> or <th> elements inside the table, or inside any nested tables. In wiki table markup, this means do not use the |+ or ! prefixes. Make sure the content's reading order is correct. Visual effects, such as centering or bold typeface, can be achieved with style sheets or semantic elements. For example:

{| role="presentation" class="toccolors" style="width:94%"
| colspan="2" style="text-align: center; background-color: #ccf;" | <strong>Important text</strong>
|-
| The quick || brown fox
|-
| jumps over || the lazy dog.
|}

圖像

[编辑]
  1. 所有非装饰的图像都要有替代文字。替代文字是给盲人读者、搜索蜘蛛和其他非视觉用户的代替品。加入的替代文字应该简洁,或者应该提到图像题注或相邻文字:见WP:ALT获取更多信息。
  2. 多数情况下,无论是使用内置的图像语法,还是一行附属文字,图像都应该带有题注。题注应该简洁描述图像意义,即其试图传达的必要信息。
  3. 避免用图片替代数据图表。若可能,任何图表都应该有替代文字或充分描述,使无法查看图像的用户可以明白一些内容。
  4. Avoid sandwiching text between two images or, unless absolutely necessary, using fixed image sizes.
  5. Avoid indiscriminate gallery sections because screen size and browser formatting may affect accessibility for some readers due to fragmented image display.
  6. 不要使用左图或右图的描述。对于维基百科移动版而言,图像的排列是不同的,而这对于使用辅助软件的读者也没有意义。相反,请使用题注来指明图像。
  7. 如有不适合条目的详细图像说明,则应将其置于图像描述页,并留下文字注明,点开图像链接可以获得更详细描述。
  8. 图像应置于其所属章节内(在章节标题和引导至其他条目的链接之后),不应放在标题里面或上一章节末尾,否则屏幕阅读器会在其它章节显示图像(和替代文字);移动版站点也同样如此显示。见Wikipedia:图像指南获得更多信息。
  9. 该指引包括<math>模式下LaTeX格式公式的替代文字。
  10. Do not put images in headings; this includes icons and <math> markup. Doing so can break links to sections and cause other problems.

动画、视频与音频

[编辑]

动画

[编辑]

出于亲和力考虑,动画(GIF–图形交换格式)应该满足以下两者之一:

  • 持续时间不超过5秒(否则会变成纯装饰元素)[10],或者
  • 有控制模块(停止、暂停、播放)[11]

总而言之,大多数动画GIF应当能转换为视频。(转换方法可见指南将动画GIF转换为Theora OGG

In addition, animations Template:Strong-em produce more than three flashes in any one-second period. Content that flashes more than that limit is known to cause seizures.[12]

视频

[编辑]

视频可以加入计时文本格式的字幕。commons:Commons:Video#Subtitles and closed captioning有相应的帮助页面。字幕为语音的转录。

对于听力障碍者可以加入隱藏字幕。在2012年11月之前这很难做到,但通过bugzilla:41694的请求,现在可以简单的加入此特性。隱藏字幕以文字形式提供了关于声音的全部重要信息。其可以包含在对话、声音(自然或人声)、环境与背景、人与动物的动作表情,以及文本或图形[13]。关于如何创建隱藏字幕,请参阅:A quick and basic reference for closed captionsa detailed reference (PDF)a list of best practices for closed captions

A text version of the video would also be needed for the blind, but as of November 2012 there is no convenient way to provide alt text for videos.

声音

[编辑]

可以很方便的为演讲、歌词和对话等加入字幕[14]。方法和视频相似: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>來設定樣式。Of course there are natural exceptions; e.g., it may be beneficial to use the <u>...</u> element to indicate something like an example link that isn't really clickable, but underlining is otherwise generally not used in article text.

CSS與JavaScript支持不足的读者

[编辑]

Auto-collapsed (pre-collapsed) elements should not be used to hide content in the article's main body, though elements such as tables can be made collapsible at the reader's option.

維基百科條目應該讓使用不完全支援JavaScriptCSS瀏覽器的讀者也能夠容易閱覽。想同時避開不必要的功能又提供相同的外觀質感給不同瀏覽器的用戶是不可能的,因此不應該使用在CSS或JavaScript無法使用時會直接隱藏或是走樣的功能。這包含了像是以結構隱藏方法來摺疊表格內容(但沒有CSS時會以不可折疊的樣式顯示)或是某些摺疊碼(可能會使沒有JavaScript的用戶無法閱讀內容)。請考慮到那些無法使用CSS或JavaScript的用戶,確保他們可以閱讀;效果變差是意料之中。

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

In 2016 around 7% of visitors to Wikipedia did not request JavaScript resources.[15]

参见

[编辑]

注释

[编辑]
  1. ^ HTML description lists were formerly called definition lists and association lists. The <dl><dt>...</dt><dd>...</dd></dl> structure is the same; only the terminology has changed between HTML specification versions.

参考资料

[编辑]
  1. ^ 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]. 
  2. ^ H58: Using language attributes to identify changes in the human language, Techniques for WCAG 2.0, W3C, accessibility level: AA.
  3. ^ G91: Providing link text that describes the purpose of a link. Techniques for WCAG 2.0. W3C. [2011-01-01]. 
  4. ^ 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]. 
  5. ^ Markup Validation Service: Check the markup (HTML, XHTML, …) of Web documents. validator.w3.org. v1.3+hg. World Wide Web Consortium. 2017 [December 13, 2017].  The validator failure reported is "Error: Element dl is missing a required child element."
  6. ^ H39: Using caption elements to associate data table captions with data tables, A accessibility level.
  7. ^ H51: Using table markup to present tabular information. W3C. [2011-01-01]. 
  8. ^ Table cells: The TH and TD elements. Techniques for WCAG 2.0. W3C. [2011-01-01]. 
  9. ^ H63: Using the scope attribute to associate header cells and data cells in data tables. Techniques for WCAG 2.0. W3C. [2011-01-01]. 
  10. ^ Setting animated gif images to stop blinking after n cycles (within 5 seconds). Techniques for WCAG 2.0. W3C. [2011-01-01]. 
  11. ^ Allowing the content to be paused and restarted from where it was paused. Techniques for WCAG 2.0. W3C. [2011-01-01]. 
  12. ^ Guideline 2.3 Seizures: Do not design content in a way that is known to cause seizures.. Web Content Accessibility Guidelines (WCAG) 2.0. World Wide Web Consortium. 11 December 2008 [28 May 2015]. 
  13. ^ Providing an alternative for time based media. Techniques for WCAG 2.0. W3C. [2011-01-01]. 
  14. ^ Providing an alternative for time-based media for audio-only content. Techniques for WCAG 2.0. W3C. [2011-01-01]. 
  15. ^ File:Browsers, Geography, and JavaScript Support on Wikipedia Portal.pdf and File:Analysis of Wikipedia Portal Traffic and JavaScript Support.pdf.

外部链接

[编辑]