structure-outliner.css

*:before {font-family:sans-serif;font-size:14px;font-weight: bold;}
html:before {color:white;background:darkred;content:"No lang attribute";padding:3px;display: inline-block;position: relative;top: 10px;left:10px;}
html[lang]:before {color:white;background:green; content:"Lang = " attr(lang);}
html[lang=""]:before {content:"Empty lang attribute";}
html {outline:10px solid red;outline-offset:-10px}
html[lang] {outline:10px solid green;}
html[lang] *[lang] {outline:2px solid darkred;}
html [lang]:before {background:darkred;color:white;padding:3px;content:"Change of lang - no default lang set";}
html[lang] *[lang]:before {content:"Change of lang - " attr(lang);}
html[lang="en"] *[lang="en"] {outline:none;}
html[lang="en"] *[lang="en"]:before {display:none;}

/* LANDMARKS ============================================ */
article, aside, footer, form, header, main, nav, section {outline:2px dashed red;outline-offset:-2px;}
article:before, aside:before, footer:before, form:before, header:before, main:before, nav:before, section:before {content:"‼ Landmark with no label";color:white;background:darkred;padding:3px;display:inline-block;font-weight:bold;}
article:before {content:"LM: `article` element with no accname";}
aside:before {content:"LM: `aside` element with no accname";}
footer:before {content:"LM: `footer` element with no accname";}
form:before {content:"LM: `form` element with no accname";}
header:before {content:"LM: `header` element with no accname";}
main:before {content:"LM: `main` element with no accname";}
nav:before {content:"LM: `nav` element with no accname";}
section:before {content:"LM: `section` element with no accname";}
article[aria-label]:before,article[aria-labelledby]:before,aside[aria-label]:before,aside[aria-labelledby]:before,footer[aria-label]:before,footer[aria-labelledby]:before,form[aria-label]:before,form[aria-labelledby]:before,header[aria-label]:before,header[aria-labelledby]:before,main[aria-label]:before,main[aria-labelledby]:before,nav[aria-label]:before,nav[aria-labelledby]:before,section[aria-label]:before,section[aria-labelledby]:before {outline:2px dotted pink;outline-offset:0;background:pink;color:black;padding:5px;font-size: 16px;}

article[aria-label]:before {content:"LM: article. aria-label='" attr(aria-label) "'";}
aside[aria-label]:before {content:"LM: aside. aria-label='" attr(aria-label) "'";}
footer[aria-label]:before {content:"LM: footer. aria-label='" attr(aria-label) "'";}
form[aria-label]:before {content:"LM: form. aria-label='" attr(aria-label) "'";}
header[aria-label]:before {content:"LM: header. aria-label='" attr(aria-label) "'";}
main[aria-label]:before {content:"LM: main. aria-label='" attr(aria-label) "'";}
nav[aria-label]:before {content:"LM: nav. aria-label='" attr(aria-label) "'";}
section[aria-label]:before {content:"LM: section. aria-label='" attr(aria-label) "'";}

article[aria-labelledby]:before {content:"LM: article. aria-labelledby='" attr(aria-labelledby) "'";}
aside[aria-labelledby]:before {content:"LM: aside. aria-labelledby='" attr(aria-labelledby) "'";}
footer[aria-labelledby]:before {content:"LM: footer. aria-labelledby='" attr(aria-labelledby) "'";}
form[aria-labelledby]:before {content:"LM: form. aria-labelledby='" attr(aria-labelledby) "'";}
header[aria-labelledby]:before {content:"LM: header. aria-labelledby='" attr(aria-labelledby) "'";}
main[aria-labelledby]:before {content:"LM: main. aria-labelledby='" attr(aria-labelledby) "'";}
nav[aria-labelledby]:before {content:"LM: nav. aria-labelledby='" attr(aria-labelledby) "'";}
section[aria-labelledby]:before {content:"LM: section. aria-labelledby='" attr(aria-labelledby) "'";}

/* HEADINGS ============================================ */
h1,h2,h3,h4,h5,h6,*[role=heading][aria-level] {outline:1px dotted green;}
h1:before,
h2:before,
h3:before,
h4:before,
h5:before,
h6:before,
*[role=heading][aria-level]:before {background:green;color:white;padding:5px;font-size: 16px;}
h1:before {content:"h1";}
h2:before {content:"h2";}
h3:before {content:"h3";}
h4:before {content:"h4";}
h5:before {content:"h5";}
h6:before {content:"h6";}
*[role=heading][aria-level]:before {content:"ARIA HEADING " attr(aria-level);}

/* LISTS ============================================ */
ul,ol {outline:1px dotted orange;/*position: relative;*/}
ul li, ol li {outline:1px dashed orange;/*position: relative;*/}
ul:before,ol:before,li:before {/*position: absolute;top: 0;left: 0;*/background:orange;color:black;padding:5px;font-size: 16px;z-index:1000}
/*li:first-child:before {left: 30px;}*/
ul:before {content:"ul";}
ol:before {content:"ol";}
li:before {content:"li";}

ul[role="none"]:before, ul[role="presentation"]:before {content:"ul (‼️ @role NONE)";}
ol[role="none"]:before, ol[role="presentation"]:before {content:"ol (‼️ @role NONE)";}
li[role="none"]:before, li[role="presentation"]:before {content:"li (‼️ @role NONE)";}

ul[role=tree] {outline:1px dotted orange;}
ul[role=tree]:before {background:orange;color:white;padding:5px;font-size: 16px;}
li[role=treeitem] {outline:1px dotted orange;}
li[role=treeitem]:before {background:orange;color:white;padding:5px;font-size: 16px;}
ul[role=tree]:before {content:"ul - role=tree";}
li[role=treeitem]:before {content:"li - role=treeitem";}

dl{outline:1px dotted orange;/*position: relative;*/}
dl dt, dl dd {outline:1px dashed orange;/*position: relative;*/}
dl:before,dt:before,dd:before {/*position: absolute;top: 0;left: 0;*/background:orange;color:black;padding:5px;font-size: 16px;z-index:1000}
dl:before {content:"dl";}
dt:before {content:"dt";}
dd:before {content:"dd";}

/* TABLES ============================================ */
table, table th, table td {outline:1px dotted brown;}
table:before,th:before {background:brown;color:white;padding:5px;font-size: 16px;display: block;}
table:before {content:"table";}
table[summary]:before {content:"table | 🚨 @summary=" attr(summary);}
th:before {content:"th";}
th[scope]:before {content:"th | @scope";}
th[scope="col"]:before {content:"th | @scope=col";}
th[scope="row"]:before {content:"th | @scope=row";}
table caption {outline:1px dashed brown;}
table caption:before {background:brown;color:white;padding:5px;font-size: 16px;}
table caption:before {content:"caption";}

/* GRIDS ============================================ */
*[role=grid],*[role=grid][role=gridcell] {outline:1px dotted darkcyan;}
*[role=grid]:before {background:darkcyan;color:white;padding:5px;font-size: 16px;}
*[role=grid]:before {content:"[role=grid]";}

/* TABS ============================================ */
*[role=tablist],*[role=tab],*[role=tabpanel] {outline:1px dotted purple;}
*[role=tablist]:before,*[role=tab]:before,*[role=tabpanel]:before {background:purple;color:white;padding:5px;font-size: 16px;}
*[role=tablist]:before,
*[role=tab]:before,
*[role=tabpanel]:before {content:attr(role);}
*[role=tab][aria-selected="true"]:before {content:"TAB";outline:2px solid purple;outline-offset:2px}

/* TREES ============================================ */
*[role=tree] {outline:1px dotted ridgeback;}
*[role=tree]:before {background:ridgeback;color:black;padding:5px;font-size: 16px;}
*[role=treeitem] {outline:1px dotted ridgeback;}
*[role=treeitem]:before {background:ridgeback;color:black;padding:5px;font-size: 16px;}

/* FORMS ============================================ */
fieldset {outline:1px dotted darkgreen;}
legend {outline:1px dotted darkgreen;}
fieldset:before {content:"fieldset";background:darkgreen;color:white;padding:5px;font-size: 16px;}
legend:before {content:"legend";background:darkgreen;color:white;padding:5px;font-size: 16px;}

/* STATES ============================================ */
*[aria-expanded] {border:1px solid olive;}
*[aria-expanded]:after {font-size: 16px;padding: 5px;background: olive;color:#fff;display: inline-block;margin-left: 5px;}
*[aria-expanded="true"]:after {content:"+";}
*[aria-expanded="false"]:after {content:"-";}

*[aria-pressed] {border:1px solid green;}
*[aria-pressed]:after {font-size: 16px;padding: 5px;background: green;color:#fff;display: inline-block;margin-left: 5px;}
*[aria-pressed="true"]:after {content:"P";}
*[aria-pressed="false"]:after {content:"NP";}

/* DIALOGS ============================================ */
*[role=dialog] {border:1px solid darkblue;}
*[role=dialog]:before {font-size: 16px;padding: 5px;background: darkblue;color:#fff;display: inline-block;margin-left: 5px;}
*[role=dialog]:before {content:"dialog";}
*[role=dialog][aria-label][tabindex]:before {content:"dialog | @aria-label | @tabindex";}
*[role=dialog][aria-label][tabindex='-1']:before {content:"dialog | @aria-label | @tabindex=-1";}
*[role=dialog][aria-modal=true]:before {content:"dialog | @aria-modal=true";}
*[role=dialog][aria-modal=true][aria-labelledby]:before {content:"dialog | @aria-modal=true | @aria-labelledby";}
*[role=dialog][aria-modal=true][aria-labelledby][tabindex]:before {content:"dialog | @aria-modal=true | @aria-labelledby | @tabindex";}
*[role=dialog][aria-modal=true][aria-labelledby][tabindex='-1']:before {content:"dialog | @aria-modal=true | @aria-labelledby | @tabindex=-1";}
*[role=dialog][aria-modal=true][aria-label]:before {content:"dialog | @aria-modal=true | @aria-label";}
*[role=dialog][aria-modal=true][aria-label][tabindex]:before {content:"dialog | @aria-modal=true | @aria-label | @tabindex";}
*[role=dialog][aria-modal=true][aria-label][tabindex='-1']:before {content:"dialog | @aria-modal=true | @aria-label | @tabindex=-1";}

/* PRETEND THINGS ============================================ */

/* HIDDEN THINGS ============================================ */

*[aria-hidden="true"] {outline:2px solid black;position:relative;opacity:0.2;}

table, ul, ol {outline-width:2px;outline-offset:2px;}

/* FORCE FOCUS ============================================ */

*:focus {outline:4px solid purple!important;box-shadow: 0px 0px 0px 4px white;}

/* FORCE POSITIONING ============================================ */
/* To be used in conjunction with TamperMonkey script that allows for better positioning of labels */

.pos-relative {position: relative;}
.pos-static {position: relative;}
.pos-absolute {position: absolute;}
.pos-fixed {position: fixed;}

ol.pos-relative:before {position: absolute;top:0;left:0;}
ol.pos-static:before {position: absolute;top:0;left:0;}
ol.pos-absolute:before {position: absolute;top:0;left:0;}
ol.pos-fixed:before {position: absolute;top:0;left:0;}

ul.pos-relative:before {position: absolute;top:0;left:0;}
ul.pos-static:before {position: absolute;top:0;left:0;}
ul.pos-absolute:before {position: absolute;top:0;left:0;}
ul.pos-fixed:before {position: absolute;top:0;left:0;}

li.pos-relative:before {position: absolute;top:0;right:0;}
li.pos-static:before {position: absolute;top:0;right:0;}
li.pos-absolute:before {position: absolute;top:0;right:0;}
li.pos-fixed:before {position: absolute;top:0;right:0;}

a:before,
button:before, 
[role="link"],
[role="button"]
{background:darkblue;color:white;font-wwight:bold;display:inline-block;padding:2px 4px;text-transform:uppercase;}
a:before,[role="link"]:before {content:"link"}
button:before, [role="button"]:before {content:"btn"}

/* IMAGES ============================================ */
img {outline:4px solid red}
img[alt] {outline:4px solid transparent}
img[alt=""] {outline:4px dotted orange}
img[alt="Decorative"],
img[alt="decorative"],
img[alt="Image"],
img[alt="image"],
img[alt="Picture"],
img[alt="picture"],
img[alt="Logo"],
img[alt="logo"],
{outline:4px solid red}