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

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

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

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

<pre>-{}-

:

</pre>

=== 稀有气体 ===

如有可能，您可以使用<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>。

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