html - a 元素中的内容如何影响语义、屏幕阅读器和搜索引擎？

Question

假设我在博客的预览页面上有一个文章列表。我希望每个条目的整个区域都可以点击。在 HTML5 中，这是一个带有有效标记的可能解决方案:

 <a href="details/mypost">
    <article>
        <header>
            <h1>My Post</h1>
        </header>

        <p>This is just the teaser. Read more here …</p>
    </article>
</a>

我的问题是:

• 这在语义上是关于 w3 定义的链接或文章，还是两者兼而有之？
• 搜索引擎和屏幕阅读器如何阅读这些内容？它只是一个链接还是他们将其视为文章？

Answer 1

从语义上讲，您有一个包含 article 的链接. a元素不会改变其后代的含义。

(将链接包含在 article 中可能更有意义，例如 <article><a>…</a></article>。)

没有理由认为搜索引擎应该对此有任何问题(但讨论这个在 SO 上是题外话；它可能在 Webmasters 上是题外话。)

屏幕阅读器的准确阅读方式取决于特定的屏幕阅读器及其版本。

几年前，The Paciello Group/Steve Faulkner made a test使用一些屏幕阅读器，documented on the test page .只发现了一些小问题:有时 VoiceOver 会重复文本(这是由更普遍的错误引起的)，Jaws/NVDA/Window-Eyes 有时会将单个链接视为单独的链接。