一个元素中的内容如何影响语义，屏幕阅读器和搜索引擎？

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上可能是就此话题了。）

屏幕阅读器如何准确读取此内容取决于特定的屏幕阅读器及其版本。

几年前， Paciello Group /史蒂夫·福克纳（Steve Faulkner）使用一些屏幕阅读器进行了测试 ， 该测试记录在测试页上 。 仅发现了一些小问题：有时VoiceOver重复了文本（这是由更常见的错误引起的），而Jaws / NVDA / Window-Eyes有时将单个链接视为单独的链接。