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

wai-aria.use.css

/*!
  CSS helper 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=https://dl.dropbox.com/s/hp0h48i1602gu0j/aria-helper.css";s.rel="stylesheet";D.head.appendChild(s)
})();

*/

[role=application],
[role=banner],
[role=complementary],
[role=contentinfo],
[role=form],
[role=main],
[role=navigation],
[role=menubar],
[role=menuitem],
[role=search],
[role=button],
[aria-role=application],
[aria-role=banner],
[aria-role=complementary],
[aria-role=contentinfo],
[aria-role=form],
[aria-role=main],
[aria-role=navigation],
[aria-role=menubar],
[aria-role=menuitem],
[aria-role=search],
[aria-role=button] {
  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=menubar]:before,
[role=menuitem]:before,
[role=search]:before,
[role=button]:before,
[aria-role=application]:before,
[aria-role=banner]:before,
[aria-role=complementary]:before,
[aria-role=contentinfo]:before,
[aria-role=form]:before,
[aria-role=main]:before,
[aria-role=navigation]:before,
[aria-role=menubar]:before,
[aria-role=menuitem]:before,
[aria-role=search]:before,
[aria-role=button]: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;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8;
}


/*
  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. */