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

求闻百科，共笔求闻
以互动方式浏览历史
添加的内容 删除的内容
可视化wikitext
无编辑摘要
 

（未显示2个用户的11个中间版本）

第1行： 第1行：
{{NoteTA|G1=IT|G2=MediaWiki}}
{{NoteTA|G1=IT|G2=MediaWiki}}
{{Rule draft|=Style|QW:ACCESS|QW:A11Y|QW:无障碍}}
{{Guideline|=Style|QW:ACCESS|QW:A11Y|QW:无障碍}}
'''无障碍'''（{{Lang-en|accessibility}}）是指网页能够更加易于访问、易于使用，即使是色盲、盲人或者其他的残障人士等特殊群体，也能够访问网页并使用各种功能，而不会遇到明显的障碍。为了做到无障碍，求闻百科的页面应该尽可能遵循HTML的规范并使用语义，且在可能的情况下，利用好辅助功能的接口。
'''无障碍'''（{{Lang-en|accessibility}}）是指网页能够更加易于访问、易于使用，即使是色盲、盲人或者其他的残障人士等特殊群体，也能够访问网页并使用各种功能，而不会遇到明显的障碍。为了做到无障碍，求闻百科的页面应该尽可能遵循HTML的规范并使用语义，且在可能的情况下，利用好辅助功能的接口。


第14行： 第14行：
: 非文本内容内容应该有替代文本，从而让不能阅读非文本内容的用户也能够知道其内容。例如，盲人可以通过[[屏幕阅读器]]或者[[盲文]]来知晓图片或者视频中是什么内容。装饰性的内容不要求可感知。
: 非文本内容内容应该有替代文本，从而让不能阅读非文本内容的用户也能够知道其内容。例如，盲人可以通过[[屏幕阅读器]]或者[[盲文]]来知晓图片或者视频中是什么内容。装饰性的内容不要求可感知。
; 基于时间的媒体
; 基于时间的媒体
: 媒体应该要提供替代文本以呈现相同的信息。音频内容应当有字幕或者描述。（字幕功能也可以通过系统的辅助功能中的实时字幕实现。）
: 媒体应该要提供替代文本以呈现相同的信息。音频内容应当有字幕或者描述（字幕功能也可以通过系统的辅助功能中的实时字幕实现）。
; 适应性
; 适应性
: 内容应该要可以以不同的方式呈现，而不应该丢失其信息或结构。一个信息，无论是用于理解还是指示的，不能仅通过形状、大小、位置、方向等感官特性呈现。内容的信息和关系应该要正确指定（参见[[#条目结构]]和[[#块元素]]）。
: 内容应该要可以以不同的方式呈现，而不应该丢失其信息或结构。一个信息，无论是用于理解还是指示的，不能仅通过形状、大小、位置、方向等感官特性呈现。内容的信息和关系应该要正确指定（参见[[#条目结构]]和[[#块元素]]）。
第55行： 第55行：


正确标题示例：
正确标题示例：
{{编辑演示
<pre>-{}-
| 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>


== 排版 ==
== 排版 ==
第235行： 第242行：


例如：
例如：
* '''错误：'''点击[[Help:表格|此处]]以了解如何使用表格。（仅从“此处”二字无法推断出链接的目的。）
* '''错误：'''点击[[Help:表格|此处]]以了解如何使用表格（仅从“此处”二字无法推断出链接的目的）。
* '''正确：'''请参考[[Help:表格]]以了解如何使用表格。（从显示文本中可以推断出，链接的目的是一个叫做“Help:表格”的页面。）
* '''正确：'''请参考[[Help:表格]]以了解如何使用表格（从显示文本中可以推断出，链接的目的是一个叫做“Help:表格”的页面）。
* '''正确：'''[[Help:表格|点击此处以了解如何使用表格]]。（链接文本是整个句子，能够表现出链接的目的。）
* '''正确：'''[[Help:表格|点击此处以了解如何使用表格]]（链接文本是整个句子，能够表现出链接的目的）。


== 颜色 ==
== 颜色 ==
第378行： 第385行：
* 红玫瑰
* 红玫瑰
}}
}}
可能你已经看出来了，这个列表的的各项之间的显示间距有问题。实际上这个列表是多个列表组成的。如果使用屏幕阅读器（以Windows系统的[[讲述人]]为例），那么屏幕阅读器会这么读：
可能你已经看出来了，这个列表的各项之间的显示间距有问题。实际上这个列表是多个列表组成的。如果使用屏幕阅读器（以Windows系统的[[讲述人]]为例），那么屏幕阅读器会这么读：
<blockquote class="hansect">
<blockquote class="hansect">
输入列表，2的1，项目符号，白玫瑰，2的2，项目符号，黄玫瑰，退出列表。
输入列表，2的1，项目符号，白玫瑰，2的2，项目符号，黄玫瑰，退出列表。
第724行： 第731行：
}}
}}


如有可能，您可以使用<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>。
如有可能，您可以使用<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>参数的正确例子
第813行： 第820行：
为了能够适应不同的场景，请避免使用固定的图片大小。
为了能够适应不同的场景，请避免使用固定的图片大小。


请不要使用“左图”或“右图”的描述，除非能够确保图片确实是在左边或者右边。这是因为，页面内容在显示是，会为不同的显示屏幕进行调整，当使用较小的屏幕（例如手机）时，图片并不会显示在左边或者右边。而且，“左图”“右图”的表述对于辅助技术来说也是没有意义的。
请不要使用“左图”或“右图”的描述，除非能够确保图片确实是在左边或者右边。这是因为，当页面内容显示时，会为不同的显示屏幕进行调整，当使用较小的屏幕（例如手机）时，图片并不会显示在左边或者右边。而且，“左图”“右图”的表述对于辅助技术来说也是没有意义的。


== 动画、视频与音频 ==
== 动画、视频与音频 ==
第839行： 第846行：
|1=不仅可以使用鼠标点击来激活，还可以通过键盘来激活。例如，在不使用鼠标的情况下，使用Tab键选择到这个组件，然后按空格（Space）或者回车（Enter）键，也能够触发该功能。
|1=不仅可以使用鼠标点击来激活，还可以通过键盘来激活。例如，在不使用鼠标的情况下，使用Tab键选择到这个组件，然后按空格（Space）或者回车（Enter）键，也能够触发该功能。


例如，下面这个代码中，此元素不且有键盘可导航性：
例如，下面这个代码中，此元素不具备键盘可操作性：
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<button id="myButton">这是一个按钮</button>
<button id="myButton">这是一个按钮</button>
第872行： 第879行：
</syntaxhighlight>
</syntaxhighlight>
|4=对于弹出式菜单，该菜单不应该只在鼠标悬浮在相应元素上时才显示，还应该提供一种机制，使其能够在通过键盘或者鼠标操作的情况下，即使没有将鼠标悬浮在有关的元素上，也能够显示弹出菜单。如有可能，还应当提供相应的语义。
|4=对于弹出式菜单，该菜单不应该只在鼠标悬浮在相应元素上时才显示，还应该提供一种机制，使其能够在通过键盘或者鼠标操作的情况下，即使没有将鼠标悬浮在有关的元素上，也能够显示弹出菜单。如有可能，还应当提供相应的语义。
|5=可交互组件必须要有一个无障碍名称（{{lang-en|accessible name}}）。请看下面这个例子，在例子中的错误写法中，一些人能够使用该按钮使用字母“X”代表关闭，但是辅助功能只会说“X按钮”，对于视觉受限的人而言，可能会产生困惑，因此需要让辅助技术将其描述为“关闭”。
|5=可交互组件必须要有一个无障碍名称（{{lang-en|accessible name}}）。请看下面这个例子，在例子中的错误写法中，一些人能够知道该按钮使用字母“X”代表关闭，但是辅助功能只会说“X按钮”，对于视觉受限的人而言，可能会产生困惑，因此需要让辅助技术将其描述为“关闭”。
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
错误写法：
错误写法：
第898行： 第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}}

{{-}}
{{求闻百科方针}}
取自“https://www.qiuwenbaike.cn/wiki/Qiuwen:无障碍访问”