Redundant links

[cehfisher]

The card teasers on this site include three links to the same URL. This is considered an alert by WCAG (2.4.4 Link Purpose - Level A).

Example

The image, title, and recipe link all go to the /web/recipes/glorious-salad node

Why It Matters

When adjacent links go to the same location (such as a linked product image and an adjacent linked product name that go to the same product page) this results in additional navigation and repetition for keyboard and screen reader users.

How to Fix It

If possible, combine the redundant links into one link and remove any redundant text or alternative text (for example, if a product image and product name are in the same link, the image can usually be given alt="").

See http://a11y-style-guide.com/style-guide/section-general.html#kssref-general-read-more for some "read more" examples to avoid one redundancy issue. Might consider making the entire card teaser a link or removing the link off of the image.

[DuaelFr]

As a free gift here is how I fix it on my projects:

1- only one link, the more meaningful, on any embedded entity
2- a preprocess that adds a js-clickable-node CSS class and loads a my_theme/clickable-node library
3- a my_theme/clickable-node library that contains a simple CSS to add pointer: cursor and the following JS file (please, be kind judging it)

(function ($, Drupal) {
  'use strict';

  /**
   * Handle click on a node so it redirects to the location of its first link.
   */
  Drupal.behaviors.clickableNode = {
    attach: function (context, settings) {
      $('.js-clickable-node').once('clickableNode')
        .on('mouseup.clickableNode', function (evt) {
          var $target = $(evt.currentTarget);
          // Ensure we didn't click on a link or a button.
          if ($target.is('a, button') || $target.parents('a, button').length) {
            return;
          }

          // Avoid other handlers or default behavior to be triggered, then
          // redirect the user.
          evt.stopImmediatePropagation();
          evt.preventDefault();
          var $link = $target.find('a').filter(function () {
            return $(this).parents('.contextual').length === 0;
          });
          if (evt.shiftKey || evt.ctrlKey || evt.button === 1) {
            window.open($link.attr('href'), '_blank');
          }
          else {
            location.href = $link.attr('href');
          }
        })

        // Add a visual effect when focusing links inside the content.
        .find('a')
          .on('focus', function (evt) {
            $(evt.target).parents('.js-clickable-node').addClass('is-active');
          })
          .on('blur', function (evt) {
            $(evt.target).parents('.js-clickable-node').removeClass('is-active');
          });
    }
  };

})(jQuery, Drupal);

[DuaelFr]

I forgot to mention that, even if there is not a full browser support, using the CSS focus-within pseudo class is a good way to have a great UX even for keyboard users :)

[fuzzbomb]

3 links in a row is repetitive for keyboard traversal, and it would be good to reduce this.

Surely it's not a failure of WCAG 2.4.4 though? I can't see anything in the understanding docs for 2.4.4 which relate to this.

[DuaelFr]

It's not directly failing criterions but it can be understood from H2: Combining adjacent image and text links for the same resource where we can read:

For a keyboard user, it is tedious to navigate through redundant links. For users of assistive technologies, it can be confusing to encounter successive identical links.

---

I suppose we could also interpret G197: Using labels, names, and text alternatives consistently for content that has the same functionality which says:

If there are different labels on user interface components (i.e., elements, links, JavaScript objects, etc.) that have the same function, the user will not know that they have encountered a component with the same function and will not know what to expect.

But I'm not sure it applies on common links.

[fuzzbomb]

Yes, H2 is relevant, and worth trying.
It's just classed as an "additional, advisory" technique for 2.4.4 Link Purpose In Context, but relates to SC 1.1.1 Non-text content too.

[fuzzbomb]

Does this have an equivalent issue on drupal.org yet?