DuaelFr
commented
6 years ago 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);
fuzzbomb
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-saladnodeWhy 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.