当元素的视觉顺序不同时，如何为屏幕阅读器构建我的 HTML 语义正确的结构？
How do I structure my HTML semantically correct for screen readers when the visual order of elements is different?
我正在尝试使搜索结果列表更易于访问。
假设我有一个按以下方式构建的搜索结果列表：
<article>
<h2>Name of the author</h2>
<h1><a>Name of the book</a></h1>
<div class="seperator">
<div class="availability-status status1" title="available"></div>
<div class="icon icon-book" title="Book"></div>
<div class="result-button-group">
<a href="…" role="button" class="sharing">Sharing</a>
…
</div>
</div>
<p class="imprint">Publishing house (Year)</p>
<p class="series">Part of: name of the series</p>
</article>
书名是link到另一页的，而它周围的其他元素是相应项目的附加信息。
视觉上看起来像这样：
如何构建语义正确的标记，以便使用屏幕阅读器的用户可以理解结果项？
当他们在 link 到 link 的基础上导航时，他们会到达书名，但可能会错过书名上方的作者字段，对吧？我可以用 aria-attributes 实现吗？还是这种结构足以使无论如何都有意义？
我自己玩过 VoiceOver 试图理解它，但我远不是专家。因此，我们将不胜感激。
大纲
您不应使用 h2 作为作者姓名。此标题将成为 article 元素的标题（因为它是第一个元素），书名的标题将在同一级别创建另一个部分。
相反，只使用一个标题（书名最有意义）并将其与作者姓名（您可以使用 cite 元素）分组在 header 元素中.
<article>
<header>
<cite>Name of the author</cite>
<h1><a href=""><cite>Name of the book</cite></a></h1>
</header>
<!-- … -->
</article>
Link
When they navigate on a link to link basis they land on the name of the book, but might miss the author field that is above the title, right?
是的。但这不是问题，这正是屏幕 reader 用户 expects/wants 要做的（查找链接，而不是其他任何事情）。
但是，您也可以考虑将作者姓名添加到 link/heading：
<h1><a href=""><cite>Name of the author</cite>: <cite>Name of the book</cite></a></h1>
字体图标
注意这很可能是无法访问的(details)，因为该元素没有内容（生成的图片对于没有CSS的用户代理、盲人用户等没有用，意思另外，它传达的内容未以其他方式表示）：
<div class="availability-status status1" title="available"></div>
title 属性不够。使用 img（使用 alt），或添加替代文本（并在视觉上隐藏它）。
而且这似乎是纯粹的装饰，所以不需要 title 属性（而且很多用户也无法访问它，因为该元素没有内容）：
<div class="icon icon-book" title="Book"></div>
（但如果它是一本书的信息很重要，例如因为还有杂志等，那么你应该提供一个替代方案，就像上面的情况一样。）
我正在尝试使搜索结果列表更易于访问。
假设我有一个按以下方式构建的搜索结果列表：
<article>
<h2>Name of the author</h2>
<h1><a>Name of the book</a></h1>
<div class="seperator">
<div class="availability-status status1" title="available"></div>
<div class="icon icon-book" title="Book"></div>
<div class="result-button-group">
<a href="…" role="button" class="sharing">Sharing</a>
…
</div>
</div>
<p class="imprint">Publishing house (Year)</p>
<p class="series">Part of: name of the series</p>
</article>
书名是link到另一页的，而它周围的其他元素是相应项目的附加信息。
视觉上看起来像这样：
如何构建语义正确的标记，以便使用屏幕阅读器的用户可以理解结果项？
当他们在 link 到 link 的基础上导航时，他们会到达书名，但可能会错过书名上方的作者字段，对吧？我可以用 aria-attributes 实现吗？还是这种结构足以使无论如何都有意义？
我自己玩过 VoiceOver 试图理解它，但我远不是专家。因此，我们将不胜感激。
大纲
您不应使用 h2 作为作者姓名。此标题将成为 article 元素的标题（因为它是第一个元素），书名的标题将在同一级别创建另一个部分。
相反，只使用一个标题（书名最有意义）并将其与作者姓名（您可以使用 cite 元素）分组在 header 元素中.
<article>
<header>
<cite>Name of the author</cite>
<h1><a href=""><cite>Name of the book</cite></a></h1>
</header>
<!-- … -->
</article>
Link
When they navigate on a link to link basis they land on the name of the book, but might miss the author field that is above the title, right?
是的。但这不是问题，这正是屏幕 reader 用户 expects/wants 要做的（查找链接，而不是其他任何事情）。
但是，您也可以考虑将作者姓名添加到 link/heading：
<h1><a href=""><cite>Name of the author</cite>: <cite>Name of the book</cite></a></h1>
字体图标
注意这很可能是无法访问的(details)，因为该元素没有内容（生成的图片对于没有CSS的用户代理、盲人用户等没有用，意思另外，它传达的内容未以其他方式表示）：
<div class="availability-status status1" title="available"></div>
title 属性不够。使用 img（使用 alt），或添加替代文本（并在视觉上隐藏它）。
而且这似乎是纯粹的装饰，所以不需要 title 属性（而且很多用户也无法访问它，因为该元素没有内容）：
<div class="icon icon-book" title="Book"></div>
（但如果它是一本书的信息很重要，例如因为还有杂志等，那么你应该提供一个替代方案，就像上面的情况一样。）