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:

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

Share