使用<p>而不是</p> <h4>的Foundation卡组件？

Question

我正在阅读Foundation的Card组件的文档，发现它们在Card中使用了<h4>标签。出于我的目的，我不需要将文本作为标题，并且页面上也没有<h3>，所以我不想跳过标题级别。

因此，我想知道从可访问性的角度来看，将文本放在<p>标签中而不是文档中带有<h4>标签的文本是一种好习惯吗？

基金会的例子：

<div class="card" style="width: 300px;">
  <div class="card-divider">
    <h4>I'm featured</h4>
  </div>
  <img src="assets/img/generic/rectangle-1.jpg">
  <div class="card-section">
    <p>This card makes use of the card-divider element.</p>
  </div>
</div>

我想做什么：

<div class="card" style="width: 300px;">
  <div class="card-divider">
    <p>I'm featured</p>
  </div>
  <img src="assets/img/generic/rectangle-1.jpg">
  <div class="card-section">
    <p>This card makes use of the card-divider element.</p>
  </div>
</div>

Answer 1

如果跳过标题级别，这不是自动可访问性问题。在某些情况下，这是有道理的，但这种情况很少发生。

如果从卡中删除标题，则屏幕阅读器用户将很难找到卡。屏幕阅读软件具有快捷键，可以使在页面上查找不同类型的元素更加容易。在这种情况下，我可以使用 H 键导航到所有标题（或者在iOS上，通过VoiceOver，我可以将转子设置为“标题”，然后向下滑动以移至下一个标题）

我建议保留标题，即使它们跳过级别。 没有标题比跳过级别更糟糕。

但是，如果您可以控制生成

而不是

，那么您是否无法控制将

更改为

？