标题和内容在单独的列中

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

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

Answer 2

重要的是让每个标题+段落在DOM中依次显示（因此，标题1，然后是相应的段落，然后是标题2，然后是相应的段落，等等）。

但是在它们之间有多余的div来帮助布局是没有问题的。所以你所做的一切都很好。

Answer 3

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

但这取决于您的实现方式。