如果内容位于标题上方，如何理解 WCAG 1.3.2？

Question

如果卡片也具有一定的“状态”，我正在努力理解哪些内容应该属于标题。

这种情况发生在带有生成多个卡片的 Django 模板的页面上。每张卡都代表一份许可证请求。因此，每张卡都有一个类别，我现在将其设置为标题（实际上不确定），在该类别下，有一个段落中的规范，显示这些许可证申请的状态更改。但是......在卡片的顶部，我们一直显示“状态栏”，其中带有带有彩色背景的图标，用于传达额外的状态栏。彩色状态栏显然是导致可访问性问题的原因。

我收到了关于我的代码的可访问性报告，实际上我不确定该报告对于这个“有意义的序列”是否 100% 正确： “...每个应用程序请求都包含一个标头和一些文本。一些许可证申请已被赋予附加标签，其中包含“需要采取行动”和“信息”等文本。这些标签当前显示在标题上方，但结构正确，与标题相关的所有内容都应显示在标题下方。请注意，视觉表示可能会有所不同，但请调整 HTML 结构以符合内容的层次结构。..”

我不太明白为什么顺序会改变这里内容的“含义”。

是否可以在不实际更改顺序的情况下解决这个问题？

卡片有很多弹性框和控制间距的方法，具体取决于它们是否有状态文本，因此将状态栏放在标题下方并使用 CSS 移动所有内容并不那么容易。 （当然，可访问性比重构的痛苦更重要）。

我也想知道这些卡片中的任何元素是否确实符合真正的标题。

我在 Codepen 中有一个简化样式的示例：https://codepen.io/jirosworld/full/ZEZZxzE

  <a href="http://example.com" class="card card--status card--status--warning">
    <div class="STATUS-BAR userfeed__marker userfeed__marker--warning">
      <span aria-hidden="true" class="material-icons-outlined ic--outline-warning-amber">warning_amber</span>
      <span class="card__status_indicator_text">Status: action required! </span>
    </div>
    <div class="card__body card__body--tabled">
      <h3 class="HEADING tabled__value">Driver's license</h3>
      <p class="userfeed-card__p">
        <span class="status">Your request has changed in status from 'processing' to 'upload photo'.</span>
      </p>
      <span class="button button--icon-before button--transparent">
        <span aria-hidden="true" class="material-icons-outlined ic--outline-arrow-forward">east</span>
      </span>
    </div>
  </a>

  <a href="http://example.com" class="card card--status card--status--info">
    <div class="STATUS-BAR userfeed__marker userfeed__marker--info">
      <span aria-hidden="true" class="material-icons-outlined ic--outline-info">info</span>
      <span class="card__status_indicator_text">Info notification </span>
    </div>
    <div class="card__body card__body--tabled">
      <h3 class="HEADING tabled__value">Building permit</h3>
      <p class="userfeed-card__p">
        <span class="status">Your request has changed in status from 'received' to 'processing'.</span>
      </p>
      <span class="button button--icon-before button--transparent">
        <span aria-hidden="true" class="material-icons-outlined ic--outline-arrow-forward">east</span>
      </span>
    </div>
  </a>

</section>```

Answer 1

您可以将网页视为文本文档。根据当前的源顺序，如果您从文本中删除样式，“状态”内容似乎是上一张卡部分的一部分，因为它属于该卡的标题而不是正确的标题。

这是一个很好的模拟测试，可以测试依赖辅助设备的用户如何解释网页的结构。这就是为什么遵循有意义的内容顺序很重要。

您需要重构标记的源顺序，以便“状态”出现在每张卡的标题之后，以符合可访问性标准。如果您希望“状态”以视觉方式显示在每张卡片的标题上方，以便视力正常的用户看到，您可以使用 CSS 移动位置。使用 Flexbox 可以让这一切变得简单，因为您可以使用

order

属性，但您需要首先重构 HTML。