html - 语义上适当的标题标记，以实现内容流和可访问性

Question

我的设计有一个如下所示的部分:

与任何事物一样，这可以通过多种方式进行标记:

<section>
    <header>
        <p>About Area Title<p>
        <h2>Lorem ipsum[...]</h2>
    </header>

    <p>Lorem ipsum dolor sit amet[...]</p>
    <!-- ... -->
</section>

<!-- OR -->

<section>
    <p>About Area Title<p>
    <h2>Lorem ipsum[...]</h2>
    <p>Lorem ipsum dolor sit amet[...]</p>
    <!-- ... -->
</section>

<!-- OR -->

<section>
    <h2>About Area Title<h2>
    <h3>Lorem ipsum[...]</h3>
    <p>Lorem ipsum dolor sit amet[...]</p>
    <!-- ... -->
</section>

什么是最好的解决方案(上面可能没有列出)，它不仅在语义上正确，而且仍然为屏幕阅读器、机器人等保留内容流和层次结构？

Answer 1

我为您提供了一个不在列表中的选项。

我推荐这样做的原因是因为屏幕阅读器用户导航页面的方式，大多数使用标题，并且如果您使用单独的 <p> 来完成它到可能会错过信息的标题(我假设“关于区域标题”在这里很重要。)

<section aria-labelledby="heading-a">
    <h2 id="heading-a">
        <span>About Area Title</span>
        <span class="visually-hidden">:</span>
        Lorem ipsum[...]
    <h2>
    <p>Lorem ipsum dolor sit amet[...]</p>
    <!-- ... -->
</section>

现在，上面假设“关于区域标题”位作为该部分标题的一部分是有意义的(从逻辑上讲，在大多数情况下应该如此)。

然后我们要做的是将样式应用到 <span>更小并实现 visually hidden class隐藏:我们用作分隔符。

最后一件事是，标记一个部分是一个很好的做法，因此我们只需使用 aria-labelledby 将其指向该部分的标题即可。以及标题上相应的 ID。

下面的粗略示例向您展示了我的意思。

h2{
    font-size: 2.5rem;
}
h2>span{
    font-size: 1rem;
    display: block;
}
.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<section aria-labelledby="heading-a">
    <h2 id="heading-a">
        <span>About Area Title</span>
        <span class="visually-hidden">:</span>
        Lorem ipsum[...]
    </h2>
    <p>Lorem ipsum dolor sit amet[...]</p>
    <!-- ... -->
</section>