为什么SO HTML结构会破坏浏览器的“阅读器模式”? 背景问题/问题到目前为止的进展可访问性它使用旨在从页面中删除评论的条件阅读器视图未使用语义作为指标类名无助于堆栈溢出评论和简短答案是杀手自己修复获取堆栈溢出修复它!

问题描述

背景

浏览器的“阅读器模式”会根据个人用户的需求(间距,对比度,字体等)对网页进行重新格式化,使其更易于访问/可读。

虽然每种浏览器对阅读器模式的实现方式不同,但通常它们都钉住了文章样式的网站,例如Medium,New York Times,Lifehacker等。

问题/问题

但是在StackOverflow上,阅读器模式几乎都以各种方式中断,通常仅显示问题和/或第一个答案。其他内容根本就丢失了。

关于SO / SE页面的HTML结构,具体是什么使浏览器阅读器模式感到困惑?

换一种说法,如何更改页面的HTML结构以允许浏览器阅读器模式正确解析并显示所有问题/答案内容

到目前为止的进展

通过比较各种浏览器,*手机和台式机,似乎有一种简单的启发式方法,阅读器模式用于确定要显示内容,例如“仅显示文本最多的元素,而隐藏所有其他内容内容。”或者,“仅显示文本最多的元素,但是权重接近页面顶部的元素。”

* 到目前为止(在移动设备和台式机上)尝试过:Firefox,Safari和Chrome(请注意,Chrome仅在移动设备上本身具有此功能,并将其称为“简化视图”)。 URL栏中的Firefox和Safari上的阅读器模式访问权限;当受支持时,Chrome的访问权限位于屏幕底部

但是也有可能对元素标签/类/ id进行了一些扫描,以寻找重要内容是什么的语义指示。

通过浏览器DevTools的浏览,我注意到似乎有两个包含所有问答内容的包装器<div>,而单个问题和答案也都具有自己的<div> 。这让我感到困惑,因为通常是显示的第一个问题,而我希望一个或另一个 –或者让读者检测包装纸和显示所有内容

尽管所有浏览器的实现方式都不同,因为它们都可以毫无问题地处理文章样式的网站,从而消除了非内容元素,所以我正在寻找对SO / SE页面的结构或语义进行类似调整的方法诱导浏览器阅读器模式捕获所有内容

可访问性

SE最近扩大了其在所有SE / SO网站中的行距,以提高可访问性(例如,针对阅读障碍的读者)。我的问题是我在meta,in which I suggest that SE sites better support reader views上发布帖子时遇到的技术问题。(请注意,我不赞成或反对格式更改;我只是想研究一种通过阅读器模式支持用户确定的格式的方法。)我希望这个问题将成为该帖子的技术调查推论,并会提供一些可行的信息,说明可以进行哪些修改支持浏览器阅读器模式。

解决方法

Here is the source code for reader view for FireFox,我们可以用它来最好地猜测为什么Stack Overflow不能正常工作。我可以想象类似的标准用于其他读者视图实现。

阅读器视图使用的与堆栈溢出冲突的条件

关于Stack Overflow在阅读器视图中不起作用的一些提示。

它使用旨在从页面中删除评论的条件。

有一些标准,例如文本长度(最多300个字符,作为最大候选点),使用逗号类名旨在删除看起来像注释的节点。

由于阅读器模式旨在阅读博客文章,因此这显然是有利的,但是在Stack Overflow上,这可能会删除页面的大部分内容,因为它们具有很多低分节点(我的意思是....无论如何在注释中添加逗号?它们使用您的字符数中有价值的字符!呵呵)。

阅读器视图未使用语义作为指标

这让我感到惊讶,但是在做出决策时,它并没有寻找诸如<main><article>等语义元素。

这对堆栈溢出没有帮助,因为它们也不使用它们,但这是我立即想到的解决方法。

类名无助于堆栈溢出

但是他们确实会寻找表明某个项目是否可能相关的类名。

否定类(我认为其中包括部分匹配,例如“主注释”为“注释”)(可能导致节点从可能的候选列表中删除):-

unlikelyCandidates: /-ad-|ai2html|banner|breadcrumbs|combx|comment|community|cover-wrap|disqus|extra|footer|gdpr|header|legends|menu|related|remark|replies|rss|shoutbox|sidebar|skyscraper|social|sponsor|supplemental|ad-break|agegate|pagination|pager|popup|yom-remote/i,

在该列表中,有“评论”和“分享”,因此某个部分的评论得分可能很低(因为每个评论的等级均为“评论”),实际答案部分也可能得分很低由于“共享编辑跟随关闭标志”部分中包含“共享”类。

Stack Overflow可能会更改这些类名,这可能会增加在阅读器视图中呈现完整页面的机会,但这是一个hack,可能不是很健壮!

评论和简短答案是杀手

正如我提到的那样,元素中文本的长度和逗号的使用是确定元素是否为页面上“主要文本”的候选标准。

关于Stack Overflow的评论,简短答案等总是会与这种评分机制相冲突,因此,Stack Overflow能够对阅读器视图兼容性进行任何处理都是一个主要问题。

请记住……

解决方案是什么?

就使网站与读者的观点兼容而言,这不是您应该大力追求的事情,它会导致错误的决定。

试图调整堆栈溢出以满足读者意见的标准,充其量会导致黑客入侵,最糟糕的情况是会引入可访问性问题!

这里的问题是,问答站点在阅读者视图中的表现不佳。在Reader View上尝试Quora,它也无效。

为了说明我对此的思考方式,可以将原始问题更改为 “ FireFox会对读者的观点做些什么,使其与问答站点兼容”,这将引发有关他们用来确定显示内容的标准的讨论,因为问题出在其实现上而不是堆栈溢出/ Quora(并不是说Stack Overflow / Quora等都是完美的!)。

相反,我可以想到一些解决方案,这些解决方案将允许使用可访问性功能,我相信您将阅读器视图用于以下目的:-

自己修复

所有这些似乎都源于行高的变化,您可以创建一个插件或bookmarklet来修复页面上的所有样式。

由于可读性源代码可用,因此您可以轻松地调整源代码以解决特定于堆栈溢出的设计(给<div id="mainbar"加200磅的额外权重,因为这是我们要显示的容器)。

然后只需使用修改后的可读性脚本和有效的解决方案调整书签使其指向您自己的服务器即可。

如果您决定与社区共享此内容,它可能会给您带来良好的声誉,并且在简历/社交媒体资料等方面看起来都很棒。

获取堆栈溢出修复它!

更好的选择是让Stack Overflow实施辅助功能设置。 Stack Overflow应该尝试成为该领域的领导者,并且我确信对可访问性功能的要求会得到很好的接受,并最终添加到开发路线图中。

询问可访问性设置屏幕或下拉菜单。一个很好的起点应该是User Interface Options component.之类的东西。点击“ +显示首选项”,您将看到可以调整网站上的内容。

这样,您可以固定线高(当您根据自己的喜好调整设计时,这似乎是该线的原始起点)。然后,他们还可以实现类似于阅读器视图的简化视图(“聚焦模式”)。

作为这种方法的另一个好处,编辑器仍然可以使用,并且您可以以易于阅读的格式查看输出。

在像SO这样的网站上,这似乎是最好的解决方案,并且在复杂性方面位于技术限制/设计考虑因素的低端。

对读者查看标准系统的最终讽刺意味

撰写本文时,如果您在FireFox中以阅读器查看模式查看此页面,您将看到问题标题,然后将我的答案作为正文。您的整个问题正文文本将从页面中删除。我认为这恰好可以总结出这个问题!

screenshot of the page with the original title but my content visible as the main body text in reader mode within FireFox