Accessibility Semantics CSS

A bookmarklet that adds annotations about semantics to your CSS.

• Drag this to your web browser's bookmarks bar: A11y Semantics
• Go to any website you like, then click the created bookmark.

Development

Use https://www.yourjs.com/bookmarklet/ to create a bookmarklet from the following code, then update the above A11y Semantics link with the result.

javascript: (function () {
  // Remove existing CSS, see https://dorward.uk/software/disablecss/#enhanced
  // for(i=0;i<document.styleSheets.length;i++) {
  // 	void(document.styleSheets.item(i).disabled=true);
  // }
  // el = document.getElementsByTagName('*');
  // for ( i=0; i<el.length; i++) {
  // 	void(el[i].style.cssText = '');
  // }

  // Inject semantics CSS, see https://gist.github.com/roura356a/65474d2fbf80d24911c9e817771ccaf8
  let cssLink = document.getElementById('injected-css');
  if (cssLink === null) {
    cssLink = document.createElement('link');
    cssLink.id = 'injected-css';
    cssLink.rel = 'stylesheet';
    document.getElementsByTagName('head')[0].appendChild(cssLink);
  }
  // Use githack.com to serve CSS with the correct Content-Type
  cssLink.href = 'https://raw.githack.com/NothingAG/a11y-semantics-css/master/a11y-semantics-visible.css?v=' + Date.now();
})();