Qiuwen:无障碍访问：修订间差异

{{Rule draft|=Style|QW:ACCESS|QW:A11Y|QW:无障碍}}

求闻百科致力于让网页更易浏览与阅读，即'''无障碍'''。无障碍的范围比较广，不仅指能够向色盲用户、残障人士等特殊群体提供辅助功能，还包括了对常见情况下的一些基本的需求。

我们希望求闻百科的所有页面均能遵循[[Web内容无障碍指南]]（WCAG）2.1版，以让条目更易于所有人阅读与编辑。

: 媒体应该要提供替代文本以呈现相同的信息。音频内容应当有字幕或者描述。（字幕功能也可以通过系统的辅助功能中的实时字幕实现。）

<pre>-{}-

</pre>

<pre>-{}-

</pre>

<pre>-{}-

</pre>

<pre>-{}-

</pre>

<pre>-{}-

</pre>

<pre>-{}-

</pre>

== 浮动元素 ==

在源代码中，浮动元素（包括浮动的图像）应置于所属的章节之内。虽然源代码语法中图像置于页面顶部，但可能被其它浮动元素推到目录下方显示。

阅读求闻百科的读者不一定是通过观察屏幕来阅读其内容的，一些读者存在视力残疾，需要通过屏幕阅读器（又称“讲述人”（{{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>。

* 提供相应的title或name属性（或其他有关的HTML语义）来表明其目的，使得用户在把鼠标悬停在该可交互组件上或将焦点聚集在该可交互组件时，能够看到其文本描述，这样就不会导致看到没有文字的可交互组件后产生困惑。

** 对于有可见的文本描述的可交互组件，也建议如此，但这不一定是必需的。

[[屏幕阅读器]]通常不支持呈现文本属性（粗体、斜体、下划线）乃至语义文本属性（强调、重要、文字删除），因此带删除线的文字和正常文字阅读效果相同。此外，在上述使用删除线的情形中，请使用{{tag|del}}，不得使用{{tag|s}}。

{{main|QW:TEXT#字型大小}}{{Shortcut|QW:SMALL|QW:BIG|QW:FONTSIZE}}谨慎使用缩小和放大字体。字号通常是由页面元素自动决定，如标题、列表标题、标准模板。改变字号时，应当用原字体的百分比大小（相对大小）描述，而不用像素或[[点（印刷）|点数]]描述绝对大小，以便利默认使用较大字体的用户。

此外，在求闻百科中，对于日语如不使用模板，则日本汉字可能会被视作中文错误简繁转换。

* '''错误：'''点击[[Help:表格|此处]]以了解如何使用表格。（仅从“此处”二字无法推断出链接的目的。）

* '''正确：'''请参考[[Help:表格]]以了解如果使用表格。（从显示文本中可以推断出，链接的目的是一个叫做“Help:表格”的页面。）

* '''正确：'''[[Help:表格|点击此处以了解如何使用表格]]。（链接文本是整个句子，能够表现出链接的目的。）

==== 对比度检查工具 ====

可以选择这些工具检查对比度是否正确：

* [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的免费色盲模拟器”。它可以让你看到屏幕上的任何东西，就像患有三种色盲之一或灰度的人看到的一样。

{{see also|Help:列表}}

=== 不要拆散列表 ===

可能你已经看出来了，这个列表的的各项之间的显示间距有问题。实际上这个列表是多个列表组成的。如果使用屏幕阅读器（以Windows系统的[[讲述人]]为例），那么屏幕阅读器会这么读：

仅使用星号（无序列表）的例子：

仅使用冒号（定义列表）的例子：

一级列表为无序列表、二级列表为定义列表的例子：

无序列表改换为定义列表的错误例子1：

无序列表改换为定义列表的错误例子2：

MediaWiki的列表标记与普通的MediaWiki段落标记不兼容。若要在列表项中放置多个段落，请使用{{tlx|pb}}模板将其分开。

可以使用[[Template:HTML lists|HTML列表模板]]之一，以确保列表不会意外分开。若列表中包括块元素（如{{tag|pre}}），则这一技巧非常有用。

<pre>-{}-{{bulleted list

|1=这是列表中的第一项：

&lt;pre>

<?php

print('Hello world!');

&lt;/pre>

这仍在第一项范畴内。

|2=这是列表中的第二项。

}}</pre>

多行内容的缩进方法是模板{{tlx|block indent}}，使用CSS实现缩进。对于单行内容，可以使用多种模板实现缩进，包括但不限于{{tlx|in5}}等，这些模板使用各种空白字符缩进。不要滥用{{tag|blockquote}}元素或使用它的模板（如{{tlx|Quote}}）进行视觉缩进，这些标记、模板只用于条目中的直接引语。

空行不能放在冒号缩进的文本行之间，尤其是在文章内容中。这被软件解释为标记列表的结束和新列表的开始。如果需要空行，请在其上放置与空行下方文本前相同数量的冒号，例如：<pre>-{}-

:

</pre>另一个解决方案是新的段落标记（{{Tag|p}}），但它必须在源代码中的同一行中：<pre><nowiki>: 文字。<p>新段落文字。</p></nowiki></pre>

=== 垂直列表 ===

==== 无序垂直列表 ====

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

<pre>-{}-

* 白玫瑰

* 红玫瑰

因为软件抑制了行距，所以看起来如：

* 白玫瑰

* 红玫瑰

但是屏幕阅读器读者看起来是：“输入列表，2的1，项目符号，白玫瑰，2的2，项目符号，黄玫瑰，退出列表。输入列表，1的1，项目符号，粉红玫瑰，退出列表。输入列表，1的1，项目符号，红玫瑰，退出列表。”

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

==== 无项目符号垂直列表 ====

{{shortcut|QW:PLIST|QW:VLIST}}

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

代之在导航框一类模板或合适的容器中，可以使用CSS类“<code>plainlist</code>”，也就是：

: <code>| listclass = plainlist</code>或

: <code>| bodyclass = plainlist</code>

在信息框中则可以使用：

: <code>| rowclass = plainlist</code>

或者

: <code>| bodyclass = plainlist</code>

另见[[Qiuwen:格式手册/列表#无项目符号列表]]。

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

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

: <code>| listclass = hlist</code>或

: <code>| bodyclass = hlist</code>

信息框中可使用：

: <code>| rowclass = hlist</code>或

: <code>| bodyclass = hlist</code>

{{see also|#PSEUDOHEAD}}不应使用半角分号在列表前生成 "假标题"（图1）；语义上，分号开头的列表应接续一组以半角冒号开头的列表，以表示术语表的标题及其条目（图2）。若要表示一组无序列表，应使用章节标记（图3）。

<div role="figure" style="display: inline-block; margin: 0 1em; width: 17em;">

'''{{cross}} 图1 不正确'''<syntaxhighlight lang="tid">

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

</syntaxhighlight></div>

<div role="figure" style="display: inline-block; margin: 0 1em; width: 17em;">

'''{{tick}} 图2 定义列表（正确）'''<pre>

</pre></div>

<div role="figure" style="display: inline-block; margin: 0 1em; width: 17em;">

'''{{tick}} 图3 章节标题及无序列表（正确）'''<pre>

</pre></div>

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

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

“系列模板”及[[Help:信息框|信息框]]由表格制成。

通过在相邻单元格中嵌入成组的HTML{{Xtag|br}}、{{Xtag|hr}}标签，可以在视觉上创建多行信息框，不过该技术并不适合HTML表格结构。屏幕阅读器用户是以单元格和HTML行为单位阅读，而非以视觉上的行阅读，因此这对它们会产生问题。

=== 数据表格 ===

{{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>

; 标题文字（<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>。

; 行、列标题（<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>。

; 标题的范围（<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>

简而言之，数据表格应满足下列要求：

# 正确的表格标题

# 正确的标题结构

# 图像和颜色

# 避免嵌套表格

请避免使用表格做纯排版用途。数据表提供了额外的信息和导航方法，当内容缺乏逻辑行和列关系时，这些信息和导航方式可能会令人困惑。

最佳的选择是使用更有适应性的[[HTML]]的<code>&lt;div&gt;</code>块和样式（{{Code|style}}）属性。

使用表格定位非表格内容时，帮助屏幕阅读器将其识别为布局表格，而不是数据表格。在表上设置<code>role="presentation"</code>属性，并且不设置任何<code>summary</code>属性。不要在表内或任何嵌套表内使用任何<code>&#x3C;caption&#x3E;</code>或<code>&#x3C;th&#x3E;</code>元素。在wiki表标记中，这意味着不要使用<code>|+</code>或<code>!</code>前缀。确保内容的阅读顺序正确。视觉效果（如居中或粗体）可以通过样式表或语义元素来实现。例如：

<pre>

{| role="presentation" class="toccolors"

| colspan="2" style="text-align: center; background-color: #ccf;" | <strong>重要文本</strong>

|-

| 一去二三里 || 烟村四五家

|-

| 亭台六七座 || 八九十支花

|}

</pre>

{{Further|Qiuwen:格式手册#图像|Qiuwen:文件使用守则#大小}}

# 所有非装饰的图像都要有替代文字。替代文字是给视障人士读者、搜索蜘蛛和其他非视觉用户的代替品。加入的替代文字应该简洁，或者应该提到图像题注或相邻文字。

# 在[[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}}]]标记；这样做可能会导致章节链接受损，并导致其他问题。

出于亲和力考虑，动画（[[GIF]]：图形交换格式）应该满足以下两者之一：

总而言之，大多数动画GIF应当能转换为视频。<!--（转换方法可见指南将动画GIF转换为Theora OGG）-->

此外，动画在任何一秒钟内产生的闪光<u>严禁超过</u>三次。闪光次数超过这个限度的内容会导致光敏癫痫发作。<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>

关于如何为视频创建隐藏字幕，请参阅：

* [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>。

== 样式及标记选项 ==

{{shortcut|QW:DEVIATIONS}}

=== 最佳实践 ===

表格与其他区块元素的格式，应尽量采用CSS类（CSS class）调用样式表中已定义的样式，而不是撰写行间CSS代码（inline CSS）。全站CSS样式表（[[MediaWiki:Common.css]]）已经过测试，在大多数浏览器条件下可以确保兼容性，满足大部分用户的需求。此外，注册用户可以通过自定义样式表（[[Special:MyPage/skin.css]]；或浏览器设置）以修改配色方案，以满足自身的特定需求。

为了在实现无障碍访问的同时确保页面的美观，页面可以在一定程度上允许页面与公认的互联网标准存在差异。若页面的某些配色方案偏离公认标准，其作者应确保其满足无障碍访问要求（例如：颜色应满足对比度要求、添加相应辅助属性标签等）。

页面应优先使用[[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代码添加样式，可以强调与其它文字的不同之处。

=== 折叠内容 ===

{{anchor|滚动及摺叠章节}}{{shortcut|QW:PRECOLLAPSE}}

{{seealso|Qiuwen:格式手册#滚动列表及摺叠内容|mw:No-JavaScript notes}}

自动[[Help:COLL|折叠]]的元素（或设为“预先折叠”的元素）不应用于隐藏文章主体中的内容。

对于使用较少支持[[JavaScript]]、[[CSS]]新特性的较旧浏览器的读者，求闻百科的界面应该维持基本的可读性。请编者考虑到那些浏览器不支持相应JavaScript、CSS特性的用户，确保他们至少可以阅读。

若您需要模拟较旧浏览器，可以尝试在浏览器中关闭JavaScript、CSS。