a元素中的内容如何影响语义，屏幕阅读器和搜索引擎？ [英] How does content in an a-element affects semantics, screen readers and search engines?

问题描述

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

Let's say I have a list of articles on a preview page of a blog. I want the whole area of each entry to be clickable. In HTML5 this is a possible solution with valid markup:

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

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

我的问题是：

• 这在语义上是关于 w3 定义的链接或文章还是某种方式？


• 搜索引擎和屏幕阅读器如何阅读这些内容？难道只是一个链接或他们把它当作一个文章？

• Is this semantically a link or an article or somehow both regarding the w3 defintion?
• How is this content read by search engines and screen readers? Is it just a link or do they treat it as an article?

推荐答案

语义，你有一个链接，其中包含文章。 a 元素不会改变其后代的含义。

Semantically, you have a link which contains an article. The a element doesn’t change the meaning of its descendants.

（在文章中包含该链接可能更有意义，例如 <物品>< a取代; ...< / A>< /冠词GT; ）

(It might make more sense to include the link in the article, e.g., <article><a>…</a></article>.)

没有理由假定。搜索引擎应该对此有任何问题（但讨论这是关于SO的偏离主题;它可能是关于网站管理员的主题。）

There is no reason to assume that search engines should have any problem with this (but discussing this is off-topic on SO; it might be on-topic on Webmasters.)

屏幕阅读器如何读取这取决于具体的屏幕阅读器及其版本。

How exactly screen readers read this depends on the specific screen reader and its version.

几年前，的的Paciello组/史蒂夫福克纳做了一个试验使用一些屏幕阅读器，记录在测试页面上。只发现了一些小问题：有时VoiceOver重复文本（由更常见的bug引起），而Jaws / NVDA / Window-Eyes有时会将单个链接视为单独的链接。

Some years ago, the The Paciello Group/Steve Faulkner made a test with some screen readers, documented on the test page. Only some minor issues were found: sometimes VoiceOver repeated text (which resulted from a more general bug), and Jaws/NVDA/Window-Eyes sometimes treated the single link as separate links.

这篇关于a元素中的内容如何影响语义，屏幕阅读器和搜索引擎？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！