0

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?
lampshade
  • 2,470
  • 3
  • 36
  • 74

1 Answers1

0

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.

Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360
  • Thanks for your effort. I like the idea of ``. Let me ask you: Is this a good way to make a whole element to link to another page or would it be better to add an `a`-element in the container (with really just the link and some text like "read more" and use JavaScript to make the whole `article` clickable? – lampshade Aug 19 '14 at 11:04
  • If you are sure that the whole snippet should be clickable, I’d say it’s a good way (using plain HTML instead of JS). However, I’m not so sure if it’s a good idea to have the whole snippet clickable in the first place: it makes it harder to select/copy specific text in this snippet, and the link text gets pretty long (which might be a problem for screen reader users that use a function to list all links on the page). But it probably depends on the specific case. Discussing the impact on users might be on-topic on [ux.se]. – unor Aug 19 '14 at 11:09
  • Thank you very much. I'll take that last topic to the UX site. Thanks. – lampshade Aug 19 '14 at 11:22