Detect Google Search Ranking Issues

detect-touch-issues.js

// This script highlights touchable elements on the page that are either too small or too close together according to Google.
// https://support.google.com/webmasters/answer/9063469#touch_elements_too_close

const MinimumSize = 48;
const MinimumMargin = 8;

let clickableNodesList = document.querySelectorAll('a,button');
for (let ia = 0; ia < clickableNodesList.length; ia++){
    let aElement = clickableNodesList[ia];
    let aBound = aElement.getBoundingClientRect();

    if (aBound.width < 0) continue;

    // Find clickable elements that are too small
    if (aBound.height < MinimumSize) {
        let newPadding = MinimumSize - aBound.height;
        // console.warn(`Clickable element must be at least 48x48 px. This one is ${aElement.clientWidth}x${aElement.clientHeight}`, aElement);
        aElement.style.backgroundColor = '#FDFF47';
        aElement.setAttribute('title', aElement.getAttribute('title') ?? '' + ` Increase vertical padding by ${newPadding}px.`);
    }
    if (aBound.width < MinimumSize) {
        let newPadding = MinimumSize - aBound.width;
        aElement.style.backgroundColor = '#FDFF47';
        aElement.setAttribute('title', aElement.getAttribute('title') ?? '' + ` Increase horizontal padding by ${newPadding}px.`);
    }
    
    // Find clickable elements that are too close together
    for (let ib = ia + 1; ib < clickableNodesList.length; ib++){
        let bElement = clickableNodesList[ib];
        let bBound = bElement.getBoundingClientRect();
    
        if (bBound.width < 0) continue;

        if (   !(aBound.left > bBound.right + MinimumMargin           // __ --
                 || aBound.right + MinimumMargin < bBound.left)       // -- __
            && !(aBound.top > bBound.bottom + MinimumMargin           // __--
                 || aBound.bottom + MinimumMargin < bBound.top))      // --__
        {
            // console.warn(`Clickable element must be at least 8px from another clickable element. These two elements are too close to each other.`, aElement, bElement);
            aElement.style.outline = '#f00 solid 4px';
            aElement.setAttribute('title', aElement.getAttribute('title') ?? '' + ` Increase margin to 4px.`);
            bElement.style.outline = '#f00 solid 4px';
            bElement.setAttribute('title', bElement.getAttribute('title') ?? '' + ` Increase margin to 4px.`);
        }
    }
}