/* Head attributes */
body:before { content: "Currently viewing with diagnostic CSS enabled."; display: block; position: relative; width: 100%; text-align: center; border-bottom: 4px solid; border-top: 4px solid; background: #fcfcfc; color: #933; padding: 5px 0; }
/*
	dir attribute
*/
/* If used, dir attribute only accepts 2 possible values */
[dir]:not([dir="rtl"]):not([dir="ltr"]) {
	background-color: hotpink !important;
}
[dir="rtl"]:before,
[dir="ltr"]:before {
	content: "dir: " attr(dir);
	display: block;
	color: darkgreen !important;
	background-color: lightyellow !important;
}

/*
	title element: not empty, unique and in head
*/
head, title {
	display: block;
}
title:before {
	content: 'TITLE';
	margin: 0 0.4em;
	padding: 0 0.4em;
	color: black;
	background-color: #D0D0D0;
	border-radius: 3px;
}
head > title {
	margin: 0;
	padding: 0.2em 0;
	border-bottom: 1px solid #CCC;
	color: #444;
	background-color: white;
}
/* empty? */
title:empty:after {
	content: "ERROR: title element is empty and it shouldn't be";
	color: #C22;
	background-color: white;
}
title:empty:before,
title ~ title:before { /* not unique? */
	color: white;
	background-color: #C22;
}
title ~ title:after {
	content: ' (ERROR: why is there more than one title element?)';
}
title ~ title {
	color: #C22;
	background-color: white;
}


/*
	Meta refresh?
	@source CSS selector from Opquast Checklist Accessibility First step https://checklists.opquast.com/en/accessibilityfirststep/
	@reference Technique for WCAG 2.0 F40: Failure (...) due to using meta redirect with a time limit - http://www.w3.org/TR/WCAG-TECHS/F40.html
*/
meta[http-equiv=refresh]:before {
	content: 'meta refresh detected';
}
meta[http-equiv=refresh] {
	display: block;
	padding: 0.4em;
	font-weight: bold;
	color: white;
	background-color: darkred;
}


/*
	Lang attribute on html element
	@reference Technique for WCAG 2.0 H57: Using language attributes on the html element  - http://www.w3.org/TR/WCAG-TECHS/F40.html
*/
html[lang] {
	display: block;
	margin-top: 0.4em;
}
html:not([lang]):before {
	content: 'no lang attribute detected';
	margin: 0.4em;
	padding: 0 0.4em;
	color: white;
	background-color: darkred;
	border-radius: 3px;
}

html[lang]:before {
	content: 'Default page language: ' attr(lang);
	margin: 0.4em;
	color: #444;
	background-color: white;
}