内容流和可访问性的标题语义适当标记
Semantically Appropriate Markup of Headings for Content Flow and Accessibility
我的设计中有一个部分如下所示:
与任何事物一样,这可以通过多种方式进行标记:
<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>
最好的解决方案(可能没有在上面列出)是什么,它不仅在语义上是正确的,而且仍然为屏幕阅读器、机器人等保留内容流和层次结构?
我有一个不在列表中的选项。
我推荐它的原因是屏幕 reader 用户浏览页面的方式,大多数使用标题,如果您使用单独的 <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>
我的设计中有一个部分如下所示:
与任何事物一样,这可以通过多种方式进行标记:
<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>
最好的解决方案(可能没有在上面列出)是什么,它不仅在语义上是正确的,而且仍然为屏幕阅读器、机器人等保留内容流和层次结构?
我有一个不在列表中的选项。
我推荐它的原因是屏幕 reader 用户浏览页面的方式,大多数使用标题,如果您使用单独的 <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>