HTML5文章标签:文章前内容？
我的问题可能是基于一个糟糕的设计。然而，我不能改变这一点，我需要与它合作。这是我说的视觉草稿，它只是一个完整网站的一部分：
如您所见，有一个带有背景图像的文章的标题，然后是一个面包屑工具栏，最后是文章内容。现在，通常情况下，如果没有面包屑工具栏，您可以简单地将它包装到一个<article>中。但面包屑将文章划分为“前”文章和主要文章部分。唯一“干净”的HTML5方法是将文章(包括带有背景图像的标题)包装到<article>中，并将面包屑定位到目标视觉位置。然而，我把它归类为“黑客”，我正在寻找一个更好的方法。
这个场景的首选标记是什么？
回答 2
Stack Overflow用户
发布于 2017-06-18 14:50:41
，对于当前的需求，没有任何完美的解决方案。
正如对前一个答案的评论所指出的，nav与文章无关。
此外，WCAG还指示：
1.3.2 有意义序列：当呈现内容的顺序影响其含义时，可以通过编程方式确定正确的阅读顺序。(A级)
编辑:如果更改元素的顺序可以保留有意义的序列(https://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160105/G57)，当元素在视觉上与DOM顺序(https://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160105/C27)不匹配时，屏幕阅读器的视觉焦点指示符将与标准阅读顺序不匹配，这将导致使用屏幕阅读器对视力低下的人进行错误的UX。
因此，不可能在不破坏另一条规则的情况下，尝试使用CSS可视化黑客来从视觉上颠倒元素之间的顺序。
你可能会想到第三种技术：
- 在可见标题上设置
aria-hidden， - 使用
aria-labelledby在article标记上指向article元素之外的h1：
例如：
<header>
<h1 aria-hidden="true" id="title">Your title</h1>
<nav><!-- nav here --></nav>
</header>
<article aria-labelledby="title">
// article here
</article>另一种方法是复制title元素，一个可见元素，一个用于辅助技术的元素。
<header>
<div aria-hidden="true">Your title</div>
<nav><!-- nav here --></nav>
</header>
<article>
<h1 class="sr-only">Your title</h1>
// article here
</article>Stack Overflow用户
发布于 2017-06-16 07:36:47
可能是这样的-
<article>
<header>
//APPLY BACKGROUND IMAGE
<h1>YOUR TITLE</h1>
</header>
<nav>
//USE BREADCRUMBS HERE
</nav>
<section>
//USE THIS FOR CONTENT
</section>
</article>https://stackoverflow.com/questions/44576921
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号