CSS bookmarklet to highlight WAI-ARIA landmark roles etc. | Inspired by the Juicy Studio Accessibility toolbar - works in Chrome..

wai-aria.use.css

/*!
  CSS bookmarklet to highlight WAI-ARIA landmark roles etc.
  NDF, 3 December 2013.

  http://w3.org/TR/wai-aria/roles#landmark_roles
  Inspiration: https://addons.mozilla.org/en-US/firefox/addon/juicy-studio-accessibility-too/


javascript:(function(){
var D=document,s=D.createElement("link");s.href="//dl.dropbox.com/u/3203144/wai-aria/wai-aria.css";s.rel="stylesheet";D.head.appendChild(s)
})();

*/

[role=application], [role=banner], [role=complementary], [role=contentinfo],
[role=form], [role=main], [role=navigation], [role=search] {
  display: block;
  outline: 3px solid #360 !important;  /*Green */
}

[role=application]:before, [role=banner]:before, [role=complementary]:before, [role=contentinfo]:before,
[role=form]:before, [role=main]:before, [role=navigation]:before, [role=search]:before {
  content: "Role: " attr(role);
  display: block;
  border: 1px solid #630;  /*Reddish brown */
  background: #ffc;  /*Pale yellow */
  color: #222;
  font: normal .98em/1.1em sans-serif;
  padding: 2px;
  margin-bottom: 5px;
}


/*
  http://mateuszkocz.github.io/3l/#!.seo-helper()
*/
img:not([alt]), img[alt=""], img[alt^=" "], a[href=""], a[href^=" "], a[href="#"], a[rel*="nofollow"],
/*div:empty, span:empty, li:empty, p:empty, td:empty, th:empty*/, *[title=""], *[class=""], *[id=""] {
  outline: 2px solid red !important;
  outline-offset: 3px !important;
}


/*End. */