Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WCAG Text Spacing Plugin

does anyone knows a plugin for chrome, ff to check WCAG 1.4.12 /Text Spacing (https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=1412#text-spacing)

Thanks for you recommendations!

like image 438
Mila1611 Avatar asked May 25 '26 20:05

Mila1611


2 Answers

Since this question was never closed but shows up high on Google. This can be done as a bookmarklet. For example with this code:

javascript:(function(){var d=document,id='phltsbkmklt',el=d.getElementById(id),f=d.querySelectorAll('iframe'),i=0,l=f.length;if(el){function removeFromShadows(root){for(var el of root.querySelectorAll('*')){if(el.shadowRoot){el.shadowRoot.getElementById(id).remove();removeFromShadows(el.shadowRoot);}}}el.remove();if(l){for(i=0;i<l;i++){try{f[i].contentWindow.document.getElementById(id).remove();removeFromShadows(f[i].contentWindow.document);}catch(e){console.log(e)}}}removeFromShadows(d);}else{s=d.createElement('style');s.id=id;s.appendChild(d.createTextNode('*{line-height:1.5 !important;letter-spacing:0.12em !important;word-spacing:0.16em !important;}p{margin-bottom:2em !important;}'));function applyToShadows(root){for(var el of root.querySelectorAll('*')){if(el.shadowRoot){el.shadowRoot.appendChild(s.cloneNode(true));applyToShadows(el.shadowRoot);}}}d.getElementsByTagName('head')[0].appendChild(s);for(i=0;i<l;i++){try{f[i].contentWindow.document.getElementsByTagName('head')[0].appendChild(s.cloneNode(true));applyToShadows(f[i].contentWindow.document);}catch(e){console.log(e)}}applyToShadows(d);}})();
like image 60
Lalaluka Avatar answered May 28 '26 13:05

Lalaluka


A plugin or extension is probably overkill. Search the web for "text spacing bookmarklet"

like image 27
brennanyoung Avatar answered May 28 '26 12:05

brennanyoung