是否有浏览器工具可以显示网站标题信息的快速概览？答案

【问题标题】：Is there a browser tool to show a quick overview of headings information of a website?是否有浏览器工具可以显示网站标题信息的快速概览？
【发布时间】：2014-02-26 11:31:38
【问题描述】：

有时您需要快速了解网站所有使用的 html 标题（h1、h2、h3...）。是的，实际上您可以查看源代码来获取它，但这并不是一个真正的快速概述。

许多 webdeveloper 都知道 Chromiumbrowser 的好工具，称为“Web Developer”。该工具使您能够勾勒标题，但轮廓颜色不允许得出标题编号或标题层次结构。

那么这让我想到是否有 Firefox、Chromium 或其他浏览器的工具来显示网站标题信息的快速概览？

【问题讨论】：

标签： html plugins accessibility browser-plugin

【解决方案1】：

您有用于 Firefox 的 Web Developer 插件和用于 Chrome 的 Web Developer 扩展程序，这正是您的工作。此外，还有一个名为 WAVE Toolbar 的工具，它可以计算标题以及许多与可访问性相关的事情。

WAVE 工具栏

_{（来源：mozilla.net）}

【讨论】：

因此，您将验证自己的 HTML。您可以在一个浏览器中完成。正如他们的错误报告中所给出的，Chrome 有很多可访问性问题。因此，这是在浪费时间，因为 Chrome 会不断发展自己。它在提供标准方面不稳定，但正在努力维护一些东西。如果我错了，请纠正我，@ChristianMichael。
能否请您删除 webdeveloper 屏幕截图和 webdeveloper 文本？我自己尝试过，但似乎我做不到。 Wave 工具栏是当时 a 会评论为接受的答案。
使用 Web Developer 插件，切换“Outline › Show Element Tag Names when Outlining”和“Outline › Outline Headers”选项；这有点古怪，但通常会显示标题级别。
@PraveenKumar 为 Firefox 安装 Web Developer 插件后，启用“Outline › Show Element Tag Names when Outlining”和“Outline › Outline Headers”选项。这样做会在页面上的所有标题旁边添加一个标题级别指示器（例如 h2）。同样适用于 Chrome，但某些选项名称略有不同。 prntscr.com/9pndo7
多年来我一直在 Seamonkey (Firefox) 中使用 Web Developer 工具栏，但我从来不知道它可以做到这一点！我一直在搜索源代码。作为参考，它位于“信息 - 查看文档大纲”下 - 它按顺序列出了嵌套的标题，每个标题旁边都有小标签表示它是什么标题（H1、H2 等）。它还会通知您缺少标题级别，这正是我所需要的。

【解决方案2】：

虽然有许多浏览器扩展程序和小书签以纯 HTML 源代码中定义的方式显示标题大纲，但没有一个（据我所知）以与屏幕阅读器相同的方式显示大纲（其中实际上是我们大多数时候感兴趣的东西）。

一些背景知识：为了在网页中保持良好的可访问性，整个网页必须以有效且有意义的标题结构进行组织。这可能如下所示：

H1 Navigation
H1 Content: Here comes the "real" title and content of the current page
  H2 Content sub section 1
  H2 Content sub section 2
    H3 Content sub section 2.1
  etc.
H1 Related
  H2 News
    H3 News 1
    H3 News 2
    H3 News 3

通常，在图形设计中，许多标题都被省略（例如导航或相关），它们的含义通过页面的图形结构传递。尽管如此，非图形用户代理（例如屏幕阅读器）依赖于这些标题，因此它们应该仍然存在于 HTML 源代码中，并且仅对图形用户代理（“普通”网络浏览器）隐藏。

现在，有两种方法可以从网页中以视觉方式隐藏某些内容：

首先，我们可以使用 CSS 属性 display: none 或 visibility: hidden。有些人不知道的是：使用这些属性，屏幕阅读器也可以省略隐藏内容。因此，这不是隐藏屏幕阅读器仍应看到的内容的好方法，因此不是适合我们目的的隐藏标题的方法。

第二种方法是将要隐藏的内容移出视口。这通常由position: absolute, left: 10000px, width: 1px; height: 1px; overflow: hidden 之类的东西完成（网上有很多变体，但基本上都是一样的）。因此，通常您使用上述属性定义一个 CSS 类，如 .visually_hidden，并将该类分配给您想要直观地隐藏的标题（但不是来自屏幕阅读器）。

H1 Navigation.visually_hidden
H1 Content
  H2 Content sub section 1
  H2 Content sub section 2
    H3 Content sub section 2.1
  etc.
H1 Related.visually_hidden
  H2 News
    H3 News 1
    H3 News 2
    H3 News 3

现在，回到原来的话题！

如前所述，上述标题概述工具/扩展都不区分视觉元素和完全隐藏的元素（事实上，它们根本不关心 CSS）！所以它们只在有限的范围内有用。（如果我错了，或者如果有人知道实现此功能的扩展，请纠正我。）

如果您需要以屏幕用户通过屏幕阅读器感知的方式查看标题轮廓，您必须自己安装屏幕阅读器（例如免费的 NVDA）并使用其内部标题轮廓。

更新

似乎 Internet Explorer 的 Web 可访问性工具栏在其“结构 => 标题结构”功能中尊重了上述显示/可见性 CSS 属性，因此它似乎适合以实际方式显示标题层次结构。

【讨论】：

【解决方案3】：

您可以尝试安装 firebug 它的 firefox 插件，地址是：http://getfirebug.com/

这是一个强大的网络开发工具。 :)

【讨论】：