Question

为了解决第508节（要求1194.22（d））所需的标题层次结构的可访问性问题，我需要用JS重写标题层次结构。

问题在于HTML已经建立，并且后端技术不能用于重新排列这些标题。我们遇到的情况是，某些标题的顺序比预期的要低，因此它们以这种顺序出现，例如：

这应该转换为

我如何做到这一点？

Answer 1

您可能无需执行任何操作。在1194.22中没有任何内容说明标题的顺序必须是连续的，尽管这当然是首选项。

（请注意，Section 508 was updated是几年前的版本，因此它遵循WCAG 2.0，因此对1194.22（d）的引用是过时的，您应该对WCAG 2.0进行引用。在这种情况下，success criteria 1.3.1谈论标题。）

在

下嵌套

可能是完全有效的。您的工具无法确定层次结构是否正确。人类必须这样做。

Answer 2

在合并第三方库时，标题层次很差是一个很普遍的问题，但是实际上主要的问题是在许多情况下这些标题不应该存在。在应用以下可完成预期工作的脚本之前，应考虑摆脱它们。

此javascript使用jQuery，但可以在vanilla-javascript中进行修改。它解析页面的标准标题（从h1到h6），并考虑到其父级将其级别更改为适当的预期级别。

这种脚本的困难在于，在您的示例中，仅通过将第一个h4更改为h3来固定标题层次结构可能在纸上可行，但不是可靠的解决方案。

$(document).ready(function() {
  var level=0, plevel=[0];
  $("h1,h2,h3,h4,h5,h5").each(function() {
    var c_level=$(this)[0].tagName.substr(1);
    var p_level=plevel[plevel.length-1];

    while (c_level<p_level) {
      plevel.pop();
      level--;
      p_level=plevel[plevel.length-1];
    }

    if (c_level>p_level) {
      level++;
      plevel.push(c_level);
    }

    if (c_level!=level) {
      $(this).replaceWith("<h"+(level)+">"+$(this).html()+"</h"+(level)+">");
    }

  });
});

纯Javascript解决方案，可修复标题层次结构

2 个答案:

下嵌套

可能是完全有效的。您的工具无法确定层次结构是否正确。人类必须这样做。