内容流和可访问性标题的语义适当标记

Posted 2023-04-13

【中文标题】内容流和可访问性标题的语义适当标记

【英文标题】：Semantically Appropriate Markup of Headings for Content Flow and Accessibility

【发布时间】：2021-06-02 03:24:02

【问题描述】：

我有一个设计，其部分如下所示：

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

<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>

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

【问题讨论】：

没有什么可以让屏幕阅读器更容易阅读。如果您想让您的网站易于访问，您可能需要查看 mdn，他们会给您一些建议。

@TobyHarnish 这是不正确的。使用正确的标记会极大地影响屏幕阅读器对网站的可读性

【参考方案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>

【讨论】：

就您的观点而言，“我假设'关于区域标题'在这里很重要”，它是，它不是。它的重要性与“第 5 章”在书中的重要性相同。它为您提供了您在页面中所处位置的上下文，但它并没有真正说明任何值得注意的地方。

这很重要，因为任何与“你在哪里”相关的内容都应该出现在标题中，这是它的主要目的，使导航更容易。在这种情况下，上述解决方案几乎无疑是您的最佳选择。