为什么我在 WordPress 标头上的 ADA 合规性失败，从<h1>至</h1><h3> ?</h3>

Question

我的任务是将我们当前的网站构建成 ADA 合规性，更新所有内容一直很痛苦，所以我对标题有一些疑问。

我们的“页面模板”中有以下代码：

<main class="content">
    <div class="row">
        <div class="small-12 columns text-center">
            <header class="collection__header">
                <h1>{{ entity.site.get_site_name | raw }}</h1>
                <div class="expanded row">
                    <div class="small-12 large-offset-1 large-10 columns">
                        <div class="page-description">{{ entity.get_content | raw }}</div>
                    </div>
                </div>
            </header>
        </div>
    </div>
</main>

我们有entity.get_content()调用，它会拉入 WordPress “发布内容”框：

---

问题：

当有人在帖子内容中传入 header 标签（WordPress 允许）时，它会抛出 ADA Header 结构“Skipped Header”，如下所示：

有谁知道有人可以安全地在“发布内容”中传递任何 header 标签，并且我们仍然符合 ADA 标准？ 如果他们传入h2标记，那很好，但如果他们传入h3标记，如屏幕截图所示，与主题构建相比，ADA 标头会被抛出。

Answer 1

76.7% 的屏幕阅读器用户依赖浏览页面标题作为在冗长网页上查找信息的主要方式。

– WebAIM 屏幕阅读器用户调查 #9 结果，2021

就像有视力的用户一样（略读）。

当试图通过包含空白和不相关标题分组的目录导航长文档时，任何人都会感到困惑。

因此，虽然目前没有一致的标题级别顺序（afaik）的硬性一致性标准，但它很重要。

许多扫描工具会将其标记为错误，但如果您的扫描工具允许您关闭警告和最佳实践并且只显示真正的错误，则不应出现此问题。

开发者能做什么？

管理内容并使其在不同的上下文中可用（自适应内容）是 CMS 的工作。 这包括根据上下文调整标题级别。

一种解决方案可能如下：

<div class="page-description">{{ entity.get_content | start_at_h2 }}</div>

这会将<h3>变成<h2> ， h4 → h3 等等：

<div class="page-description">
<hgroup>
  <h2 style="text-align: center;">We’re the people…
</hgroup>
</div>

也许有人已经为 WordPress 写了一个扩展？

采购方面能做什么？

支持作者提供良好的自适应内容应该是 CMS 的工作。 这意味着如果您关心您的最终 output 是否符合 ADA，您应该选择一个可以帮助您实现这一目标的 CMS。

B 部分：支持创作工具可访问性指南 (ATAG) 的可访问内容的制作解释了 CMS 需要做什么才能合规。 您可以 go 并找到经过认证的 CMS。

在这种情况下，它可以警告作者标题级别以及标题文本太长。

为了从开发人员的角度解决问题，我可以想象一个有助于保持标题级别一致的过滤器。 因为是开发人员将内容放入上下文中。