添加的内容 删除的内容
SolidBlock(留言 | 贡献) |
无编辑摘要 |
||
(未显示4个用户的40个中间版本) | |||
第1行: | 第1行: | ||
{{NoteTA|G1=IT|G2=MediaWiki}} |
{{NoteTA|G1=IT|G2=MediaWiki}} |
||
{{ |
{{Guideline|=Style|QW:ACCESS|QW:A11Y|QW:无障碍}} |
||
'''无障碍'''({{Lang-en|accessibility}})是指网页能够更加易于访问、易于使用,即使是色盲、盲人或者其他的残障人士等特殊群体,也能够访问网页并使用各种功能,而不会遇到明显的障碍。为了做到无障碍,求闻百科的页面应该尽可能遵循HTML的规范并使用语义,且在可能的情况下,利用好辅助功能的接口。 |
|||
求闻百科致力于让网页更易浏览与阅读,即'''无障碍'''。无障碍的范围比较广,不仅指能够向色盲用户、残障人士等特殊群体提供辅助功能,还包括了对常见情况下的一些基本的需求。 |
|||
求闻百科并不提供专门的辅助功能插件(如屏幕阅读器、文本大小、按键反馈增强、盲文显示)等,用户可以在操作系统的辅助功能设置中启用相应的功能,或直接缩放网页的大小。 |
|||
我们希望求闻百科的所有页面均能遵循[[Web内容无障碍指南]](WCAG)2.1版,以让条目更易于所有人阅读与编辑。 |
|||
求闻百科的页面应当尽可能遵循[[Web内容无障碍指南]](WCAG)2.1版,该指南将无障碍的基本原则分为可感知、可操作、可理解和稳健。 |
|||
== 基本原则 == |
== 基本原则 == |
||
第12行: | 第14行: | ||
: 非文本内容内容应该有替代文本,从而让不能阅读非文本内容的用户也能够知道其内容。例如,盲人可以通过[[屏幕阅读器]]或者[[盲文]]来知晓图片或者视频中是什么内容。装饰性的内容不要求可感知。 |
: 非文本内容内容应该有替代文本,从而让不能阅读非文本内容的用户也能够知道其内容。例如,盲人可以通过[[屏幕阅读器]]或者[[盲文]]来知晓图片或者视频中是什么内容。装饰性的内容不要求可感知。 |
||
; 基于时间的媒体 |
; 基于时间的媒体 |
||
: 媒体应该要提供替代文本以呈现相同的信息。音频内容应当有字幕或者描述 |
: 媒体应该要提供替代文本以呈现相同的信息。音频内容应当有字幕或者描述(字幕功能也可以通过系统的辅助功能中的实时字幕实现)。 |
||
; 适应性 |
; 适应性 |
||
: 内容应该要可以以不同的方式呈现,而不应该丢失其信息或结构。一个信息,无论是用于理解还是指示的,不能仅通过形状、大小、位置、方向等感官特性呈现。内容的信息和关系应该要正确指定(参见[[#条目结构]]和[[#块元素]])。 |
: 内容应该要可以以不同的方式呈现,而不应该丢失其信息或结构。一个信息,无论是用于理解还是指示的,不能仅通过形状、大小、位置、方向等感官特性呈现。内容的信息和关系应该要正确指定(参见[[#条目结构]]和[[#块元素]])。 |
||
第53行: | 第55行: | ||
正确标题示例: |
正确标题示例: |
||
{{编辑演示 |
|||
<pre>-{}- |
|||
| result = -{}- |
|||
这是条目序言 |
这是条目序言 |
||
== 二级标题 == |
== 二级标题 == |
||
第61行: | 第64行: | ||
==== 四级标题 ==== |
==== 四级标题 ==== |
||
== 二级标题 == |
== 二级标题 == |
||
}} |
|||
</pre> |
|||
随意使用层级的错误标题示例: |
随意使用层级的错误标题示例: |
||
{{编辑演示 |
|||
<pre>-{}- |
|||
| result = -{}- |
|||
这是条目序言 |
这是条目序言 |
||
==== 四级标题 ==== |
==== 四级标题 ==== |
||
第72行: | 第76行: | ||
==== 四级标题 ==== |
==== 四级标题 ==== |
||
=== 三级标题 === |
=== 三级标题 === |
||
}} |
|||
</pre> |
|||
跳级标题的错误示例: |
跳级标题的错误示例: |
||
{{编辑演示 |
|||
<pre>-{}- |
|||
| result = -{}- |
|||
这是条目序言 |
这是条目序言 |
||
第84行: | 第89行: | ||
==== 四级标题 ==== |
==== 四级标题 ==== |
||
== 二级标题 == |
== 二级标题 == |
||
}} |
|||
</pre> |
|||
伪章节标题示例: |
伪章节标题示例: |
||
{{编辑演示 |
|||
<pre>-{}- |
|||
| result = -{}- |
|||
这是条目序言 |
这是条目序言 |
||
== 二级标题 == |
== 二级标题 == |
||
第97行: | 第103行: | ||
== 二级标题 == |
== 二级标题 == |
||
== <small>伪三级标题</small> == |
== <small>伪三级标题</small> == |
||
}} |
|||
</pre> |
|||
第104行: | 第110行: | ||
可接受的例子: |
可接受的例子: |
||
<pre>-{}- |
|||
{{编辑演示 |
|||
| result = -{}- |
|||
条目首段 |
条目首段 |
||
== 二级标题 == |
== 二级标题 == |
||
第115行: | 第123行: | ||
; 术语 |
; 术语 |
||
: 定义 |
: 定义 |
||
}} |
|||
</pre> |
|||
不可接受的例子: |
不可接受的例子: |
||
{{编辑演示 |
|||
<pre>-{}- |
|||
| result = -{}- |
|||
条目首段 |
条目首段 |
||
== 二级标题 == |
== 二级标题 == |
||
第126行: | 第135行: | ||
=== 三级标题 === |
=== 三级标题 === |
||
== <small>伪三级标题</small> == |
== <small>伪三级标题</small> == |
||
}} |
|||
</pre> |
|||
== 排版 == |
|||
{{Anchor|FLOAT}} |
{{Anchor|FLOAT}} |
||
== 浮动 |
=== 浮动内容 === |
||
浮动内容是指显示在文本的右侧或者左侧,占用一定空间的内容。通常来说,信息框、部分图片以及旁注可能就是浮动的。 |
|||
浮动的内容不宜过长,否则可能会影响页面正常内容的显示。不允许假定读者使用的是较大的屏幕。 |
|||
对于图片和信息框而言,样式表对不同的屏幕大小有优化,当屏幕内容过小、不足以以浮动的方式显示内容时,这些内容会直接显示在内容的中间,避免浮动内容占用空间后给剩余的文本留下的过小的空间。 |
|||
如果您是手动使用的<code>float: left</code>或者<code>float:right</code>的样式,请务必考虑该浮动内容在不同屏幕大小下的适应性。如有可能,在屏幕大小不足以显示该浮动内容的情况下,显示在内容中间,而非以浮动的方式显示。 |
|||
=== 横向排列的内容 === |
|||
一些模板或者项目页面等页面可能会在条目中加入横向排列的内容,一个很常见的列子就是将一个区域划分为左右两栏。使用这种方法时应当注意该内容在不同屏幕大小下的适应性,因为当屏幕较小时,横向布局的内容会给每一部分留下非常小的空间,导致一行只能显示少数几个文字就被迫折行,在极端的情况下可能甚至一行只能显示一个文字,或者因为不能换行的内容而强制把内容拉宽。因此,在使用横向布局的内容时,应当考虑较小的屏幕下的显示,例如在此情况下让这些内容纵向显示,确保相应的内容在各种合理的屏幕尺寸下都能够正常地阅读。 |
|||
如果您是使用表格语法对内容进行排版的,请考虑使用flex或者grid布局,如果确实需要使用表格进行排版,应当加入<code>role="presentation"</code>以免被辅助技术作为表格进行使用。具体请参考[[#排版表格]]。 |
|||
在源代码中,浮动元素(包括浮动的图像)应置于所属的章节之内。虽然源代码语法中图像置于页面顶部,但可能被其它浮动元素推到目录下方显示。 |
|||
== 无法正常屏幕阅读的内容 == |
== 无法正常屏幕阅读的内容 == |
||
阅读求闻百科的读者不一定是通过观察屏幕来阅读其内容的,一些读者存在视力 |
阅读求闻百科的读者不一定是通过观察屏幕来阅读其内容的,一些读者存在视力障碍,需要通过屏幕阅读器(又称“讲述人”({{lang-en|narrator}})或“复述功能”)来了解内容,并进行操作。因此,需要确保这些内容(除了仅用于装饰的之外)也能够正常被屏幕阅读。 |
||
=== 特殊符号 === |
=== 特殊符号 === |
||
一些符号 |
一些符号可能无法正常地被屏幕阅读器阅读,这种情况下,可以尝试使用加有替代文本的图像。例如,符号“♥”(心形符号)可能无法被阅读,可以使用“[[File:Twemoji2 2665.svg|15px|alt=心形|link=]]”等图像取代,屏幕阅读器在阅读时,将会读出“心形”这个词<ref>{{Cite web |title=F26: Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information |url=https://www.w3.org/WAI/WCAG21/Techniques/failures/F26 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref>。 |
||
{{notice|符号在屏幕阅读器的“逐字模式”下或许可以读出来,这取决于相应工具的实现情况。}} |
{{notice|符号在屏幕阅读器的“逐字模式”下或许可以读出来,这取决于相应工具的实现情况。}} |
||
第145行: | 第165行: | ||
=== 非文本形式的可交互组件或表意内容 === |
=== 非文本形式的可交互组件或表意内容 === |
||
在一些页面上(特别是在一些小工具中),会有一些'''没有使用文本而仅使用图标的可交互组件''',这在求闻百科的网站皮肤上也很常见。例如,用一个铃铛的图标表示“通知”按钮,用一个放大镜的图标表示“搜索”按钮。对于这类可交互组件,务必做到以下几点: |
在一些页面上(特别是在一些小工具中),会有一些'''没有使用文本而仅使用图标的可交互组件''',这在求闻百科的网站皮肤上也很常见。例如,用一个铃铛的图标表示“通知”按钮,用一个放大镜的图标表示“搜索”按钮。对于这类可交互组件,务必做到以下几点: |
||
* 提供相应的title或name属性(或其他有关的HTML语义)来表明其目的,使得用户在把鼠标悬停在该可交互组件上或将焦点聚集在该可交互组件时,能够看到其文本描述,这样就不会导致看到没有文字的可交互组件后产生困惑。 |
* 提供相应的title或name属性(或其他有关的HTML语义)来表明其目的,使得用户在把鼠标悬停在该可交互组件上或将焦点聚集在该可交互组件时,能够看到其文本描述,这样就不会导致看到没有文字的可交互组件后产生困惑。对于有可见的文本描述的可交互组件,也建议如此,但这不一定是必需的。 |
||
** 对于有可见的文本描述的可交互组件,也建议如此,但这不一定是必需的。 |
|||
* 提供相应的可屏幕阅读的内容,这样屏幕阅读器在阅读此可交互组件时,能够直接将其内容读出来。如果相应内容不是由{{tag|button|o}}或类似标签组成的,提供可屏幕阅读的内容的方法请见下文。 |
* 提供相应的可屏幕阅读的内容,这样屏幕阅读器在阅读此可交互组件时,能够直接将其内容读出来。如果相应内容不是由{{tag|button|o}}或类似标签组成的,提供可屏幕阅读的内容的方法请见下文。 |
||
第188行: | 第207行: | ||
在条目页面中,请勿使用删除线划去任何文字。如有需要,请使用「<nowiki><!--</nowiki>」和「<nowiki>--></nowiki>」注释处理,或直接移除。 |
在条目页面中,请勿使用删除线划去任何文字。如有需要,请使用「<nowiki><!--</nowiki>」和「<nowiki>--></nowiki>」注释处理,或直接移除。 |
||
请避免在导航框中,使用仅删除线来表示某项目已失效 |
请避免在导航框或者类似的列表、表格中,使用仅删除线来表示某项目已失效。可以直接通过括注文本的形式来表明,也可以两者都有。例如(在导航框中): |
||
* 错误:<del>张江有轨电车</del> |
* 错误:<del>张江有轨电车</del> |
||
* 正确:张江有轨电车(已停运) |
* 正确:张江有轨电车(已停运) |
||
* 正确:<del>张江有轨电车</del>(已停运) |
* 正确:<del>张江有轨电车</del>(已停运) |
||
[[屏幕阅读器]]通常不支持呈现文本属性(粗体、斜体、下划线)乃至语义文本属性(强调、重要、文字删除),因此带删除线的文字和正常文字阅读效果相同。此外,在上述使用删除线的情形中,请使用{{tag|del}},不得使用{{tag|s}}。 |
[[屏幕阅读器]]通常不支持呈现文本属性(粗体、斜体、下划线)乃至语义文本属性(强调、重要、文字删除),因此带删除线的文字和正常文字阅读效果相同。此外,在上述使用删除线的情形中,请使用{{tag|del}},不得使用{{tag|s}},后者违背了现代网页设计中样式与HTML标签语义分离的原则。 |
||
如果条目内有错误的内容,不要使用删除线。这些内容应该使用注释处理,或者直接移除;你也可以用某个行内清理模板进行标记,并在讨论页上提出意见。 |
如果条目内有错误的内容,不要使用删除线。这些内容应该使用注释处理,或者直接移除;你也可以用某个行内清理模板进行标记,并在讨论页上提出意见。 |
||
=== 字体大小 === |
=== 字体大小 === |
||
{{Shortcut|QW:SMALL|QW:BIG|QW:FONTSIZE}} |
|||
{{main|QW:TEXT#字型大小}}{{Shortcut|QW:SMALL|QW:BIG|QW:FONTSIZE}}谨慎使用缩小和放大字体。字号通常是由页面元素自动决定,如标题、列表标题、标准模板。改变字号时,应当用原字体的百分比大小(相对大小)描述,而不用像素或[[点(印刷)|点数]]描述绝对大小,以便利默认使用较大字体的用户。 |
|||
谨慎使用缩小和放大字体。字号通常是由页面元素自动决定,如标题、列表标题、标准模板。改变字号时,应当用原字体的百分比大小(相对大小)描述,而不用像素或[[点(印刷)|点数]]描述绝对大小,以便利默认使用较大字体的用户。 |
|||
避免在信息框、导航模板和参考章节等已经为小字体元素的地方再次使用缩小字体。所以,<code><nowiki><small>...</small></nowiki></code>标签,及<code><nowiki>{{small}}</nowiki></code>、<code><nowiki>{{smaller}}</nowiki></code>等模板,不应用于该些页面元素的纯文字。无论何时都不应该使用比85%(或11像素)还小的字体。注意HTML的<code><nowiki><small>...</small></nowiki></code>标签还有“小字条款”的含义,不用作字体风格变化。 |
避免在信息框、导航模板和参考章节等已经为小字体元素的地方再次使用缩小字体。所以,<code><nowiki><small>...</small></nowiki></code>标签,及<code><nowiki>{{small}}</nowiki></code>、<code><nowiki>{{smaller}}</nowiki></code>等模板,不应用于该些页面元素的纯文字。无论何时都不应该使用比85%(或11像素)还小的字体。注意HTML的<code><nowiki><small>...</small></nowiki></code>标签还有“小字条款”的含义,不用作字体风格变化。 |
||
第215行: | 第235行: | ||
{{Tl|lang}}或者以“lang-”开头的一系列模板均可以使语音合成器以正确的语言发音<ref>{{Cite web |title=H58: Using language attributes to identify changes in the human language |url=https://www.w3.org/WAI/WCAG21/Techniques/html/H58 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref>。 |
{{Tl|lang}}或者以“lang-”开头的一系列模板均可以使语音合成器以正确的语言发音<ref>{{Cite web |title=H58: Using language attributes to identify changes in the human language |url=https://www.w3.org/WAI/WCAG21/Techniques/html/H58 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref>。 |
||
此外,在求闻百科中,对于日 |
此外,在求闻百科中,如果对于日文内容如不使用上述模板,那么日本汉字可能会被视作中文错误简繁转换。 |
||
== 链接 == |
== 链接 == |
||
链接(包括内部链接和外部链接)的显示文本应该能够描述链接的目的,而不是“点此”“此处”“查看更多”这样的文本。链接是可交互元素,如果使用屏幕阅读器的用户使用Tab键在链接之间进行导航,听到的却是“链接:点此”“链接:点击此处”,就会感到困惑。因此,链接的显示文本应该能够表现出链接的主要内容。链接的目的应该要能够仅从链接的显示文本中就推断出来<ref>{{Cite web |title=G91: Providing link text that describes the purpose of a link |url=https://www.w3.org/WAI/WCAG21/Techniques/general/G91 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref><ref>{{Cite web |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 |url=https://www.w3.org/WAI/WCAG21/Techniques/failures/F84 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref>。 |
|||
# 不要用Unicode符号当图符;以使用包含替代文字描述的图片替代。比如「→」等符号可能无法在[[屏幕阅读器]]上重现为有效文字,读者看到的可能是问号。 |
|||
例如: |
|||
* '''错误:'''点击[[Help:表格|此处]]以了解如何使用表格(仅从“此处”二字无法推断出链接的目的)。 |
|||
* '''正确:'''请参考[[Help:表格]]以了解如何使用表格(从显示文本中可以推断出,链接的目的是一个叫做“Help:表格”的页面)。 |
|||
* '''正确:'''[[Help:表格|点击此处以了解如何使用表格]](链接文本是整个句子,能够表现出链接的目的)。 |
|||
== 颜色 == |
== 颜色 == |
||
第315行: | 第339行: | ||
* <math>GsRGB = G8bit \div 255</math> |
* <math>GsRGB = G8bit \div 255</math> |
||
* <math>BsRGB = B8bit \div 255</math> |
* <math>BsRGB = B8bit \div 255</math> |
||
==== 对比度检查工具 ==== |
|||
可以选择这些工具检查对比度是否正确: |
|||
* [http://www.paciellogroup.com/resources/contrastAnalyser#download 色彩对比分析器]使您能够挑选在页面上的颜色,并充分检查其对比度。但请务必只使用最新的“亮度”算法,而非过时的“色彩亮度/差”。 |
|||
* 你还可以选择完全更新的[http://snook.ca/technical/colour_contrast/colour.html 斯努克的色彩对比工具]。 |
|||
* Google Chrome Canary有一个带有视觉指南和颜色选择器的颜色对比度调试器。 |
|||
* 网上还有其它工具,但请在使用前检查它们是否更新。一些工具以WCAG 1.0算法为基础,而我们应该参考现今的WCAG 2.0算法。如果工具没有提到其基于WCAG 2.0,则假设它过时。 |
|||
* 您可以将两种颜色输入{{tl|Color contrast ratio}}模板,以计算其对比度;一般推荐小字与背景颜色的对比度在4.5以上,大字与背景颜色的对比度在7以上。 |
|||
此外还有工具可以协助制作图形图表,或是地图等的配色方案。这些工具对于对比度亲和力检查并不严格,但其可以在特定任务上有帮助作用。 |
|||
* [http://Paletton.com/ 配色方案生成器](Paletton)可以协助在图表中选择好的颜色搭配。 |
|||
* [http://colorbrewer2.org/ 色彩酿造师2.0](Color Brewer 2.0)提供了地图的安全配色方案和详细讲解。 |
|||
* [https://personal.sron.nl/~pault/#fig:scheme_light 浅色定性配色方案(Light qualitative colour scheme)]提供了一组9种颜色,适用于色盲用户,并带有黑色文本标签(以及其他调色板)。 |
|||
* 有一些工具可以模拟色盲视觉:[https://www.toptal.com/designers/colorfilter toptal](网页分析)和[https://www.color-blindness.com/coblis-color-blindness-simulator/ coblis](本地文件分析);还有用于网页分析的浏览器扩展:Colorblinding(Chrome)、NoCoffee(Chrome)、[https://addons.mozilla.org/en-US/firefox/addon/nocoffee/ NoCoffee](FireFox) |
|||
* [https://colororacle.org/ Color Oracle]是非常简单的开源工具,可以帮助选择对比色,其自称为“适用于Windows、Mac和Linux的免费色盲模拟器”。它可以让你看到屏幕上的任何东西,就像患有三种色盲之一或灰度的人看到的一样。 |
|||
如果条目过度使用颜色,但你不知道如何亲自修复,则可请其他编辑协助。请将{{tl|Overcolored}}放置于条目顶部。 |
如果条目过度使用颜色,但你不知道如何亲自修复,则可请其他编辑协助。请将{{tl|Overcolored}}放置于条目顶部。 |
||
第351行: | 第360行: | ||
</blockquote> |
</blockquote> |
||
根据此模板的运作机制,{{tl|color box}}模板会自动选择一个对比度高的颜色用于文本的显示。同时,由于使用了<code>mw-no-invert</code>类,在深色模式下,颜色会被纠正为原来的颜色。其中,第二种写法 |
根据此模板的运作机制,{{tl|color box}}模板会自动选择一个对比度高的颜色用于文本的显示。同时,由于使用了<code>mw-no-invert</code>类,在深色模式下,颜色会被纠正为原来的颜色。其中,第二种写法是更好的,因为它可以确保文本的部分与背景保持应有的对比度。 |
||
除此之外,还有很多用于装饰的场合也会使用需要准确表达的颜色。例如,在与轨道交通线路有关的模板中,通常会以装饰为目的而使用线路标志色,这些颜色也应该通过增加<code>mw-no-invert</code>类的方式,避免其在深色模式下被转换。 |
除此之外,还有很多用于装饰的场合也会使用需要准确表达的颜色。例如,在与轨道交通线路有关的模板中,通常会以装饰为目的而使用线路标志色,这些颜色也应该通过增加<code>mw-no-invert</code>类的方式,避免其在深色模式下被转换。 |
||
第361行: | 第370行: | ||
== 列表 == |
== 列表 == |
||
{{shortcut|QW:LISTGAP|QW:LISTGAPS}} |
{{shortcut|QW:LISTGAP|QW:LISTGAPS}} |
||
{{see also| |
{{see also|Help:列表|Qiuwen:格式手册/列表}} |
||
在页面中往往会出现各种形式的'''列表''',用于列举一系列的内容。列表不仅提供了一个外观,在代码层面,不同列表的使用还代表了一定的语义。因此,使用列表时,应当遵循相应的规范。 |
|||
不要在列表项间用空行或表格列分断,即使是定义列表(以分号和冒号打头形成的列表)和无序列表。列表是用来把项目组合起来的,但分断会让MediaWiki理解为结束再新起列表。拆散分组会让屏幕阅读器读者误解与困惑,因为阅读器也会跟着播报多个列表。不当的格式还会让阅读列表消耗三倍以上的时间。 |
|||
=== 不要拆散-{}-列表 === |
|||
同样,请勿列表之中,切换行首符号(分号、星号、井号)。回复时,若对方行首混合用分号与星号(甚至井号),则需要先复制该串符号,后另加一个符号,以正确缩进。开新话题,则取消缩进即可(等同开一个新的HTML表)。 |
|||
不要在列表项间用空行或表格切断。如果使用空格或者其他内容将列表切断,那么将会变成多个列表,也就是说一个列表结束后开户了新的列表。例如: |
|||
{{编辑演示 |
|||
|result=-{}- |
|||
* 白玫瑰 |
|||
* 黄玫瑰 |
|||
* 粉红玫瑰 |
|||
{{tick}}例如,在讨论区,请遵循以下最佳做法: |
|||
* 红玫瑰 |
|||
<pre>-{}- |
|||
}} |
|||
* 支持,我喜欢此想法。—User:Example |
|||
可能你已经看出来了,这个列表的各项之间的显示间距有问题。实际上这个列表是多个列表组成的。如果使用屏幕阅读器(以Windows系统的[[讲述人]]为例),那么屏幕阅读器会这么读: |
|||
** 疑问:你为何喜欢?—User:Example2 |
|||
<blockquote class="hansect"> |
|||
*** 这似乎合乎求闻百科的宗旨和基本原则。—User:Example |
|||
输入列表,2的1,项目符号,白玫瑰,2的2,项目符号,黄玫瑰,退出列表。 |
|||
</pre> |
|||
输入列表,1的1,项目符号,粉红玫瑰,退出列表。 |
|||
{{tick}}或者,用无圆点的缩进: |
|||
输入列表,1的1,项目符号,红玫瑰,退出列表。 |
|||
<pre>-{}- |
|||
</blockquote> |
|||
: 支持,我喜欢此想法。—User:Example |
|||
正确的做法应该是将一个列表连贯到底,例如: |
|||
:: 疑问:你为何喜欢?—User:Example2 |
|||
{{编辑演示 |
|||
::: 这似乎合乎求闻百科的宗旨和基本原则。—User:Example |
|||
|result= |
|||
</pre> |
|||
* 白玫瑰 |
|||
* 黄玫瑰 |
|||
* 粉红玫瑰 |
|||
* 红玫瑰 |
|||
}} |
|||
在讨论页中,也是遵循相同的规则,不要在讨论串中切断列表,下面这个例子就是错误的: |
|||
{{tick}}在回复中隐藏圆点,也可以接受: |
|||
{{编辑演示 |
|||
|result=-{}- |
|||
* 支持,我喜欢此想法。——User:Example |
|||
** 疑问:你为何喜欢?——User:Example2 |
|||
<pre>-{}- |
|||
}} |
|||
* 支持,我喜欢此想法。—User:Example |
|||
*: 疑问:你为何喜欢?—User:Example2 |
|||
*:: 这似乎合乎求闻百科的宗旨和基本原则。—User:Example |
|||
</pre> |
|||
=== 不要中途改换列表形式 === |
|||
{{xmark}}请勿将表格类型由点列表变成定义列表: |
|||
请勿在同一个、同一层级的列表中,混用不用种类的列表,即在源代码中,中途更换行首的符号(分号、星号、井号)。在讨论页,如果您是在源代码模式下回复他人的留言,若对方行首混合用符号,则需要先复制该串符号,后另加一个符号,以正确缩进。开新话题,则取消缩进即可(等同开一个新的HTML表)。 |
|||
例如,以下做法都是可以接受的: |
|||
<pre>-{}- |
|||
{{编辑演示 |
|||
* 支持,我喜欢此想法。—User:Example |
|||
|title=仅使用星号(无序列表)的例子 |
|||
:: 疑问:你为何喜欢?—User:Example2 |
|||
|result=-{}- |
|||
</pre> |
|||
* 支持,我喜欢此想法。——User:Example |
|||
** 疑问:你为何喜欢?——User:Example2 |
|||
*** 这似乎合乎求闻百科的宗旨和基本原则。——User:Example |
|||
}} |
|||
{{编辑演示 |
|||
|title=仅使用冒号(定义列表)的例子 |
|||
|result=-{}- |
|||
: 支持,我喜欢此想法。——User:Example |
|||
:: 疑问:你为何喜欢?——User:Example2 |
|||
::: 这似乎合乎求闻百科的宗旨和基本原则。——User:Example |
|||
}} |
|||
{{编辑演示 |
|||
|title=一级列表为无序列表、二级列表为定义列表的例子 |
|||
|result=-{}- |
|||
* 支持,我喜欢此想法。——User:Example |
|||
*: 疑问:你为何喜欢?——User:Example2 |
|||
*:: 这似乎合乎求闻百科的宗旨和基本原则。——User:Example |
|||
}} |
|||
请勿在中途改换为不同的列表格式 |
|||
{{xmark}}请勿用以下方法(同样将表格类型由点列表变成定义列表): |
|||
{{编辑演示 |
|||
<pre>-{}- |
|||
|title=无序列表改换为定义列表的错误例子1 |
|||
|result=-{}- |
|||
* 支持,我喜欢此想法。—User:Example |
|||
:: 疑问:你为何喜欢?—User:Example2 |
|||
}} |
|||
{{编辑演示 |
|||
|title=无序列表改换为定义列表的错误例子2 |
|||
|result=-{}- |
|||
* 支持,我喜欢此想法。—User:Example |
* 支持,我喜欢此想法。—User:Example |
||
:* 疑问:你为何喜欢?—User:Example2 |
:* 疑问:你为何喜欢?—User:Example2 |
||
}} |
|||
</pre> |
|||
=== 不要越级 === |
|||
{{xmark}}请勿在列表项之间隔空行: |
|||
一级列表的下一级是二级列表,然后是三级,不要从一级列表跳到三级列表。例如,下面这个做法就是错误的: |
|||
{{编辑演示 |
|||
<pre>-{}- |
|||
|result= |
|||
* 支持,我喜欢此想法。—User:Example |
|||
* 兰花 |
|||
* 玫瑰 |
|||
** 疑问:你为何喜欢?—User:Example2 |
|||
*** 白玫瑰 |
|||
</pre> |
|||
*** 黄玫瑰 |
|||
*** 粉红玫瑰 |
|||
{{xmark}}请勿越级: |
|||
*** 红玫瑰 |
|||
* 牡丹 |
|||
<pre>-{}- |
|||
* 杜鹃 |
|||
}} |
|||
{{编辑演示 |
|||
|result=-{}- |
|||
* 支持,我喜欢此想法。—User:Example |
* 支持,我喜欢此想法。—User:Example |
||
*** 疑问:你为何喜欢?—User:Example2 |
*** 疑问:你为何喜欢?—User:Example2 |
||
}} |
|||
</pre> |
|||
=== 列表项中的多个段落 === |
|||
{{xmark|color=yellow}}以下做法不鼓励: |
|||
MediaWiki的列表标记与普通的MediaWiki段落标记不兼容。若要在列表项中放置多个段落,请使用{{tl|pb}}模板将其分开。 |
|||
{{编辑演示 |
|||
<pre>-{}- |
|||
|title=使用{{tlc|pb}}的例子 |
|||
: 支持,我喜欢此想法。—User:Example |
|||
|source=<pre>-{}- |
|||
:* 疑问:你为何喜欢?—User:Example2 |
|||
* 这是列表中的第一项的第一行。{{pb}}这是列表第一项中的第二行。 |
|||
</pre> |
|||
因為加入的圆点,令列表变得更复杂,且令读屏器较难跟上讨论,因為可能将多出的圆点视為全新嵌套列表的开始。 |
|||
=== 列表项中的多个段落 === |
|||
不幸的是,普通的MediaWiki列表标记与普通的MediaWiki段落标记不兼容。若要在列表项中放置多个段落,{{tick}}请使用{{tlx|pb}}模板将其分开。 |
|||
<pre lang="tid">-{}- |
|||
* 这是列表中的第一项。{{pb}}这事列表第一项中的第二行。 |
|||
* 这是列表中的第二项。 |
* 这是列表中的第二项。 |
||
</pre> |
</pre> |
||
|result=* 这是列表中的第一项的第一行。{{pb}}这是列表第一项中的第二行。 |
|||
因为语义不正确,{{cross}}不要使用换行符({{tag|br|single}})来模拟段落。 |
|||
* 这是列表中的第二项。 |
|||
<pre lang="tid">-{}- |
|||
}} |
|||
换行符({{tag|br|single}})是在段落内折行,而不是开启新的段落,因此不能用来形成新段落。 |
|||
{{编辑演示 |
|||
|title=使用{{tag|br|single}}的例子 |
|||
|result=-{}- |
|||
* 这是列表中的第一项。<br>这是列表第一项中的第二行,但行前有一个换行符。 |
* 这是列表中的第一项。<br>这是列表第一项中的第二行,但行前有一个换行符。 |
||
* 这是列表中的第二项。 |
* 这是列表中的第二项。 |
||
}} |
|||
</pre> |
|||
{{cross}}绝对不要试图混用列表符号和半角冒号做缩进排版,因为这会导致一个列表被分裂为三个。 |
|||
不要混用列表符号和半角冒号做缩进排版,因为这会导致一个列表被分裂为三个。从外观上看,似乎是开启了新的段落,而且对齐的,但是这在语义上是不正确的,且容易产生困惑。 |
|||
<pre>-{}- |
|||
{{编辑演示 |
|||
|title=混用的错误例子 |
|||
|result=-{}- |
|||
* 这是第一个列表中的第一项。 |
* 这是第一个列表中的第一项。 |
||
: 这是另一个定义列表。 |
: 这是另一个定义列表。 |
||
* 这是第三个列表中的第一项。 |
* 这是第三个列表中的第一项。 |
||
}} |
|||
可以使用[[Template:HTML lists|HTML列表模板]]之一,以确保列表不会意外分开。若列表中包括块元素(如{{tag|pre}}、表格等),则这一技巧非常有用。 |
|||
{{编辑演示 |
|||
|title=使用列表模板的例子 |
|||
|source=<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=这是列表的第四项。 |
|||
}} |
|||
</pre> |
</pre> |
||
|result={{ordered list |
|||
另外,{{tick}}可以使用[[Template:HTML lists|HTML列表模板]]之一,以确保列表不会意外分开。若列表中包括块元素(如{{tag|pre}})是最有用的。 |
|||
|1=这是列表的第一项的第一段。 |
|||
<pre>-{}-{{bulleted list |
|||
|1=这是列表中的第一项: |
|||
<pre> |
|||
<?php |
|||
这是列表的第二项的第二段。 |
|||
print('Hello world!'); |
|||
|2=这是列表的第二项,然后有一个表格: |
|||
</pre> |
|||
这仍在第一项范畴内。 |
|||
<table class="wikitable"><tr><td>这是一个表格。</td></tr></table> |
|||
|2=这是列表中的第二项。 |
|||
|3=这是列表的第三项,然后有一段代码: |
|||
}}</pre> |
|||
<syntaxhighlight lang="java"> |
|||
public class ExampleClass implements ModInitializer { |
|||
@Override |
|||
public void onInitialize() { |
|||
System.out.println("Hello world!"); |
|||
} |
|||
} |
|||
</syntaxhighlight> |
|||
|4=这是列表的第四项。 |
|||
}}}} |
|||
=== 缩进 === |
=== 缩进 === |
||
{{shortcut|QW:INDENTGAP|QW:INDENTGAPS}} |
{{shortcut|QW:INDENTGAP|QW:INDENTGAPS}} |
||
多行内容的缩进方法是模板{{ |
多行内容的缩进方法是模板{{tlc|block indent}},使用CSS实现缩进。不要滥用{{tag|blockquote}}元素或使用它的模板(如{{tlc|Quote}})进行视觉缩进,这些标记、模板只用于条目中的直接引语。 |
||
{{编辑演示 |
|||
|source=<pre>-{}- |
|||
{{block indent| |
|||
这是第一行。 |
|||
这是第二行。 |
|||
}} |
|||
参照未缩进的文字。</pre> |
|||
|result={{block indent| |
|||
这是第一行。 |
|||
这是第二行。 |
|||
}} |
|||
参照未缩进的文字。}} |
|||
{{编辑演示 |
|||
|result=<blockquote> |
|||
这是第一行。 |
|||
这是第二行。 |
|||
</blockquote> |
|||
参照未缩进的文字。 |
|||
}} |
|||
以英文冒号起头的行会缩进。比如这种用法会在讨论页的往来讨论中表示回复。该缩进是使用了HTML的定义列表。这在可亲和性和语义学上都并不理想,但目前却广泛应用。缩进行之间不应插入空行,因为这表示列表的结束并开启新列表。如果确实需要空行,请插入一个以同样数量冒号起头的额外行。 |
以英文冒号起头的行会缩进。比如这种用法会在讨论页的往来讨论中表示回复。该缩进是使用了HTML的定义列表。这在可亲和性和语义学上都并不理想,但目前却广泛应用。缩进行之间不应插入空行,因为这表示列表的结束并开启新列表。如果确实需要空行,请插入一个以同样数量冒号起头的额外行。 |
||
第464行: | 第572行: | ||
MediaWiki解析器将带有行首冒号(:)的所在行标记为HTML描述列表({{tag|dl}})的一部分({{tag|dd}}){{efn|1=HTML描述列表以前被称为定义列表和关联列表。<code><nowiki><dl><dt>...</dt><dd>...</dd></dl></nowiki></code>的代码结构一致,只有术语在HTML规范版本之间发生了变化。}}。在大多数网络浏览器中,其视觉效果是缩进行。例如,这用于表示讨论页中讨论串中的回复。然而,仅包含此标记就缺少描述列表中所需的{{tag|dt|o}}元素(语义为“术语”),而{{tag|dd|o}}元素(语义为“描述”“定义”)与该元素相关。通过检查发送到浏览器的代码可以看出,这会导致HTML损坏(即验证失败)。结果是,屏幕阅读器等辅助技术会报出一个实际上不存在的描述列表,这让任何不习惯MediaWiki所输出非标准HTML的访问者感到困惑。这并不利于无障碍访问,不符合HTML语义原则,也不利于其他用户对内容加以利用。尽管它会给屏幕阅读器的用户带来问题,但在MediaWiki中很常用。 |
MediaWiki解析器将带有行首冒号(:)的所在行标记为HTML描述列表({{tag|dl}})的一部分({{tag|dd}}){{efn|1=HTML描述列表以前被称为定义列表和关联列表。<code><nowiki><dl><dt>...</dt><dd>...</dd></dl></nowiki></code>的代码结构一致,只有术语在HTML规范版本之间发生了变化。}}。在大多数网络浏览器中,其视觉效果是缩进行。例如,这用于表示讨论页中讨论串中的回复。然而,仅包含此标记就缺少描述列表中所需的{{tag|dt|o}}元素(语义为“术语”),而{{tag|dd|o}}元素(语义为“描述”“定义”)与该元素相关。通过检查发送到浏览器的代码可以看出,这会导致HTML损坏(即验证失败)。结果是,屏幕阅读器等辅助技术会报出一个实际上不存在的描述列表,这让任何不习惯MediaWiki所输出非标准HTML的访问者感到困惑。这并不利于无障碍访问,不符合HTML语义原则,也不利于其他用户对内容加以利用。尽管它会给屏幕阅读器的用户带来问题,但在MediaWiki中很常用。 |
||
空行不能放在冒号缩进的文本行之间,尤其是在文章内容中。这被软件解释为标记列表的结束和新列表的开始。如果需要空行,请在其上放置与空行下方文本前相同数量的冒号,例如: |
空行不能放在冒号缩进的文本行之间,尤其是在文章内容中。这被软件解释为标记列表的结束和新列表的开始。如果需要空行,请在其上放置与空行下方文本前相同数量的冒号,例如: |
||
{{编辑演示|result=-{}- |
|||
: 此处有文字。 |
: 此处有文字。 |
||
: <br> |
|||
: |
|||
: 更多文字。 |
: 更多文字。 |
||
}} |
|||
</pre>另一个解决方案是新的段落标记({{Tag|p}}),但它必须在源代码中的同一行中:<pre><nowiki>: 文字。<p>新段落文字。</p></nowiki></pre> |
|||
=== 垂直列表 === |
|||
==== 无序垂直列表 ==== |
|||
对于无序垂直列表,请不要在项目之间用空行隔行。如果列表项之间有超过一次换行,HTML列表将会在换行后结束,并在下一项的换行之前开启一个新HTML列表。这种有效换行在[[屏幕阅读器]]中会被视为几个小列表。比如{{xmark}}代码: |
|||
=== 无项目符号列表 === |
|||
<pre>-{}- |
|||
如果需要让列表没有项目符号,可使用模板{{tl|plainlist}}和{{tl|unbulleted list}}以提供语义,表明这是一个列表,而非通过{{Tag|br|single}}换行。您也可以给相应的元素添加<code>plainlist</code>类。例如: |
|||
* 白玫瑰 |
|||
{{编辑演示 |
|||
|title=使用{{tl|plainlist}}模板的例子 |
|||
|source=<pre>-{}- |
|||
{{plainlist |
|||
|* 白玫瑰 |
|||
* 黄玫瑰 |
* 黄玫瑰 |
||
* 粉红玫瑰 |
* 粉红玫瑰 |
||
* 红玫瑰}} |
|||
* 红玫瑰 |
|||
</pre> |
</pre> |
||
|result= |
|||
因为软件抑制了行距,所以看起来如: |
|||
{{plainlist |
|||
* 白玫瑰 |
|* 白玫瑰 |
||
* 黄玫瑰 |
* 黄玫瑰 |
||
* 粉红玫瑰 |
* 粉红玫瑰 |
||
* 红玫瑰}} |
|||
|resultcontentclass=hansect}} |
|||
* 红玫瑰 |
|||
{{编辑演示 |
|||
|title=使用{{tl|unbulleted list}}的例子 |
|||
但是屏幕阅读器读者看起来是:“输入列表,2的1,项目符号,白玫瑰,2的2,项目符号,黄玫瑰,退出列表。输入列表,1的1,项目符号,粉红玫瑰,退出列表。输入列表,1的1,项目符号,红玫瑰,退出列表。” |
|||
|source=<pre>-{}- |
|||
{{unbulleted list |
|||
请不要以换行符分隔列表项目。请用以下方法代之。 |
|||
|白玫瑰 |
|||
|黄玫瑰 |
|||
==== 无项目符号垂直列表 ==== |
|||
|粉红玫瑰 |
|||
{{shortcut|QW:PLIST|QW:VLIST}} |
|||
|红玫瑰}} |
|||
</pre> |
|||
对于页面中纵向列出的无项目符号列表,可使用模板{{tl|plainlist}}和{{tl|unbulleted list}}来提高亲和性语义意义,表明这是一个清晰的列表,而非通过不应使用的{{Tag|br|single}}换行。 |
|||
|result= |
|||
{{unbulleted list |
|||
代之在导航框一类模板或合适的容器中,可以使用CSS类“<code>plainlist</code>”,也就是: |
|||
|白玫瑰 |
|||
|黄玫瑰 |
|||
: <code>| listclass = plainlist</code>或 |
|||
|粉红玫瑰 |
|||
: <code>| bodyclass = plainlist</code> |
|||
|红玫瑰}}|resultcontentclass=hansect}} |
|||
{{编辑演示 |
|||
在信息框中则可以使用: |
|||
|title=使用{{tag|br|single}}的错误例子 |
|||
|source=<pre>-{}- |
|||
: <code>| rowclass = plainlist</code> |
|||
白玫瑰<br> |
|||
黄玫瑰<br> |
|||
或者 |
|||
粉红玫瑰<br> |
|||
: <code>| bodyclass = plainlist</code> |
|||
红玫瑰 |
|||
</pre> |
|||
另见[[Qiuwen:格式手册/列表#无项目符号列表]]。 |
|||
|result= |
|||
白玫瑰<br> |
|||
黄玫瑰<br> |
|||
粉红玫瑰<br> |
|||
红玫瑰|resultcontentclass=hansect}} |
|||
=== 水平列表 === |
=== 水平列表 === |
||
{{shortcut|QW:HLIST}} |
{{shortcut|QW:HLIST}} |
||
对于页面中横向列出的,以及信息框等表格中 |
对于页面中横向列出的,以及信息框等表格中横向列出的列表,请使用{{tl|flatlist}}和{{tl|hlist}}模板以提供语义,表明这是一个列表,同时这对内容的排版也会有一定的优化。 |
||
{{编辑演示 |
|||
代之在导航框等模板或相似的容器中,列表可以使用CSS类“<code>hlist</code>”格式,也就是: |
|||
|title=使用{{tl|flatlist}}的例子 |
|||
|source=<syntaxhighlight lang="wikitext"> |
|||
: <code>| listclass = hlist</code>或 |
|||
{{flatlist| |
|||
: <code>| bodyclass = hlist</code> |
|||
* [[东方绿舟站]] |
|||
* [[朱家角站]] |
|||
信息框中可使用: |
|||
* [[淀山湖大道站]] |
|||
* [[漕盈路站]] |
|||
: <code>| rowclass = hlist</code>或 |
|||
* ……}}</syntaxhighlight> |
|||
: <code>| bodyclass = hlist</code> |
|||
|result= |
|||
{{flatlist| |
|||
* [[东方绿舟站]] |
|||
* [[朱家角站]] |
|||
* [[淀山湖大道站]] |
|||
* [[漕盈路站]] |
|||
* ……}}}} |
|||
=== 列表标题 === |
=== 列表标题 === |
||
{{see also|#PSEUDOHEAD}} |
|||
{{see also|#PSEUDOHEAD}}不应使用半角分号在列表前生成 "假标题"(图1);语义上,分号开头的列表应接续一组以半角冒号开头的列表,以表示术语表的标题及其条目(图2)。若要表示一组无序列表,应使用章节标记(图3)。 |
|||
不应使用半角分号在列表前生成“伪标题”。语义上,分号开头的列表应接续一组以半角冒号开头的列表,以表示术语表的标题及其条目。若要表示一组无序列表,应使用章节标记。 |
|||
{{编辑演示 |
|||
<div role="figure" style="display: inline-block; margin: 0 1em; width: 17em;"> |
|||
|title=错误例子:使用伪标题 |
|||
'''{{cross}} 图1 不正确'''<syntaxhighlight lang="tid"> |
|||
|result= |
|||
; 稀有气体 |
; 稀有气体 |
||
* 氦(He) |
* 氦(He) |
||
第543行: | 第662行: | ||
* 氙(Xe) |
* 氙(Xe) |
||
* 氡(Rn;放射性) |
* 氡(Rn;放射性) |
||
* 鿫(Og;人工合成,存疑) |
* 鿫(Og;人工合成,存疑)}} |
||
{{编辑演示 |
|||
</syntaxhighlight></div> |
|||
|title=正确例子:使用定义列表标题 |
|||
<div role="figure" style="display: inline-block; margin: 0 1em; width: 17em;"> |
|||
|result= |
|||
'''{{tick}} 图2 定义列表(正确)'''<pre> |
|||
; 稀有气体 |
; 稀有气体 |
||
: 氦(He) |
: 氦(He) |
||
第555行: | 第674行: | ||
: 氡(Rn;放射性) |
: 氡(Rn;放射性) |
||
: 鿫(Og;人工合成,存疑) |
: 鿫(Og;人工合成,存疑) |
||
}} |
|||
</pre></div> |
|||
{{编辑演示 |
|||
<div role="figure" style="display: inline-block; margin: 0 1em; width: 17em;"> |
|||
|title=正确例子:使用章节标题 |
|||
'''{{tick}} 图3 章节标题及无序列表(正确)'''<pre> |
|||
|source=<syntaxhighlight lang="wikitext"> |
|||
=== 稀有气体 === |
=== 稀有气体 === |
||
* 氦(He) |
|||
* 氖(Ne) |
|||
* 氩(Ar) |
|||
* 氪(Kr) |
|||
* 氙(Xe) |
|||
* 氡(Rn;放射性) |
|||
* 鿫(Og;人工合成,存疑)</syntaxhighlight> |
|||
|result= |
|||
{{fake heading|稀有气体|level=3}} |
|||
* 氦(He) |
* 氦(He) |
||
* 氖(Ne) |
* 氖(Ne) |
||
第566行: | 第695行: | ||
* 氡(Rn;放射性) |
* 氡(Rn;放射性) |
||
* 鿫(Og;人工合成,存疑) |
* 鿫(Og;人工合成,存疑) |
||
}} |
|||
</pre></div> |
|||
== 表格 == |
== 表格 == |
||
{{参见|Help:表格}} |
|||
表格可以用来呈现二维的数据。在HTML中,表格是具有一定的语义的。因此,表格不仅需要在视觉上正确,还应该有恰当的语义。 |
|||
=== 使用标题单元格 === |
|||
屏幕阅读器和其它网页浏览器工具通过特定表格标签帮助用户导航其中记录的数据。 |
|||
{{shortcut|QW:DTAB}} |
|||
标题单元格内置了加粗、居中的样式,同时还具有相应的语义。因此,请恰当地使用标题单元格。在HTML中,它代表{{tag|th}}元素。而在wikitext表格语法中,它是使用<code>!</code>(感叹号)来实现的<ref>{{Cite web |title=H51: Using table markup to present tabular information |url=https://www.w3.org/WAI/WCAG21/Techniques/html/H51 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref><ref>{{Cite web |title=11.2.6 Table cells: The TH and TD elements |url=https://www.w3.org/TR/html40/struct/tables.html#h-11.2.6 |website=HTML 4.01 Specification |publisher=[[W3C]] |access-date=2023-05-15}}</ref>。 |
|||
{{编辑演示 |
|||
使用正确的维基表格管道语法利于所有可用特性。见[[Help:表格]]获得更多关于表格特定语法的信息。请不要单独使用格式——从CSS或硬编码风格——创建语义意义(如改变背景颜色)。 |
|||
|title=正确使用标题单元格的例子 |
|||
|result=-{}- |
|||
{{(!}} class="wikitable" |
|||
! 标题单元格1 !! 标题单元格2 |
|||
{{!}}- |
|||
{{!}} 数据1-1 {{!!}} 数据1-2 |
|||
{{!}}- |
|||
{{!}} 数据2-1 {{!!}} 数据2-2 |
|||
{{!)}} |
|||
}} |
|||
请不要仅通过样式来使得一些单元格看上去像是标题单元格。 |
|||
“系列模板”及[[Help:信息框|信息框]]由表格制成。 |
|||
{{编辑演示 |
|||
|title=使用样式伪造标题单元格的错误例子 |
|||
|result=-{}- |
|||
{{(!}} class="wikitable" |
|||
{{!}} style="text-align: center" {{!}} '''标题单元格1''' |
|||
{{!}} style="text-align: center" {{!}} '''标题单元格2''' |
|||
{{!}}- |
|||
{{!}} 数据1-1 {{!!}} 数据1-2 |
|||
{{!}}- |
|||
{{!}} 数据2-1 {{!!}} 数据2-2 |
|||
{{!)}} |
|||
}} |
|||
如有可能,您可以使用<code>scope="col"</code>或者<code>scope="row"</code>来更加清晰地表明这个标题单元格的用途,这有助于屏幕阅读器更好地阅读这个表格<ref name="H63">{{Cite web |title=H63: Using the scope attribute to associate header cells and data cells in data tables |url=https://www.w3.org/WAI/WCAG21/Techniques/html/H63 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref>。 |
|||
通过在相邻单元格中嵌入成组的HTML{{Xtag|br}}、{{Xtag|hr}}标签,可以在视觉上创建多行信息框,不过该技术并不适合HTML表格结构。屏幕阅读器用户是以单元格和HTML行为单位阅读,而非以视觉上的行阅读,因此这对它们会产生问题。 |
|||
{{编辑演示 |
|||
|title=使用<code>scope</code>参数的正确例子 |
|||
|result=-{}- |
|||
{{(!}} 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 |
|||
{{!)}} |
|||
}} |
|||
=== |
=== 表格标题 === |
||
表格标题是显示在表格最上方的文本描述整个表格的内容<ref name="H39">{{Cite web |title=H39: Using caption elements to associate data table captions with data tables |url=https://www.w3.org/WAI/WCAG21/Techniques/html/H39 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref>。在HTML中,表格标题是{{tag|caption}}标签。在wikitext中,表格标题是以<code>|+</code>(管道符号和一个加号)开始的内容。 |
|||
{{shortcut|QW:DTAB}} |
|||
以下给出了数据表格的示例: |
|||
<pre> |
|||
{| |
|||
|+ [标题文字] |
|||
|- |
|||
! scope="col" | [列标题1] |
|||
! scope="col" | [列标题2] |
|||
! scope="col" | [列标题3] |
|||
|- |
|||
! scope="row" | [列标题1] |
|||
| [常规单元格1,2] || [常规单元格1,3] |
|||
|- |
|||
! scope="row" | [列标题2] |
|||
| [常规单元格2,2] || [常规单元格2,3] |
|||
... |
|||
|} |
|||
</pre> |
|||
{{编辑演示|title=使用表格标题的例子 |
|||
; 标题文字(<code>|+</code>) : 标题文字是表格的题头,描述其性质<ref name="H39">{{Cite web |title=H39: Using caption elements to associate data table captions with data tables |url=https://www.w3.org/WAI/WCAG21/Techniques/html/H39 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref>。 |
|||
|result=-{}- |
|||
; 行、列标题(<code> ! </code>): 如同标题文字,它们使信息以更为逻辑的结构展现给读者<ref>{{Cite web |title=H51: Using table markup to present tabular information |url=https://www.w3.org/WAI/WCAG21/Techniques/html/H51 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref>。行列标题有助于屏幕阅读器显示数据单元格的标题信息。例如:标题信息会在单元格数据之前念出,或标题信息根据要求提供<ref>{{Cite web |title=11.2.6 Table cells: The TH and TD elements |url=https://www.w3.org/TR/html40/struct/tables.html#h-11.2.6 |website=HTML 4.01 Specification |publisher=[[W3C]] |access-date=2023-05-15}}</ref>。 |
|||
{{(!}} class="wikitable" |
|||
; 标题的范围(<code> ! scope="col" | and ! scope="row" | </code>): 这清晰的定义了行标题或列标题,指明了标题和其他单元格的对应关系。<ref name="H63">{{Cite web |title=H63: Using the scope attribute to associate header cells and data cells in data tables |url=https://www.w3.org/WAI/WCAG21/Techniques/html/H63 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref> |
|||
{{!}}+ 表格标题 |
|||
! 标题单元格1 !! 标题单元格2 |
|||
{{!}}- |
|||
{{!}} 数据1-1 {{!!}} 数据1-2 |
|||
{{!}}- |
|||
{{!}} 数据2-1 {{!!}} 数据2-2 |
|||
{{!)}} |
|||
}} |
|||
不建议使用横跨一整行的单元格来表示一个表格标题,因为这语义不太正确。 |
|||
简而言之,数据表格应满足下列要求: |
|||
{{编辑演示|title=伪造表格标题的例子 |
|||
|result=-{}- |
|||
# 正确的表格标题 |
|||
{{(!}} class="wikitable" |
|||
# 正确的标题结构 |
|||
! colspan="2" {{!}} 表格标题 |
|||
# 图像和颜色 |
|||
{{!}}- |
|||
# 避免嵌套表格 |
|||
! 标题单元格1 !! 标题单元格2 |
|||
{{!}}- |
|||
{{!}} 数据1-1 {{!!}} 数据1-2 |
|||
{{!}}- |
|||
{{!}} 数据2-1 {{!!}} 数据2-2 |
|||
{{!)}} |
|||
}} |
|||
=== 排版表格 === |
=== 排版表格 === |
||
{{shortcut|QW:LTAB}} |
{{shortcut|QW:LTAB}} |
||
请避免使用表格做纯排版用途。表格是表格,并不是用来排版的。如有可能,请使用更具适应性的{{tag|div}}或者{{code|style}}属性。如果需要对内容排版,请使用flex或grid布局,而不是使用表格。 |
|||
{{mbox|text=即使是使用flex或grid布局对内容进行排版,也不适合在条目内这么做,条目正文通常不应该有复杂的样式。}} |
|||
如确实需要使用表格进行布局,请添加<code>role="presentation"</code>属性,这样屏幕阅读器就不会将其视为一个表格。例如: |
|||
请避免使用表格做纯排版用途。数据表提供了额外的信息和导航方法,当内容缺乏逻辑行和列关系时,这些信息和导航方式可能会令人困惑。 |
|||
{{编辑演示|title=使用表格进行布局的例子 |
|||
最佳的选择是使用更有适应性的[[HTML]]的<code><div></code>块和样式({{Code|style}})属性。 |
|||
|result=-{}- |
|||
{{(!}} style="margin:auto; text-align:center; border-spacing: 1em 0.25em" role="presentation" |
|||
{{!}} colspan="2" style="font-weight: bold" {{!}} 诗经 |
|||
{{!}}- |
|||
{{!}} 昔我往矣 {{!!}} 杨柳依依 |
|||
{{!}}- |
|||
{{!}} 今我来思 {{!!}} 雨雪霏霏 |
|||
{{!)}} |
|||
}} |
|||
这样,屏幕阅读器在阅读这首诗的时候,就会直接说这首诗的标题和内容,而不是将其说成是一个表格。 |
|||
使用表格定位非表格内容时,帮助屏幕阅读器将其识别为布局表格,而不是数据表格。在表上设置<code>role="presentation"</code>属性,并且不设置任何<code>summary</code>属性。不要在表内或任何嵌套表内使用任何<code><caption></code>或<code><th></code>元素。在wiki表标记中,这意味着不要使用<code>|+</code>或<code>!</code>前缀。确保内容的阅读顺序正确。视觉效果(如居中或粗体)可以通过样式表或语义元素来实现。例如: |
|||
<pre> |
|||
上面这个例子基本上等价于如下的grid布局: |
|||
{| role="presentation" class="toccolors" |
|||
{{编辑演示|title=使用grid布局的例子 |
|||
| colspan="2" style="text-align: center; background-color: #ccf;" | <strong>重要文本</strong> |
|||
|result=-{}- |
|||
|- |
|||
<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> |
|||
</pre> |
|||
<div>雨雪霏霏</div> |
|||
</div> |
|||
}} |
|||
{{mbox|text=上面这个例子只是为了举例。实际上,条目内并不适合使用这么复杂的样式,对于诗句而言,不使用样式进行排版是最简单且最适合的。因此,这个例子只是在介绍这一原理。}} |
|||
== 图像 == |
== 图像 == |
||
{{Shortcut|QW:ACCIM}} |
{{Shortcut|QW:ACCIM}} |
||
{{Further|Qiuwen:格式手册#图像 |
{{Further|Qiuwen:格式手册#图像}} |
||
图像除了装饰之外,都应当有替代文字({{lang-en|alternative text}}),供没有加载图片或者无法看到图片的人使用。替代文字应该要能够描述图片的内容。 |
|||
避免用图片替代数据图表,除了数据图表中的绝大多数内容都可以通过替代文字表示出来。 |
|||
# 所有非装饰的图像都要有替代文字。替代文字是给视障人士读者、搜索蜘蛛和其他非视觉用户的代替品。加入的替代文字应该简洁,或者应该提到图像题注或相邻文字。 |
|||
# 在[[Qiuwen:题注#特殊情况|多数情况下]],无论是使用内置的图像语法,还是一行附属文字,图像都应该带有[[Qiuwen:题注|题注]]。题注应该简洁描述图像意义,即其试图传达的必要信息。 |
|||
为了能够适应不同的场景,请避免使用固定的图片大小。 |
|||
# 避免用图片替代数据图表。若可能,任何图表都应该有替代文字或充分描述,使无法查看图像的用户可以明白一些内容。 |
|||
#除非绝对必要,否则避免将文本夹在两个图像之间,或者使用固定的图像大小。 |
|||
请不要使用“左图”或“右图”的描述,除非能够确保图片确实是在左边或者右边。这是因为,当页面内容显示时,会为不同的显示屏幕进行调整,当使用较小的屏幕(例如手机)时,图片并不会显示在左边或者右边。而且,“左图”“右图”的表述对于辅助技术来说也是没有意义的。 |
|||
#避免不分青红皂白向页面中加入图库([[Qiuwen:Manual_of_Style/Mathematics#Typesetting_of_mathematical_formulae|{{tag|gallery|o}}]]),因为用户的屏幕大小和浏览器有所差异,可能会因图像显示碎片而影响某些读者的访问。 |
|||
# 不要使用左图或右图的描述。对于求闻百科移动版而言,图像的排列是不同的,而这对于使用辅助软件的读者也没有意义。相反,请使用题注来指明图像。 |
|||
#如有不适合条目的详细图像说明,则应将其置于图像描述页,并留下文字注明,点开图像链接可以获得更详细描述。 |
|||
#图像应置于其所属章节内(在章节标题和引导至其他条目的链接之后),不应放在标题里面或上一章节末尾,否则屏幕阅读器会在其它章节显示图像(和替代文字。 |
|||
# 该指引包括[[Qiuwen:Manual_of_Style/Mathematics#Typesetting_of_mathematical_formulae|{{tag|math|o}}]]标签内LaTeX格式公式的替代文字。 |
|||
#不要将图片放在标题中;这包括图标和[[Qiuwen:Manual_of_Style/Mathematics#Typesetting_of_mathematical_formulae|{{tag|math|o}}]]标记;这样做可能会导致章节链接受损,并导致其他问题。 |
|||
== 动画、视频与音频 == |
== 动画、视频与音频 == |
||
第647行: | 第827行: | ||
=== 动画 === |
=== 动画 === |
||
出于 |
出于无障碍考虑,动画([[GIF]]:图形交换格式)应该满足以下两者之一: |
||
* 持续时间不超过5秒(否则会变成纯装饰元素)<ref>{{Cite web |title=G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds) |url=https://www.w3.org/WAI/WCAG21/Techniques/general/G152 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref>,或者 |
* 持续时间不超过5秒(否则会变成纯装饰元素)<ref>{{Cite web |title=G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds) |url=https://www.w3.org/WAI/WCAG21/Techniques/general/G152 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref>,或者 |
||
* 有控制模块(停止、暂停、播放)<ref>{{Cite web |title=G4: Allowing the content to be paused and restarted from where it was paused |url=https://www.w3.org/WAI/WCAG21/Techniques/general/G4 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref>。 |
* 有控制模块(停止、暂停、播放)<ref>{{Cite web |title=G4: Allowing the content to be paused and restarted from where it was paused |url=https://www.w3.org/WAI/WCAG21/Techniques/general/G4 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref>。 |
||
总而言之,大多数动画GIF应当能转换为视频。 |
总而言之,大多数动画GIF应当能转换为视频。 |
||
此外,动画在任何一秒钟内产生的闪光 |
此外,动画在任何一秒钟内产生的闪光'''严禁超过三次''',否则这将违反不干涉原则,导致光敏癫痫发作<ref name="wcag 2.0 gl2.3">{{Cite web |date=11 December 2008 |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 |website=Web Content Accessibility Guidelines (WCAG) 2.0 |publisher=[[World Wide Web Consortium]] |access-date=28 May 2015}}</ref>。 |
||
=== 视听内容 === |
=== 视听内容 === |
||
视听内容可以加入计时文本格式的字幕。对于视频内容,为便于听力障碍者使用,可以加入隐藏字幕。隐藏字幕以文字形式提供了关于声音的全部重要信息。其可以包含在对话、声音(自然或人声)、环境与背景、人与动物的动作表情,以及文本或图形<ref>{{Cite web |title=G69: Providing an alternative for time based media |url=https://www.w3.org/WAI/WCAG21/Techniques/general/G69 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref>。 |
视听内容可以加入计时文本格式的字幕。对于视频内容,为便于听力障碍者使用,可以加入隐藏字幕。隐藏字幕以文字形式提供了关于声音的全部重要信息。其可以包含在对话、声音(自然或人声)、环境与背景、人与动物的动作表情,以及文本或图形<ref>{{Cite web |title=G69: Providing an alternative for time based media |url=https://www.w3.org/WAI/WCAG21/Techniques/general/G69 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref>。 |
||
对于声音内容而言,可以很方便地为演讲、歌词和对话等加入字幕<ref>{{Cite web |title=G158: Providing an alternative for time-based media for audio-only content |url=https://www.w3.org/WAI/WCAG21/Techniques/general/G158 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</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]。 |
|||
== 可交互组件 == |
|||
对于声音内容而言,可以很方便的为演讲、歌词和对话等加入字幕<ref>{{Cite web |title=G158: Providing an alternative for time-based media for audio-only content |url=https://www.w3.org/WAI/WCAG21/Techniques/general/G158 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref>。 |
|||
可交互组件通常由系统界面或者皮肤提供。在求闻百科,可交互组件往往是由[[Help:小工具|小工具]]产生的。对于这类可交互组件,应当: |
|||
{{Ordered list |
|||
|1=不仅可以使用鼠标点击来激活,还可以通过键盘来激活。例如,在不使用鼠标的情况下,使用Tab键选择到这个组件,然后按空格(Space)或者回车(Enter)键,也能够触发该功能。 |
|||
例如,下面这个代码中,此元素不具备键盘可操作性: |
|||
== 样式及标记选项 == |
|||
<syntaxhighlight lang="html"> |
|||
{{shortcut|QW:DEVIATIONS}} |
|||
<button id="myButton">这是一个按钮</button> |
|||
<script> |
|||
$('#myButton').click(event => alert("你好,世界!")); |
|||
</script> |
|||
</syntaxhighlight> |
|||
可以进行如下更改: |
|||
=== 最佳实践 === |
|||
<syntaxhighlight lang="html"> |
|||
表格与其他区块元素的格式,应尽量采用CSS类(CSS class)调用样式表中已定义的样式,而不是撰写行间CSS代码(inline CSS)。全站CSS样式表([[MediaWiki:Common.css]])已经过测试,在大多数浏览器条件下可以确保兼容性,满足大部分用户的需求。此外,注册用户可以通过自定义样式表([[Special:MyPage/skin.css]];或浏览器设置)以修改配色方案,以满足自身的特定需求。 |
|||
<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> |
|||
</syntaxhighlight> |
|||
|2=通过Tab键对元素进行选中的顺序应当于相应内容的视觉上的顺序保持一致,通常来说它们在代码中也应当保持这样的顺序。 |
|||
|3=对于有标签的小型组件(例如单选框、复选框),应当将其置于使用的{{Tag|label}}标签中,或者使用相应的<code>for</code>参数,确保当点击的是标签文本而非该组件本身时,也能够选择该组件。例如: |
|||
<syntaxhighlight lang="html"> |
|||
错误写法: |
|||
<input type="radio" name="agree" />设为默认 |
|||
正确写法: |
|||
为了在实现无障碍访问的同时确保页面的美观,页面可以在一定程度上允许页面与公认的互联网标准存在差异。若页面的某些配色方案偏离公认标准,其作者应确保其满足无障碍访问要求(例如:颜色应满足对比度要求、添加相应辅助属性标签等)。 |
|||
<label><input type="radio" name="agree" />设为默认</label> |
|||
</syntaxhighlight> |
|||
|4=对于弹出式菜单,该菜单不应该只在鼠标悬浮在相应元素上时才显示,还应该提供一种机制,使其能够在通过键盘或者鼠标操作的情况下,即使没有将鼠标悬浮在有关的元素上,也能够显示弹出菜单。如有可能,还应当提供相应的语义。 |
|||
|5=可交互组件必须要有一个无障碍名称({{lang-en|accessible name}})。请看下面这个例子,在例子中的错误写法中,一些人能够知道该按钮使用字母“X”代表关闭,但是辅助功能只会说“X按钮”,对于视觉受限的人而言,可能会产生困惑,因此需要让辅助技术将其描述为“关闭”。 |
|||
<syntaxhighlight lang="html"> |
|||
错误写法: |
|||
<button id="closeButton">X</button> |
|||
正确写法: |
|||
页面应优先使用[[Help:EDIT|wiki标记]];wiki标记无法满足要求或不能使用wiki标记的情况下,才可以使用[[Help:HTML|HTML元素]]。您应避免使用HTML标签<code><nowiki><i>...</i></nowiki></code>、<code><nowiki><b>...</b></nowiki></code>来表示斜体、粗体文字,而应使用wiki标记<code><nowiki>''</nowiki></code>、<code><nowiki>'''</nowiki></code>;在不能使用wiki标记的情况下,请使用具有语义的HTML标签,诸如<code><nowiki><em>...</em></nowiki></code>和<code><nowiki><strong>...</strong></nowiki></code>。HTML的<code>font-size</code>属性也应尽量避免使用(禁止使用{{tag|font|o}}),建议使用{{tl|em}}、{{tl|strong}}、{{tl|code}}、{{tl|small}}及{{tl|big}}等模板替代,这些模板包含具有语义的wiki标记或HTML标签,并使用行间CSS代码添加样式,可以强调与其它文字的不同之处。 |
|||
<button id="closeButton">关闭</button> |
|||
<button id="closeButton" aria-label="关闭">X</button> |
|||
=== 折叠内容 === |
|||
</syntaxhighlight> |
|||
{{anchor|滚动及摺叠章节}}{{shortcut|QW:PRECOLLAPSE}} |
|||
{{notice|可交互组件的无障碍名称(例如上面的<code>aria-label</code>参数)中通常不含该可交互组件的类型,因为辅助技术已将其识别。例如,上面这个按钮的名称应该是“关闭”而非“关闭按钮”或“按钮:关闭”。}} |
|||
{{seealso|Qiuwen:格式手册#滚动列表及摺叠内容|mw:No-JavaScript notes}} |
|||
}} |
|||
自动[[Help:COLL|折叠]]的元素(或设为“预先折叠”的元素)不应用于隐藏文章主体中的内容。 |
|||
对于使用较少支持[[JavaScript]]、[[CSS]]新特性的较旧浏览器的读者,求闻百科的界面应该维持基本的可读性。请编者考虑到那些浏览器不支持相应JavaScript、CSS特性的用户,确保他们至少可以阅读。 |
|||
若您需要模拟较旧浏览器,可以尝试在浏览器中关闭JavaScript、CSS。 |
|||
== 注释 == |
== 注释 == |
||
第700行: | 第905行: | ||
* {{Cite web |url=https://www.w3.org/TR/html40/ |title=HTML 4.01 Specification |publisher=W3C |year=1999 }} |
* {{Cite web |url=https://www.w3.org/TR/html40/ |title=HTML 4.01 Specification |publisher=W3C |year=1999 }} |
||
{{Refend}} |
{{Refend}} |
||
{{-}} |
|||
{{求闻百科方针}} |