使用 CSS 或 jQuery 标记不适当的 HTML 标题结构

Question

我目前正在开发一个脚本，它将扫描 HTML 文件并标记任何潜在的可访问性问题。我想解决的一个更常见的问题是标题结构——当内容创建者从 h1 跳到 h3、从 h2 跳到 h4 等时。

我正在使用 CSS 和 Cheerio（jQuery 库的 Node.js 实现）。最好的解决方案是：

var cheerio = require("cheerio"),
    fs = require("fs");

var badHeadings = [];
var $temp = cheerio.load(fs.readFileSync("./file.html")

$temp("*:not('h1, h2, h3, h4, h5, h6').remove();
$temp("h1 + h3, h2 + h4, h3 + h5, h4 + h6").each(function(){
    badHeadings.push($(this).html());
});
// Next use badHeadings array to search on a new cheerio instance of the same file.  

事实上 Cheerio 对 ':contains' 选择器的支持有限（对 ':not' 选择器的支持参差不齐），这意味着这种方法可能并不理想。

谁能想到更简单/更好的方法？一些令人费解的 css 选择器组合甚至会受到欢迎，但我不知道这是否可能。

Answer 1

HTML 的整个传统都使用标题来表示样式而不是结构。成百上千页

在我工作的地方，我们采用三种方法。这可能对您的确切问题没有帮助，但它可能会将您的心态从“一切都必须可访问”转变为基于风险。

1. 如果它是当前的东西，并且将在下一个周期更新或推送到新模板，则必须由作者正确格式化才能上线。如果不是，则应尽可能修复它，即使用分析来确定这些东西是否真正被使用
2. 如果是新开发的东西，必须遵守标准，否则内容将无法上线，期间。
3. 如果内容是真正的遗产，10 多年前的东西，除了少数人在蓝月亮中提到过一次，没有人，我们有一个遗产/存档政策，说这个内容是出于历史目的，它永远不会更新，使用风险自负。当然，我们会提供 POC，以防万一有人确实需要内容。