Search code examples
htmlseosemanticsscreen-readers

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?

Solution

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