Created
September 14, 2022 14:46
-
-
Save PhilippeVay/30a2b7ea513264f6941f9c6c0ceae0c2 to your computer and use it in GitHub Desktop.
Accessibility audit - Title attribute in links must contain link content
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Dépendance : ce script doit être concaténé à | |
https://github.com/WhatSock/w3c-alternative-text-computation/tree/master/docs/Sample%20JavaScript%20Recursion%20Algorithm | |
qui calcule le nom accessible d'un élément. | |
Description: | |
Title attribute in links must contain link content | |
Display in *browser console* all links having a title and whether there's an error or if it's OK. | |
Date: September 2022 | |
Author: Ph. Vayssière, Alsacréations | |
Licence: http://creativecommons.org/licenses/by-sa/4.0/ CC-BY-SA 4.0 | |
*/ | |
links = document.querySelectorAll("a"); | |
results = []; | |
style = ["font-weight:700;color:darkgreen", "font-weight:700;color:darkred"] | |
rePunctuation = /[.:;,?!{}$()|'"-]/g | |
// Returns a text in lowercase without "punctuation" (and friends) | |
// "L'accueil est fermé. À " => "l accueil est fermé a" | |
function simplified(txt, locale) { | |
let s = txt.toLocaleLowerCase(locale) | |
s = s.replaceAll(rePunctuation, ' ') | |
s = s.replaceAll(/\s+/g, ' ').trim() // No extra space, trimmed | |
return s | |
} | |
// Loop over links and compare characteristics of each of them | |
links.forEach(function (elt, i) { | |
let linkTitle = elt.getAttribute("title") | |
const linkContent = getAccName(elt).name.trim() | |
const lang = elt.closest('[lang]').getAttribute('lang') // Get locale for each link (could be different from page) | |
if (linkTitle && linkContent) { | |
linkTitleSimplified = simplified(linkTitle, lang) | |
linkContentSimplified = simplified(linkContent, lang) | |
const status = linkTitleSimplified.includes(linkContentSimplified) | |
// Preparing display: prefix and styles | |
const txtStatus = status ? "ok " : "ERROR" | |
const styleStatus = status ? style[0] : style[1] | |
const result = [txtStatus, styleStatus, linkContent, linkTitle, linkContentSimplified, linkTitleSimplified] | |
results.push(result) | |
// Add a data-* attribute to links found in error | |
if (!status) { | |
elt.dataset.phvError = true | |
} | |
} | |
}); | |
console.info("%cLiens comportant du texte avec title : le title reprend l'intitulé", "background:#0173C7;color:white;padding:2px 3px") | |
for (link of results) { | |
console.log("%c"+link[0], link[1], '"' + link[2] + '" vs "' + link[3] + '"') | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment