Accessible Drupal Teasers

jwilson3's picture

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:

<article class="node__teaser">
  <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__description">[node:body:trimmed]</div>
  <div class="node__read-more"><a href="/node/1">Continue reading <span class="element-invisible">[node:title]</span></a></div>
</article>

The <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:

https://www.w3.org/TR/WCAG20-TECHS/H2.html

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?

Comments

One other inclination I had

jwilson3's picture

One other inclination I had would be to

a) wrap the entire teaser in a link tag, removing the link from the img and the node title.
b) also remove the link around the "Continue Reading" but theme it so it still looks like a link. This might be a tricky solution for sighted users too so I'm not entirely sure it is a good one.

Thoughts?

Mockups

jwilson3's picture

I realize this is a hard problem to visualize so here are some pens. The best way to look at this is to render the pen and then focus your browser into the rendered iframe and use the tab key to highlight the link tag.

  1. Version 1

    https://codepen.io/jameswilson/pen/JNjErj

    Assuming that the ideal DOM structure would be:

    <a>
        <h2>Title</h2>
        <img/>
    </a>
    <p>Description</p>
    <a>Continue Reading</a>

    Version 1 attempts to use flexbox to change the order. However this breaks for the description text, which gets sent below because flexbox ends up creating an unavoidable clearfix, even if you add a float to the img tag.

  2. Version 2

    https://codepen.io/jameswilson/pen/aWbpaz

    <a>
        <img/>
        <h2>Title</h2>
    </a>
    <p>Description</p>
    <a>Continue Reading</a>

    Version 2 attempts to join the h2 and the img tag inside a link tag. What I don't like about this is how the tab-to-focus looks for sighted users.

  3. Version 3

    https://codepen.io/jameswilson/pen/KmKaxr

    <a>
        <img/>
        <h2>Title</h2>
        <p>Description</p>
        <div>Continue Reading</div>
    </a>

    Version 3 removes the "Continue Reading" link and wraps the entire teaser in a link tag. Imagine tabbing through a list of teasers with your keyboard. This is the most elegant solution visually that at the same time technically satisfies the adjacent link problem.

    The downsides are 1) that the description text must not contain any links, 2) the separate "continue reading" more link must be removed or added as plain text but styled to look like a link, and 3) there will be additional styles to reset the paragraph tag inside the link tag so it is not rendered visually to look like a link.

If it were me, I'd go for

lambch's picture

If it were me, I'd go for version 3.

Although, another possible downside is how the link text would now be very long. A screenreader user who opts to listen to the link text would hear the image alt, the title, the description, and a 'Continue Reading'.

With the above noted, you could leave the image alt text null (It's just a repeat of the H2 afterall). Keep the description short (eg. trim to ~140 characters). And also remove the 'Continue reading'.
You really want to cut down on the link verboseness.

If you can not ensure keeping descriptions short (and free of nested links). You may have to go a complete different option:
Link the H2 only.
With only the heading linked, you then may or may-not wish to also include a Continue Reading link after the description.
Not including a Continue Reading link is fine as far as WCAG is concerned, but users are quite accustomed to them.

Just if you do use a Continue Reading, ensure they are added in a way that satisfies WCAC2 2.4.4. In particular the ARIA8, or H78 and H80 techniques.
I aim to have these sorts of links as a child of the description paragraph.

Another option

cehfisher's picture

Have you looked at doing something more like this:

<a href="#" aria-hidden="true" role="presentation" tabindex="-1">
  <img alt="something descriptively awesome"
       role="presentation" src="http://placehold.it/150x150" /></a>
<h2>Bacon ipsum dolor amet pastrami jowl short loin shoulder</h2>
</a>
<p>Beef biltong burgdoggen pork loin. Picanha tenderloin tongue ham pork, jowl pork chop ball tip leberkas spare ribs shank frankfurter meatball hamburger filet mignon. Chicken short loin drumstick jerky. Venison tail alcatra pancetta picanha ground round porchetta kevin ribeye strip steak pastrami hamburger.</p>
<a href="#">Continue Reading</a>

Adapted from http://john.foliot.ca/aria-hidden/

Accessibility

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week