带有看不见的标签的可访问性答案

【问题标题】：Accessibility with unseen label带有看不见的标签的可访问性
【发布时间】：2021-07-30 07:41:44
【问题描述】：

我的视线中有几件普通视力用户可以看到的东西。但是我有一个隐藏的标签，它具有 css 样式以将其隐藏在视线用户之外，即身高 0 体重 0 线高 0 等。问题是，当在 iPhone 上拖动手指时，两个选项都无法访问。我试图找到一种方法，让可见的内容仍然什么都不说，但屏幕阅读器会说别的东西。谢谢。

编辑抱歉，我写的时候喝醉了。我只是要问一个全新的问题。感谢所有试图帮助的人，哈哈

【问题讨论】：

因为我们没有您已经使用过的代码，如果您需要使页面同时满足基于视觉和基于辅助技术的受众，那么您绝对需要使用 W3C 的 ARIA 规则标准并处理您面临的具体问题。这里有一个简单的例子css-tricks.com/why-how-and-when-to-use-semantic-html-and-aria
你需要类似aria-label='text', aria-hidden=false
我认为 Style="Display:none" 应该可以解决问题。
SO 帖子可供经理阅读，以评估个人的晋升或新工作。考虑到这一点，请考虑对您的问题再进行一次编辑以删除无关信息。

标签： html css ios iphone accessibility

【解决方案1】：

将宽度/高度设置为 0 并不是为有视力的用户隐藏某些内容同时让屏幕阅读器用户可以阅读的正确方法。网络上的所有问题和文章都致力于解释如何正确地做到这一点。

基本技术称为视觉隐藏文本。如果您使用的是框架，则您已经有预定义的 CSS 类，例如 .sr_only、.visually-hidden 等。以下是我使用的示例，取自 knacss 并稍作改动：

.visually-hidden {
position: absolute !important;
border: 0 !important;
height: 1px !important; 
/* width: 1px !important; /*Disabled because of JFW+firefox bug, all words are concatenated */
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
left: -2px !important;
top: auto !important;
}

【讨论】：