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

Question

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

正如您所看到的那样，文章的标题是背景图片，然后是面包屑工具栏，最后是文章内容。现在，通常情况下，如果不是面包屑工具栏，您只需将其包装成<article>即可。但是面包屑将文章划分为＆＃34; pre＆＃34;文章和主要文章部分。唯一的＆＃34;清洁＆＃34; HTML5的方式是将包含带有背景图像的标题的文章包装到<article>中，并将面包屑定位到目标视觉位置。但是，我将此归类为＆＃34; hack＆＃34;我正在寻找更好的方式。

此方案的首选标记是什么？

Answer 1

对于当前的要求，没有任何完美的解决方案。

正如对上一个答案的评论所指出的，nav与文章无关。

此外，WCAG指示：

  

1.3.2 Meaningful Sequence：当呈现内容的序列影响其含义时，可以以编程方式确定正确的阅读顺序。 （A级）

编辑：如果更改元素的顺序可以保留有意义的序列（G57），当元素在视觉上不匹配DOM顺序（see C27）时，视觉焦点指示符屏幕阅读器与标准阅读顺序不匹配，这将导致使用屏幕阅读器的低视力人群的不良用户体验。

因此，在不破坏其他规则的情况下，尝试使用CSS视觉黑客来在视觉上反转元素之间的顺序是不可能的。

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

• 在可见标题上设置aria-hidden
• 使用aria-labelledby标记上的article指向h1元素之外的article：

例如：

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

Answer 2

可能是这样的 -

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

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

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