捉迷藏:另一种隐藏 HTML 的方法
2004 年 4 月 5 日,星期一(下午 2:44 格林威治标准时间 GMT)
设想一下这种情况:您有一个包含链接的段落,链接之间用逗号分隔。您希望在 HTML 中保留逗号,因为这在**语法上是正确的**,并且您希望遵守 WAI WCAG 1.0 检查点 10.5。但是,您又不希望显示这些逗号。您可以使用这样的 HTML:
<p><a href="this.html">This</a><span class="ttt">, </span><a href="that.html">That</a><span class="ttt">, </span><a href="theother.html">The Other</a><span class="ttt">.</span></p>
然后,您可以应用一些 CSS 技术来隐藏“ttt”类。
但是 HTML 变得臃肿了。如果能直接写成这样会更好:
<p class="ttt"><a href="this.html">This</a>, <a href="that.html">That</a>, <a href="theother.html">The Other</a>.</p>
但是如何摆脱逗号呢?试试这个 CSS:
.ttt {position: relative;left: -999em;}.ttt a {position: relative;left: 999em;}
段落从视野中被“拽”出,然后各个链接元素弹回原位。捉迷藏。
评论
评论2
我的理解是,在链接之间需要非空白字符的要求是基于当时编写可访问性指南时屏幕阅读器的一个 bug。当时的阅读器会将相邻的链接读成一个长链接。他们后来修复了这个问题,使得 WCAG 指南变得设备特定且严重过时。这都是传闻和道听途说,如果有人能证实该法规背后的原因,那将是极好的。如果我们能理解精神而不是仅仅遵守法律条文,这对残障人士更有价值。
Nils T. Devine 于 2004 年 4 月 5 日星期一下午 3:58 GMT 如是说:Nils T. Devine
评论3
屏幕阅读器其实可以很好地读取相邻的链接,而且在 WCAG 2.0 的工作草案中也没有提到这个检查点。如果想声称符合某个标准,比如在这种情况下是 WCAG 1.0 AAA,那么你仍然需要满足这一点,即使它已经过时(请看 https://htmldog.cn/ptg/archives/000035.php)。
不过,我认为更重要的是,你应该在 HTML 中保持良好的英语(或西班牙语、斯瓦希里语或其他语言)。X 个相邻的、不构成句子一部分的链接应该用标点符号分隔,例如逗号。
Patrick 于 2004 年 4 月 5 日星期一下午 4:12 GMT 如是说:Patrick
评论5
这很蠢。
这一切的想法都很蠢。不要为了符合那些愚蠢的、不切实际的可访问性垃圾而建网站。要为真实的人建网站。
我知道 JavaScript 会让你害怕,但为什么不遍历那个 P 的所有子节点并删除文本节点呢?
Dante Evans 于 2004 年 4 月 6 日星期二凌晨 3:22 GMT 如是说:Dante Evans
评论6
正如我所说,这不仅仅是关于可访问性。
而且有时你不仅要遵守“愚蠢的、不切实际的可访问性垃圾”,因为你想表明你体谅那些不如你健全的人,并且你遵循了一个有益的倡议,而且还因为你雇主说“必须是 AAA”。
而 JavaScript 并不是解决世界上所有问题的万能药。如果我将你所有的 JavaScript 解决方案应用到过去提出的所有问题上,我的网页将极其臃肿。此外,这纯粹是呈现问题。这正是 CSS 的用武之地。
Patrick 于 2004 年 4 月 6 日星期二上午 9:09 GMT 如是说:Patrick
评论8
如果你想保持语言结构正确但又想单独呈现元素,这是有必要的。
有用……嗯……同上。
CSS 是关于呈现的。
Patrick 于 2004 年 4 月 6 日星期二晚上 7:58 GMT 如是说:Patrick
评论9
我没有说你“必须”实现它们,只是让你思考一下 JS 解决方案。
顺便说一下,我注意到你在写的东西里总是抱怨 IE。我本来想告诉你一个 JS 解决方案,但我又找到了另一个:为什么你不直接这样做:
<!--[if IE]>
<style>
@import "justforie.css";
</style>
<![endif]>
请不要再给 JavaScript 抹黑了。好吗?
如果你确实想以 99% 的准确率检测 IE5+,请检查 document.execCommand。
祝好!
Dante Evans 于 2004 年 4 月 7 日星期三凌晨 12:48 GMT 如是说:Dante Evans
评论10
哦,看看这个:
http://www.alistapart.com/discuss/popuplinks/7/#c7276
它总结了我对整个 WIAA 的看法,而且我喜欢作者的措辞。
Dante 于 2004 年 4 月 7 日星期三凌晨 12:51 GMT 如是说:Dante
评论11
我不会在这上面过多纠缠,因为这(又)离题太远了,但是:
我抱怨 IE 是因为它不像 Mozilla 或 Opera 等浏览器那样很好地处理 CSS。这是一个简单的事实。我认为即使是微软也无法否认这一点。
我并不是试图给 JavaScript 抹黑,我只是认为它有它的时间和地点。
可访问性不是 Bobby。
好了。这个“捉迷藏”……
Patrick 于 2004 年 4 月 7 日星期三上午 9:04 GMT 如是说:Patrick
评论12
……不是我会使用的技术,仅仅是因为我从来没有必要使用。也许如果我需要,我会用 JavaScript 来移除它。
万一你在想,没有浏览器能像 Safari 1.2 那样处理 CSS3。
祝好!
Dante Evans 于 2004 年 4 月 7 日星期三下午 6:33 GMT 如是说:Dante Evans
评论13
同意,这非常愚蠢。当我们开始在页面上标记逗号时,事情就真的在走下坡路了。记住,人们,不要把标准带到悬崖边上,即使那个标准看起来是出于好意。
Tom
Tom Dell'Aringa 于 2004 年 4 月 16 日星期五下午 2:51 GMT 如是说:Tom Dell'Aringa
评论14
这不是把标准带到悬崖边上,我甚至不认为主要原因是标准。这是语言的使用。
好的,我们先不谈逗号。以这个博客右侧出现的“XML”链接为例。它被 styled 成橙色按钮配白色文字,因为这通常是表示该链接指向一个 web log 的 XML feed 的标志。它依赖于视觉识别一个符号。
但对于看不见橙色框的人来说,“XML”本身没有意义。为了让使用屏幕阅读器的人受益,你可以简单地将其改为“XML feed”或类似的东西。然后,你就不需要用标签包裹“feed”来隐藏它,只需应用这种方法即可。
这只是一个例子。隐藏元素是一件常见且经常必要的事情。它只不过是一种反向隐藏的方法,即不隐藏被标签包裹的元素,而是隐藏那些未被标签包裹的部分,留下其余的部分。
Patrick 于 2004 年 4 月 16 日星期五下午 3:22 GMT 如是说:Patrick
评论15
我真不敢相信你的文章收到了如此糟糕的回应。这让我很困扰。
这个应用对我来说似乎很明显。当你想要创建一个样式类似于 OpenOffice.org Impress 演示文稿的网页时,你可以隐藏稍后在演示文稿中显示的内容。当然,你提到的也有那个 XML 的东西。
我真的想在我自己的个人网站上演示这个,通过展示你只需要 1 个标记的页面和一些样式表就能做很多相关和有用的事情。大多数人似乎不知道样式表可以组合使用,但跑题了。
我对此技术最大的抱怨是,你实际上并没有让它消失。当然,这不是你的错。我怪 W3C。他们犯的一个大错误是让“display:none”是可继承的,但不是不可继承的。如果它是不可继承的,那么就可以将子元素设置为“display:block”或其他什么。这对于人们想要复制和粘贴文本很有用。
有时我感觉这些标准不是由设计师设计的。不过,别误会我的意思。他们已经做得非常出色了。
感谢您与我们分享这项技术。
Eugene T.S. Wong 于 2004 年 5 月 27 日星期四晚上 10:55 GMT 如是说:Eugene T.S. Wong
评论16
在我看来,如果不想使用列表标记但又想用一个或两个字符分隔相邻链接的最佳解决方案是使用 CSS 的“visibility”属性。这个属性有时似乎被低估了。它不像“display”属性那样有 Eugene 指出的缺点,但与该属性相比,它保留了如果不可见内容可见时所占的空间。
上面示例的样式表将是这样的:
p.ttt {
visibility: hidden;
}
p.ttt a {
visibility: visible;
}
Jens 于 2004 年 6 月 9 日星期三下午 5:49 GMT 如是说:Jens
评论17
嗯……是的。这肯定更简单!奇怪的是,当你开始围绕一个问题思考时,你可能会错过更明显的事情……
Patrick 于 2004 年 6 月 9 日星期三下午 6:01 GMT 如是说:Patrick
评论18
我喜欢这篇文章,人们对实际例子(例如隐藏逗号)的看法无关紧要——重要的是代码技术!
第 16 篇文章中的另一项技术更简单,可能应该使用,但是“visibility: hidden”是搜索引擎正在收紧的(由于关键词堆砌和其他黑帽搜索引擎排名技术),使用它可能会导致网站被搜索引擎屏蔽!——所以我还是会选择第一个代码示例。
[Anon] 于 2005 年 7 月 27 日星期三下午 3:24 GMT 如是说:
另请参阅
- 下一页:连续链接
- 上一页:如何不使用 HTML

评论1
我理解可能有一些原因不需要链接之间有分隔符,但总的来说,我认为这是一个坏主意。我认为在这种情况下,可访问性标准是针对那些至少部分能看到屏幕的人。有屏幕阅读器的人比看着屏幕的人更容易区分并列的链接,因为链接会有相同的样式。
这说得通吗?我现在很累,所以我不知道我是否还有条理。
Andrew 于 2004 年 4 月 5 日星期一下午 3:05 GMT 如是说:Andrew