name : diagnostic-head.css /* 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; font-size: 16px; } applet:after, basefont:after, center:after, dir:after, font:after, isindex:after, menu:after, s:after, strike:after, u:after, *[background]:after, *[bgcolor]:after, *[clear]:after, *[color]:after, *[compact]:after, *[noshade]:after, *[nowrap]:after, *[size]:after, *[start]:after, *[bottommargin]:after, *[leftmargin]:after, *[rightmargin]:after, *[topmargin]:after, *[marginheight]:after, *[marginwidth]:after, *[alink]:after, *[link]:after, *[text]:after, *[vlink]:after, *[align]:after, *[valign]:after, *[hspace]:after, *[vspace]:after, *[height]:after, *[width]:after, ul[type]:after, ol[type]:after, li[type]:after, iframe:not([title]):after, img[ismap]:after, img:not([alt]):after, div[role="img"]:not([aria-label]):after, img:not([src]):after,img[src=""]:after, img[src="#"]:after, a[href=""]:after, a[href="#"]:after, a:not([href]):after, a[href*=javascript\:]:after, a[onclick]:after, fieldset > :not(legend):first-child:after, fieldset > legend:not(:first-child):after, input[type="image"][alt=""]:after, input[type="image"]:not([alt]):after, [dir]:not([dir="rtl"]):not([dir="ltr"]):after, meta[http-equiv=refresh]:after, html:not([lang]):after, *[accesskey]:after, th:empty:after, table > tr:only-child:after, table > tbody > tr:only-child:after, table[align]:after, table[bgcolor]:after, table[border]:after, table[cellpadding]:after,table[cellspacing]:after,table[width]:after, td[width]:after, td[valign]:after, title:empty:after, ol > *:not(li):after, ul > *:not(li):after, dl > *:not(dt):not(dd):after, dt + *:not(dd):after, th > table:after, td > table:after, body > table:first-child:after, p b:only-child:after, p strong:only-child:after, ol[type]:after, ul[type]:after, area:not([alt]):after, table table:after { display: inline-block !important; background: #dc143c !important; padding: 0.25em !important; font-family: 'comic sans ms', cursive !important; color: #fff !important; font-size: 14px !important; text-shadow: none !important; font-weight: normal !important; font-style: normal !important; } /* Deprecated Elements - cannot be overridden by user styles */ applet:after, basefont:after, center:after, dir:after, font:after, isindex:after, menu:after, s:after, strike:after, u:after { content: 'ERROR: Deprecated elements found. They cannot be overridden by user styles' !important; } /* Deprecated Attributes - should not be used anymore */ *[background]:after, *[bgcolor]:after, *[clear]:after, *[color]:after, *[compact]:after, *[noshade]:after, *[nowrap]:after, *[size]:after, *[start]:after, *[bottommargin]:after, *[leftmargin]:after, *[rightmargin]:after, *[topmargin]:after, *[marginheight]:after, *[marginwidth]:after, *[alink]:after, *[link]:after, *[text]:after, *[vlink]:after, *[align]:after, *[valign]:after, *[hspace]:after, *[vspace]:after, *[height]:after, *[width]:after, ul[type]:after, ol[type]:after, li[type]:after { content: 'ERROR: Deprecated attributes found. They should not be used anymore' !important; } /* Inline frames without title attribute */ iframe:not([title]):after{ content: 'ERROR: iframe has no title. ' !important; } /** * Image-related checks */ /* server-side image map. Yes these are sometimes still seen, if rarely */ img[ismap]:after{ content: 'ERROR: Replace server-side image map' !important; } /* Images without alt attribute */ img:not([alt]):after { content: 'ERROR: All images must have alt attributes' !important; } area:not([alt]):after{ content: 'ERROR: Provide alt attribute for all areas of an image map' !important; } /* something that has a role of image but no alternative */ *[role="img"]:not([aria-label]):after{ content: 'ERROR: Item has image role without an alternative' !important; } /* images without a source */ img:not([src]):after, img[src=""]:after, img[src="#"]:after{ content: 'ERROR: image has no source' !important; } /** * Link-related checks */ /* Bad links, possibly relying on javascript to do something */ a[href=""]:after, a[href="#"]:after, a:not([href]):after, a[href*=javascript\:]:after, a:not([href])[onclick]:after{ content: 'ERROR: links must have a valid hypertext reference' !important; } /** * form-related checks */ /* Legends */ fieldset > :not(legend):first-child:after, /* no other element than a legend can be first child of a fieldset element */ fieldset > legend:not(:first-child):after { /* and a legend can't be anything else than first child of a fieldset element */ content: 'ERROR: fieldsets must have legends' !important; } /* Input[type="image"] and their alt attribute Note: adding :before or :after on this type of element won't work as expected. Maybe background-image encoded in base64? @reference Technique for WCAG 2.0 H36: Using alt attributes on images used as submit buttons - http://www.w3.org/TR/WCAG-TECHS/H36.html @reference Technique for WCAG 2.0 F65: Failure (...) due to omitting the alt attribute on (...) input elements of type "image" - http://www.w3.org/TR/WCAG-TECHS/F65.html */ input[type="image"][alt=""]:after, input[type="image"]:not([alt]):after { content: 'ERROR: Image input requires alt attribute' !important; } /* dir attribute */ /* If used, dir attribute only accepts 2 possible values */ [dir]:not([dir="rtl"]):not([dir="ltr"]):after { content: 'ERROR: dir attribute has invalid value' !important; } /* empty? */ title:empty:after { content: 'ERROR: title element is empty' !important; } /* Implicit headings */ p b:only-child:after, p strong:only-child:after{ content: 'ERROR: Should this bold text be a heading?' !important; } /* bullet type should be declared in CSS */ ol[type]:after, ul[type]:after{ content: 'ERROR: Bullet type should be declared in CSS' !important; } /* 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]:after { content: 'ERROR: Replace meta refresh' !important; } /* 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:not([lang]):after{ content: 'ERROR: HTML element requires lang attribute' !important; } /* Accesskey is a bad idea. * @reference Old discussion but still hits on salient points http://www.cs.tut.fi/~jkorpela/forms/accesskey.html */ *[accesskey]:after{ content: 'ERROR: Accesskey is a bad idea' !important; } /** * TABLE RELATED CHECKS */ /* Empty Header Cells */ th:empty:after { content: 'ERROR: replace empty TH element with TD' !important; } /* test for nested table */ th > table:after, td > table:after, body > table:first-child:after, table table:after{ content: 'ERROR: nested table found. Is this a layout table?' !important; } /* only one TR in the table. Is that a layout table? */ table > tr:only-child:after, table > tbody > tr:only-child:after { content: 'ERROR: only one TR in this table. Is this a layout table?' !important; } /* Deprecated attributes on table */ table[align]:after, table[bgcolor]:after, table[border]:after, table[cellpadding]:after, table[cellspacing]:after, table[width]:after, td[width]:after, td[valign]:after { content: 'ERROR: Deprecated markup in table' !important; } /** * List-related issues */ ol > *:not(li):after, ul > *:not(li):after { content: 'ERROR: List markup invalid' !important; } dl > *:not(dt):not(dd):after { content: 'ERROR: Definition list markup invalid' !important; } dt + *:not(dd):after { content: 'ERROR: Definition must follow term' !important; }