基金会的卡片组件 <p> 而不是 <h4>？

Question

我正在阅读 Foundation 的 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

如果您跳过标题级别，这不是自动可访问性问题。在某些有效的情况下它是有意义的，但它应该很少发生。

如果您从卡片中删除标题，屏幕 reader 用户将更难找到卡片。屏幕阅读软件具有快捷键，可以更轻松地在页面上查找不同类型的元素。在这种情况下，我可以使用 H 键（或在 iOS 上导航到所有标题，使用 VoiceOver，我可以将我的转子设置为 "headings" 和向下滑动以移动到下一个标题）。

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

基金会的卡片组件 <p> 而不是 <h4>？

Foundation's Card Component with <p> instead of <h4>?

html

accessibility

zurb-foundation

，您是否无法控制将

更改为

？