We're running into the adjacent links issue in our custom-themed Drupal teasers where a teaser image (linked) floats left, next to the node title (also linked), a short description text (trimmed body text) and a "Continue reading" (i.e., more link).
The DOM looks roughly like this:
<div class="node__image"><a href="/node/1"><img alt="[node:title]" href="/path/to/image.jpg"></a></div>
<h2 class="node__title"><a href="/node/1">[node:title]</a></h2>
<div class="node__read-more"><a href="/node/1">Continue reading <span class="element-invisible">[node:title]</span></a></div>
<a> tags inside node__image and node__title are the two offending adjacent links.
The suggestion from W3C is to join the two items together into one link:
This seems a little messy, and complicated to do with Drupal. Also the outline-on-focus around a link tag that wraps around the floated img and h2 tags is going to look kind of strange. The other alternative that I kind of like more, would be to just wrap the entire teaser in a link tag but what prevents that is the "continue reading" link, where we'd end up with a link inside a link.
Does anyone have any suggestions on how I could resolve this?