添加的内容 删除的内容
SolidBlock(留言 | 贡献) (→可交互组件) |
无编辑摘要 |
||
(未显示4个用户的20个中间版本) | |||
第1行: | 第1行: | ||
{{NoteTA|G1=IT|G2=MediaWiki}} |
{{NoteTA|G1=IT|G2=MediaWiki}} |
||
{{ |
{{Guideline|=Style|QW:ACCESS|QW:A11Y|QW:无障碍}} |
||
'''无障碍'''({{Lang-en|accessibility}})是指网页能够更加易于访问、易于使用,即使是色盲、盲人或者其他的残障人士等特殊群体,也能够访问网页并使用各种功能,而不会遇到明显的障碍。为了做到无障碍,求闻百科的页面应该尽可能遵循HTML的规范并使用语义,且在可能的情况下,利用好辅助功能的接口。 |
'''无障碍'''({{Lang-en|accessibility}})是指网页能够更加易于访问、易于使用,即使是色盲、盲人或者其他的残障人士等特殊群体,也能够访问网页并使用各种功能,而不会遇到明显的障碍。为了做到无障碍,求闻百科的页面应该尽可能遵循HTML的规范并使用语义,且在可能的情况下,利用好辅助功能的接口。 |
||
第14行: | 第14行: | ||
: 非文本内容内容应该有替代文本,从而让不能阅读非文本内容的用户也能够知道其内容。例如,盲人可以通过[[屏幕阅读器]]或者[[盲文]]来知晓图片或者视频中是什么内容。装饰性的内容不要求可感知。 |
: 非文本内容内容应该有替代文本,从而让不能阅读非文本内容的用户也能够知道其内容。例如,盲人可以通过[[屏幕阅读器]]或者[[盲文]]来知晓图片或者视频中是什么内容。装饰性的内容不要求可感知。 |
||
; 基于时间的媒体 |
; 基于时间的媒体 |
||
: 媒体应该要提供替代文本以呈现相同的信息。音频内容应当有字幕或者描述 |
: 媒体应该要提供替代文本以呈现相同的信息。音频内容应当有字幕或者描述(字幕功能也可以通过系统的辅助功能中的实时字幕实现)。 |
||
; 适应性 |
; 适应性 |
||
: 内容应该要可以以不同的方式呈现,而不应该丢失其信息或结构。一个信息,无论是用于理解还是指示的,不能仅通过形状、大小、位置、方向等感官特性呈现。内容的信息和关系应该要正确指定(参见[[#条目结构]]和[[#块元素]])。 |
: 内容应该要可以以不同的方式呈现,而不应该丢失其信息或结构。一个信息,无论是用于理解还是指示的,不能仅通过形状、大小、位置、方向等感官特性呈现。内容的信息和关系应该要正确指定(参见[[#条目结构]]和[[#块元素]])。 |
||
第55行: | 第55行: | ||
正确标题示例: |
正确标题示例: |
||
{{编辑演示 |
|||
⚫ | |||
| result = -{}- |
|||
这是条目序言 |
这是条目序言 |
||
== 二级标题 == |
== 二级标题 == |
||
第63行: | 第64行: | ||
==== 四级标题 ==== |
==== 四级标题 ==== |
||
== 二级标题 == |
== 二级标题 == |
||
}} |
|||
</pre> |
|||
随意使用层级的错误标题示例: |
随意使用层级的错误标题示例: |
||
{{编辑演示 |
|||
<pre>-{}- |
|||
| result = -{}- |
|||
这是条目序言 |
这是条目序言 |
||
==== 四级标题 ==== |
==== 四级标题 ==== |
||
第74行: | 第76行: | ||
==== 四级标题 ==== |
==== 四级标题 ==== |
||
=== 三级标题 === |
=== 三级标题 === |
||
}} |
|||
</pre> |
|||
跳级标题的错误示例: |
跳级标题的错误示例: |
||
{{编辑演示 |
|||
<pre>-{}- |
|||
| result = -{}- |
|||
这是条目序言 |
这是条目序言 |
||
第86行: | 第89行: | ||
==== 四级标题 ==== |
==== 四级标题 ==== |
||
== 二级标题 == |
== 二级标题 == |
||
}} |
|||
</pre> |
|||
伪章节标题示例: |
伪章节标题示例: |
||
{{编辑演示 |
|||
<pre>-{}- |
|||
| result = -{}- |
|||
这是条目序言 |
这是条目序言 |
||
== 二级标题 == |
== 二级标题 == |
||
第99行: | 第103行: | ||
== 二级标题 == |
== 二级标题 == |
||
== <small>伪三级标题</small> == |
== <small>伪三级标题</small> == |
||
}} |
|||
</pre> |
|||
第106行: | 第110行: | ||
可接受的例子: |
可接受的例子: |
||
<pre>-{}- |
|||
{{编辑演示 |
|||
| result = -{}- |
|||
条目首段 |
条目首段 |
||
== 二级标题 == |
== 二级标题 == |
||
第117行: | 第123行: | ||
; 术语 |
; 术语 |
||
: 定义 |
: 定义 |
||
}} |
|||
</pre> |
|||
不可接受的例子: |
不可接受的例子: |
||
{{编辑演示 |
|||
<pre>-{}- |
|||
| result = -{}- |
|||
条目首段 |
条目首段 |
||
== 二级标题 == |
== 二级标题 == |
||
第128行: | 第135行: | ||
=== 三级标题 === |
=== 三级标题 === |
||
== <small>伪三级标题</small> == |
== <small>伪三级标题</small> == |
||
}} |
|||
</pre> |
|||
== 排版 == |
== 排版 == |
||
第148行: | 第155行: | ||
== 无法正常屏幕阅读的内容 == |
== 无法正常屏幕阅读的内容 == |
||
阅读求闻百科的读者不一定是通过观察屏幕来阅读其内容的,一些读者存在视力 |
阅读求闻百科的读者不一定是通过观察屏幕来阅读其内容的,一些读者存在视力障碍,需要通过屏幕阅读器(又称“讲述人”({{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>。 |
一些符号可能无法正常地被屏幕阅读器阅读,这种情况下,可以尝试使用加有替代文本的图像。例如,符号“♥”(心形符号)可能无法被阅读,可以使用“[[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>。 |
||
第205行: | 第212行: | ||
* 正确:<del>张江有轨电车</del>(已停运) |
* 正确:<del>张江有轨电车</del>(已停运) |
||
[[屏幕阅读器]]通常不支持呈现文本属性(粗体、斜体、下划线)乃至语义文本属性(强调、重要、文字删除),因此带删除线的文字和正常文字阅读效果相同。此外,在上述使用删除线的情形中,请使用{{tag|del}},不得使用{{tag|s}}。 |
[[屏幕阅读器]]通常不支持呈现文本属性(粗体、斜体、下划线)乃至语义文本属性(强调、重要、文字删除),因此带删除线的文字和正常文字阅读效果相同。此外,在上述使用删除线的情形中,请使用{{tag|del}},不得使用{{tag|s}},后者违背了现代网页设计中样式与HTML标签语义分离的原则。 |
||
如果条目内有错误的内容,不要使用删除线。这些内容应该使用注释处理,或者直接移除;你也可以用某个行内清理模板进行标记,并在讨论页上提出意见。 |
如果条目内有错误的内容,不要使用删除线。这些内容应该使用注释处理,或者直接移除;你也可以用某个行内清理模板进行标记,并在讨论页上提出意见。 |
||
第228行: | 第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>。 |
||
此外,在求闻百科中,对于日 |
此外,在求闻百科中,如果对于日文内容如不使用上述模板,那么日本汉字可能会被视作中文错误简繁转换。 |
||
== 链接 == |
== 链接 == |
||
第235行: | 第242行: | ||
例如: |
例如: |
||
* '''错误:'''点击[[Help:表格|此处]]以了解如何使用表格 |
* '''错误:'''点击[[Help:表格|此处]]以了解如何使用表格(仅从“此处”二字无法推断出链接的目的)。 |
||
* '''正确:'''请参考[[Help:表格]]以了解如何使用表格 |
* '''正确:'''请参考[[Help:表格]]以了解如何使用表格(从显示文本中可以推断出,链接的目的是一个叫做“Help:表格”的页面)。 |
||
* '''正确:'''[[Help:表格|点击此处以了解如何使用表格]] |
* '''正确:'''[[Help:表格|点击此处以了解如何使用表格]](链接文本是整个句子,能够表现出链接的目的)。 |
||
== 颜色 == |
== 颜色 == |
||
第367行: | 第374行: | ||
在页面中往往会出现各种形式的'''列表''',用于列举一系列的内容。列表不仅提供了一个外观,在代码层面,不同列表的使用还代表了一定的语义。因此,使用列表时,应当遵循相应的规范。 |
在页面中往往会出现各种形式的'''列表''',用于列举一系列的内容。列表不仅提供了一个外观,在代码层面,不同列表的使用还代表了一定的语义。因此,使用列表时,应当遵循相应的规范。 |
||
=== 不要拆散列表 === |
=== 不要拆散-{}-列表 === |
||
不要在列表项间用空行或表格切断。如果使用空格或者其他内容将列表切断,那么将会变成多个列表,也就是说一个列表结束后开户了新的列表。例如: |
不要在列表项间用空行或表格切断。如果使用空格或者其他内容将列表切断,那么将会变成多个列表,也就是说一个列表结束后开户了新的列表。例如: |
||
{{编辑演示 |
{{编辑演示 |
||
第378行: | 第385行: | ||
* 红玫瑰 |
* 红玫瑰 |
||
}} |
}} |
||
可能你已经看出来了,这个列表 |
可能你已经看出来了,这个列表的各项之间的显示间距有问题。实际上这个列表是多个列表组成的。如果使用屏幕阅读器(以Windows系统的[[讲述人]]为例),那么屏幕阅读器会这么读: |
||
<blockquote class="hansect"> |
<blockquote class="hansect"> |
||
输入列表,2的1,项目符号,白玫瑰,2的2,项目符号,黄玫瑰,退出列表。 |
输入列表,2的1,项目符号,白玫瑰,2的2,项目符号,黄玫瑰,退出列表。 |
||
第537行: | 第544行: | ||
=== 缩进 === |
=== 缩进 === |
||
{{shortcut|QW:INDENTGAP|QW:INDENTGAPS}} |
{{shortcut|QW:INDENTGAP|QW:INDENTGAPS}} |
||
多行内容的缩进方法是模板{{ |
多行内容的缩进方法是模板{{tlc|block indent}},使用CSS实现缩进。不要滥用{{tag|blockquote}}元素或使用它的模板(如{{tlc|Quote}})进行视觉缩进,这些标记、模板只用于条目中的直接引语。 |
||
{{编辑演示 |
|||
⚫ | |||
{{block indent| |
|||
这是第一行。 |
|||
这是第二行。 |
|||
}} |
|||
参照未缩进的文字。</pre> |
|||
|result={{block indent| |
|||
这是第一行。 |
|||
这是第二行。 |
|||
}} |
|||
参照未缩进的文字。}} |
|||
{{编辑演示 |
|||
|result=<blockquote> |
|||
这是第一行。 |
|||
这是第二行。 |
|||
</blockquote> |
|||
参照未缩进的文字。 |
|||
}} |
|||
以英文冒号起头的行会缩进。比如这种用法会在讨论页的往来讨论中表示回复。该缩进是使用了HTML的定义列表。这在可亲和性和语义学上都并不理想,但目前却广泛应用。缩进行之间不应插入空行,因为这表示列表的结束并开启新列表。如果确实需要空行,请插入一个以同样数量冒号起头的额外行。 |
以英文冒号起头的行会缩进。比如这种用法会在讨论页的往来讨论中表示回复。该缩进是使用了HTML的定义列表。这在可亲和性和语义学上都并不理想,但目前却广泛应用。缩进行之间不应插入空行,因为这表示列表的结束并开启新列表。如果确实需要空行,请插入一个以同样数量冒号起头的额外行。 |
||
第544行: | 第573行: | ||
空行不能放在冒号缩进的文本行之间,尤其是在文章内容中。这被软件解释为标记列表的结束和新列表的开始。如果需要空行,请在其上放置与空行下方文本前相同数量的冒号,例如: |
空行不能放在冒号缩进的文本行之间,尤其是在文章内容中。这被软件解释为标记列表的结束和新列表的开始。如果需要空行,请在其上放置与空行下方文本前相同数量的冒号,例如: |
||
{{编辑演示|result=-{}- |
|||
<pre>-{}- |
|||
: 此处有文字。 |
: 此处有文字。 |
||
: <br> |
|||
: |
|||
: 更多文字。 |
: 更多文字。 |
||
}} |
|||
</pre> |
|||
=== 无项目符号列表 === |
=== 无项目符号列表 === |
||
第702行: | 第731行: | ||
}} |
}} |
||
如有可能,您可以使用<code>scope="col"</code>或者<code>scope="row"</code>来更加清晰地表明这个标题单元格的用途,这有助于屏幕阅读器更好 |
如有可能,您可以使用<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>。 |
||
{{编辑演示 |
{{编辑演示 |
||
|title=使用<code>scope</code>参数的正确例子 |
|title=使用<code>scope</code>参数的正确例子 |
||
第791行: | 第820行: | ||
为了能够适应不同的场景,请避免使用固定的图片大小。 |
为了能够适应不同的场景,请避免使用固定的图片大小。 |
||
请不要使用“左图”或“右图”的描述,除非能够确保图片确实是在左边或者右边。这是因为,页面内容 |
请不要使用“左图”或“右图”的描述,除非能够确保图片确实是在左边或者右边。这是因为,当页面内容显示时,会为不同的显示屏幕进行调整,当使用较小的屏幕(例如手机)时,图片并不会显示在左边或者右边。而且,“左图”“右图”的表述对于辅助技术来说也是没有意义的。 |
||
== 动画、视频与音频 == |
== 动画、视频与音频 == |
||
第817行: | 第846行: | ||
|1=不仅可以使用鼠标点击来激活,还可以通过键盘来激活。例如,在不使用鼠标的情况下,使用Tab键选择到这个组件,然后按空格(Space)或者回车(Enter)键,也能够触发该功能。 |
|1=不仅可以使用鼠标点击来激活,还可以通过键盘来激活。例如,在不使用鼠标的情况下,使用Tab键选择到这个组件,然后按空格(Space)或者回车(Enter)键,也能够触发该功能。 |
||
例如,下面这个代码中,此元素不 |
例如,下面这个代码中,此元素不具备键盘可操作性: |
||
<syntaxhighlight lang="html"> |
<syntaxhighlight lang="html"> |
||
<button id="myButton">这是一个按钮</button> |
<button id="myButton">这是一个按钮</button> |
||
第849行: | 第878行: | ||
<label><input type="radio" name="agree" />设为默认</label> |
<label><input type="radio" name="agree" />设为默认</label> |
||
</syntaxhighlight> |
</syntaxhighlight> |
||
|4=对于弹出式菜单,该菜单不应该只在鼠标悬浮在相应元素上时才显示,还应该提供一种机制,使其能够在通过键盘或者鼠标操作的情况下,即使没有将鼠标悬 |
|4=对于弹出式菜单,该菜单不应该只在鼠标悬浮在相应元素上时才显示,还应该提供一种机制,使其能够在通过键盘或者鼠标操作的情况下,即使没有将鼠标悬浮在有关的元素上,也能够显示弹出菜单。如有可能,还应当提供相应的语义。 |
||
|5=可交互组件必须要有一个无障碍名称{{lang-en|accessible name}}。请看下面这个例子,在例子中的错误写法中,一些人能够 |
|5=可交互组件必须要有一个无障碍名称({{lang-en|accessible name}})。请看下面这个例子,在例子中的错误写法中,一些人能够知道该按钮使用字母“X”代表关闭,但是辅助功能只会说“X按钮”,对于视觉受限的人而言,可能会产生困惑,因此需要让辅助技术将其描述为“关闭”。 |
||
<syntaxhighlight lang="html"> |
<syntaxhighlight lang="html"> |
||
错误写法: |
错误写法: |
||
第859行: | 第888行: | ||
<button id="closeButton" aria-label="关闭">X</button> |
<button id="closeButton" aria-label="关闭">X</button> |
||
</syntaxhighlight> |
</syntaxhighlight> |
||
{{notice|可交互组件的无障碍名称(例如上面的<code>aria-label</code>参数)中通常不含该可交互组件的类型,因为辅助技术 |
{{notice|可交互组件的无障碍名称(例如上面的<code>aria-label</code>参数)中通常不含该可交互组件的类型,因为辅助技术已将其识别。例如,上面这个按钮的名称应该是“关闭”而非“关闭按钮”或“按钮:关闭”。}} |
||
}} |
}} |
||
第876行: | 第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}} |
||
{{-}} |
|||
{{求闻百科方针}} |