CSS 的用户选择和可访问性答案

【问题标题】：CSS' user-select and accessibilityCSS 的用户选择和可访问性
【发布时间】：2015-07-06 16:06:05
【问题描述】：

如果我使用以下内容：

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

我可以禁用网页上某些元素的文本选择。适用于如果选择后不会提供很好 UX 的按钮和链接（显然是意见）。

我可以在我觉得有必要的地方随意使用它吗？还是有可访问性影响？即屏幕阅读器和其他工具是否依赖文本选择？

注意：我不是就user-select 属性的使用征求意见，我是在寻找受其影响的可访问性级别的事实。

【问题讨论】：

你可以在这里得到更好的回应：ux.stackexchange.com
我目前正在处理这个问题。截至目前，Safari + VoiceOver 将忽略/跳过带有用户选择的锚标签

标签： html css accessibility

【解决方案1】：

屏幕阅读器和其他工具依赖于您发送的基本 HTML 文档。因此，使事物不可选择不应产生影响，就像其他样式效果无关紧要一样。

JAWS 和其他屏幕阅读器通过浏览 HTML 文档并创建类似于 DOM 模型的东西供用户浏览来工作。在互联网上使用它们需要对标题和段落标签有所了解，因此用户已经了解网站的编写方式。通常，盲人用户会浏览标题，就像有视力的人浏览维基百科的文章一样，当他们找到他们想要的部分时停下来，并命令屏幕阅读器阅读下面的下一段。因此，正确布局 HTML 非常重要，以便屏幕阅读器可以从上到下阅读。

如需了解更多信息，以及在构建网站时考虑到包容性，我会阅读以下链接，了解如何为不同能力的人提供服务

http://www.w3.org/WAI/intro/people-use-web/stories

http://www.w3.org/WAI/guid-tech.html，尤其是《如何迎接WCAG 2.0》

http://www.paciellogroup.com/blog/2008/03/how-jaws-reads-text/

至于其他可访问性影响，我知道很多人喜欢通过突出显示他们正在阅读的段落中粗略的句子长部分来阅读网站，然后是下一个部分，依此类推。使大文本段落无法阅读（尽管我认为您提到过您不会这样做）可能会对某人的工作流程造成某种问题，但话又说回来，what doesn't?

【讨论】：

就像其他样式效果无关紧要：虽然display: none 和visibility: hidden 确实很重要，但它的样式很重要，就像“用CSS 完成”一样。另外作为旁注，样式效果对有视力的残疾用户很重要（其中一些使用屏幕阅读器，而另一些则不使用）

【解决方案2】：

（它在可用性方面可能有几个缺点，但是当您明确询问可访问性时，我在这里忽略了这些。）

两种可能的辅助功能影响（可能还有更多，因为有许多残疾，甚至更多的辅助设备，直到独特的解决方案）：

一些有智力/学习障碍的人可能无法理解某些单词的含义。通过不允许复制粘贴，如果他们想在某个地方查找单词，您会强制他们手动输入单词（这只是一个可用性问题），但并非所有人都可以这样做（这成为一个可访问性问题） .
也可以想象，有些人使用文本转语音工具（不是屏幕阅读器）来读取命令中的选定文本，因为他们有（或不能）阅读的问题。

（使用plain language 可能会缓解这些问题。）

【讨论】：