How does content in an a-element affects semantics, screen readers and search engines?

问题

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>

My questions are:

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

回答1:

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

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

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.

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.

来源：https://stackoverflow.com/questions/25360826/how-does-content-in-an-a-element-affects-semantics-screen-readers-and-search-en