WCAG 1.3.2合规问询：卡片标题上方内容的无障碍问题

在使用Django模板生成许可证申请卡片时，遇到无障碍合规与内容结构的矛盾：

• 卡片顶部设置带图标和彩色背景的状态栏（如“Action required”“Information”），下方是h3级别的卡片类别标题（如“Driver's license”），再往下是状态变更说明段落
• 无障碍报告指出当前DOM顺序违反WCAG 1.3.2「有意义序列」要求，认为关联标题的内容应置于标题下方，需调整HTML结构
• 存在三个核心疑问：
  1. 为什么DOM顺序会影响内容含义？
  2. 能否不调整HTML顺序解决无障碍问题？（当前用了大量flexbox，重构成本高，但无障碍优先级更高）
  3. 卡片内的元素是否符合标题的定义？

简化代码示例：

<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>

1. 为什么顺序会影响内容含义？ #

WCAG 1.3.2要求页面的**语义顺序（DOM顺序）**需匹配用户的认知逻辑。屏幕阅读器按DOM顺序读取内容，当前结构下会先播报状态信息，再播报许可证名称，这违背了“先识别主体，再了解状态”的常规认知，容易让用户混淆状态对应的主体，破坏信息传递的清晰度。

2. 不调整DOM顺序的应急方案（权宜之计） #

如果暂时无法重构DOM，可通过ARIA属性修正语义顺序，但仅作为过渡方案，优先推荐调整DOM结构：

• 给状态栏添加aria-hidden="true"隐藏其语义，同时在标题中通过视觉隐藏的文本补充状态信息，保证屏幕阅读器能关联主体与状态：

  <a href="http://example.com" class="card card--status card--status--warning">
    <div class="STATUS-BAR userfeed__marker userfeed__marker--warning" aria-hidden="true">
      <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 <span class="sr-only">- Action required</span></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>
  

  配合视觉隐藏类的CSS：

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  

3. 卡片元素的标题定义规范 #

卡片的标题应直接指向核心主体（如“Driver's license”“Building permit”），这符合标题的语义定义：标题是内容的核心概括，状态信息属于辅助说明，不应作为标题的核心部分，但可附加在标题中供屏幕阅读器识别，强化主体与状态的关联。

优先推荐的DOM结构调整（长期合规） #

虽然重构有成本，但这是最彻底的解决方案，可通过flexbox的order属性维持视觉布局，同时修正DOM顺序：

<a href="http://example.com" class="card card--status card--status--warning" style="display: flex; flex-direction: column;">
  <div class="card__body card__body--tabled" style="order: 2;">
    <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>
  <div class="STATUS-BAR userfeed__marker userfeed__marker--warning" style="order: 1;">
    <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>
</a>

此方案保证DOM顺序符合语义逻辑，同时通过order属性维持状态栏在视觉上的顶部位置，无需大幅改动现有flexbox结构。

内容的提问来源于stack exchange，提问作者Jirosworld