单独列中的标题和内容

Question

我有一个设计，标题在左边，段落在右边，如下所示。

我可以使用 Bootstrap 列轻松完成此操作，但这在语义上是否正确？（即在不同的 div 中有标题与相关内容）？这对 WCAG 2.0 标准不利吗？从我在 w3.org 上读到的内容来看，这方面的信息有点可疑。

示例HTML：

<div class="row">
    <div class="col"><h2>Section 1 Title</h2></div>
    <div class="col">
        <p>Seciton 1 paragraph 1</p>
        <p>Seciton 1 paragraph 2</p>
    </div>
</div>
<div class="row">
    <div class="col"><h2>Section 2 Title</h2></div>
    <div class="col">
        <p>Seciton 2 paragraph 1</p>
        <p>Seciton 2 paragraph 2</p>
    </div>
</div>

Answer 1

你能 post HTML 和 CSS 吗？一个快速的答案是否定的。除非你做一些疯狂的事情，比如仍然使用表格来格式化你的布局，否则它很可能不是问题。我的假设是标题和相应的段落在容器中并使用 CSS 浮动？如果是这样，那将通过 WCAG 2.0 标准。但是没有你的代码我不能给你一个明确的答案。

Answer 2

我同意@abourne，我们需要更多代码。屏幕 reader 用户可以分别使用 "H" 键或 H1、H2、H3 等“1”、“2”、“3”等导航到标题。一旦他们这样做，如果他们按下向下箭头，他们将转到可访问性树中的下一个项目（通常反映 DOM）。如果下一项不是段落文本而是下一个标题，那么是的，这将是一个可访问性问题。

但这取决于你如何实现它。

Answer 3

重要的是让每个标题+段落在 DOM 中按顺序出现（因此标题 1，然后是相应的段落，然后是标题 2，然后是相应的段落，依此类推）。

但是在它们之间有多余的 div 来帮助布局是没有问题的。所以你做的完全没问题。

单独列中的标题和内容

Headings and content in separate columns

html

accessibility

semantic-markup

html-heading