HTML5文章标签：文章前内容？

Question

我的问题可能是基于糟糕的设计。但是，我无法更改它并且需要使用它。这是我正在谈论的视觉草稿，它只是完整网站的一部分：

如您所见，有一个带有背景图片的文章标题，然后是面包屑工具栏，最后是文章内容。现在，通常情况下，如果没有面包屑工具栏，您可以简单地将其包装成 <article>。但是面包屑将文章分为"pre"篇文章和正文部分。唯一的 "clean" HTML5 方法是将包含 header 和背景图片的文章包装到 <article> 中，并将面包屑定位到目标视觉位置。但是，我将其归类为 "hack" 并且我正在寻找更好的方法。

这种情况的首选标记是什么？

Answer 1

可能是这样的-

<article>
    <header>
        //APPLY BACKGROUND IMAGE
        <h1>YOUR TITLE</h1>
    </header>

    <nav>
        //USE BREADCRUMBS HERE
    </nav>

    <section>
        //USE THIS FOR CONTENT
    </section>
</article>

Answer 2

当前需求不会有任何完美的解决方案。

正如前一个回答的评论所指出的，nav 与本文无关。

此外，WCAG 指示：

1.3.2 Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A)

编辑：如果更改元素的顺序可以保留有意义的序列（G57), when the elements does not match visually the DOM order (see C27），屏幕的视觉焦点指示器 reader 将与标准阅读顺序不匹配这将导致使用屏幕 reader.

的视力不佳的人体验不佳

因此，不可能尝试 CSS 视觉黑客在不违反其他规则的情况下在视觉上颠倒元素之间的顺序。

您可能会想到第三种技术：

在可见标题上设置aria-hidden，
在 article 标签上使用 aria-labelledby 指向 article 元素外的 h1 :

例如：

 <header>
     <h1 aria-hidden="true" id="title">Your title</h1>
     <nav><!-- nav here --></nav>
 </header>

 <article aria-labelledby="title">
     // article here
 </article>

另一种方法是复制标题元素，一个可见，一个用于辅助技术

 <header>
     <div aria-hidden="true">Your title</div>
     <nav><!-- nav here --></nav>
 </header>

 <article>
     <h1 class="sr-only">Your title</h1>
     // article here
 </article>

HTML5文章标签：文章前内容？

HTML5 article tag: pre article content?

css

html

accessibility

semantic-markup