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

求闻百科，共笔求闻
以互动方式浏览历史
添加的内容 删除的内容
可视化wikitext
第143行： 第143行：
如果上述内容仅用于装饰（参见[[#装饰]]），则无需遵守上述规则。
如果上述内容仅用于装饰（参见[[#装饰]]），则无需遵守上述规则。


=== 仅图标的可交互组件和其他非文本形式的表意内容 ===
=== 非文本形式的可交互组件或表意内容 ===
在一些页面上（特别是在一些小工具中），会有一些仅使用图标的可交互组件，这在求闻百科的网站皮肤上也很常见。例如，用一个铃铛的图标表示“通知”按钮，用一个放大镜的图标表示“搜索”按钮。对于这类可交互组件，务必做到以下几点：
在一些页面上（特别是在一些小工具中），会有一些'''没有使用文本而仅使用图标的可交互组件'''，这在求闻百科的网站皮肤上也很常见。例如，用一个铃铛的图标表示“通知”按钮，用一个放大镜的图标表示“搜索”按钮。对于这类可交互组件，务必做到以下几点：
* 提供相应的title字段（或其他HTML语义）来表明其目的，使得用户在把鼠标悬停在该交互组件上时，能够看到其文本描述，这个不会导致看到仅图标的可交互组件后产生困惑。
* 提供相应的title或name属性（或其他有关的HTML语义）来表明其目的，使得用户在把鼠标悬停在该可交互组件上或将焦点聚集在该可交互组件时，能够看到其文本描述，这样就不会导致看到没有文字的可交互组件后产生困惑。
** 对于有可见的文本描述的可交互组件，也建议如此，但这不一定是必需的。
** 对于有可见的文本描述的可交互组件，也建议如此，但这不一定是必需的。
* 提供相应的可屏幕阅读的内容，这样屏幕阅读器在阅读此可交互组件时，能够直接将其内容读出来。如果相应内容不是由{{tag|button|o}}或类似标签组成的，提供可屏幕阅读的内容的方法请见下文。
* 提供相应的可屏幕阅读的内容，这样屏幕阅读器在阅读此可交互组件时，能够直接将其内容读出来。如果相应内容不是由{{tag|button|o}}或类似标签组成的，提供可屏幕阅读的内容的方法请见下文。
第158行： 第158行：
有完整视觉和色觉的人可以知道，上面这个内容表达的意思是，绿色表示支持，红色表示不支持，棕黄色表示的是部分支持。等号前的色块表示了这一个颜色。色盲用户无法识别颜色，但仍可通过其颜色中的条纹，看出无条纹的表示支持，斜条纹的表示不支持，纵向条纹的表示部分支持。但如果是使用屏幕阅读器的用户，就会感到困惑：屏幕阅读器说，“等于支持，等于不支持，等于部分支持”，这是啥意思？实际上，在上面这个例子中，我们使用了空白的{{tag|span}}来表述颜色，但它没有内容，屏幕阅读器不知道怎么读。
有完整视觉和色觉的人可以知道，上面这个内容表达的意思是，绿色表示支持，红色表示不支持，棕黄色表示的是部分支持。等号前的色块表示了这一个颜色。色盲用户无法识别颜色，但仍可通过其颜色中的条纹，看出无条纹的表示支持，斜条纹的表示不支持，纵向条纹的表示部分支持。但如果是使用屏幕阅读器的用户，就会感到困惑：屏幕阅读器说，“等于支持，等于不支持，等于部分支持”，这是啥意思？实际上，在上面这个例子中，我们使用了空白的{{tag|span}}来表述颜色，但它没有内容，屏幕阅读器不知道怎么读。


因此，为了照顾屏幕阅读器，我们需要在里面加入''不会渲染在屏幕但是会被屏幕阅读器阅读出来的内容''，例如：
因此，为了照顾屏幕阅读器，我们需要在里面加入'''不会渲染在屏幕但是会被屏幕阅读器阅读出来的内容'''，例如：
<blockquote class=hansect>
<blockquote class=hansect>
* <span style="background: #39b54a; width: 25px; height: 1em; display:inline-block;line-height:1; text-indent: -99999px">绿色</span> = 支持
* <span style="background: #39b54a; width: 25px; height: 1em; display:inline-block;line-height:1; text-indent: -99999px">绿色</span> = 支持
第168行： 第168行：
{{mbox|text=上面这个例子其实就是取自[https://caniuse.com/ caniuse.com网站]。实际上，上面这个例子中的条纹的对比度并不好，色盲用户可能无法轻松地通过条纹来辨别内容，但是该网站还专门提供了对色盲友好的配色方案。}}
{{mbox|text=上面这个例子其实就是取自[https://caniuse.com/ caniuse.com网站]。实际上，上面这个例子中的条纹的对比度并不好，色盲用户可能无法轻松地通过条纹来辨别内容，但是该网站还专门提供了对色盲友好的配色方案。}}


==== 使元素可屏幕阅读但不渲染在屏幕上的方法 ====
==== 使元素可被屏幕阅读器阅读但不渲染在屏幕上的方法 ====
在前面提到的这个例子中，我们给元素添加了文本，并使得这些文本不渲染在屏幕上，但能够被屏幕阅读器阅读。<code>display: none</code>和<code>visibility: hidden</code>会使得内容隐藏后也不会被屏幕阅读器阅读，因此不符合其要求。以下几种方法可以使内容在渲染在屏幕上但仍能被屏幕阅读器阅读：
在前面提到的这个例子中，我们给元素添加了文本，并使得这些文本不渲染在屏幕上，但能够被屏幕阅读器阅读。<code>display: none</code>和<code>visibility: hidden</code>会使得内容隐藏后也不会被屏幕阅读器阅读，因此不符合其要求。以下几种方法可以使内容在渲染在屏幕上但仍能被屏幕阅读器阅读：
* 使用<code>text-indent: -99999px</code>，这是最简单粗暴的方法，但是非常有效。例如：<span style="border: 1px currentColor solid; width: 25px; height: 1em; display: inline-block; line-height: 1; text-indent: -99999px;">这个内容不会显示但是会被读出来</span>。
* 使用<code>text-indent: -99999px</code>，这是最简单粗暴的方法，但是非常有效。例如：<span style="border: 1px currentColor solid; width: 25px; height: 1em; display: inline-block; line-height: 1; text-indent: -99999px;">这个内容不会显示但是会被读出来</span>。
第177行： 第177行：
* 将元素移动到非常远的位置，例如<code>position: absolute; left: 99999px</code>或<code>position: fixed; left: 200%</code>：这会使得元素的边界无法正常显示。屏幕阅读器在阅读内容时，会突出显示正在阅读的内容的边框，而在阅读此内容时，边框消失了，或者屏幕滚动到了异常的位置，因此这种方式也会产生困惑。
* 将元素移动到非常远的位置，例如<code>position: absolute; left: 99999px</code>或<code>position: fixed; left: 200%</code>：这会使得元素的边界无法正常显示。屏幕阅读器在阅读内容时，会突出显示正在阅读的内容的边框，而在阅读此内容时，边框消失了，或者屏幕滚动到了异常的位置，因此这种方式也会产生困惑。


{{mbox|text=可以看出，让元素适配屏幕阅读器其实是有点复杂的，需要用到一些CSS样式，而在条目中通常不建议大量这用这些样式。不过，尽管如此，在模板中，如有需要，还是应当适当使用此方法以兼容屏幕阅读器。}}
{{mbox|text=可以看出，让元素适配屏幕阅读器其实是有点复杂的，需要用到一些CSS样式，而在条目中通常不建议大量这用这些样式。不过，尽管如此，在模板中，如有需要，还是应当适当使用此方法以适配屏幕阅读器。}}
{{mbox|text=上述措施对于盲文辅助技术也有效，因为这些文字本质上没有被隐藏，能够被盲文辅助技术正常地转换为盲文。}}


=== 仅装饰的内容 ===
=== 仅装饰的内容 ===
取自“https://www.qiuwenbaike.cn/wiki/Qiuwen:无障碍访问”