public
Last active

Diagnostic CSS rules for finding poorly formed, non-semantic, inaccessible markup on links and buttons, mostly. For more diagnostics, check out http://www.tomato-root.com/sandbox/holmes/ and https://github.com/diagnosticss/diagnosticss

  • Download Gist
gistfile1.scss
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
@mixin heydon_rules {
// Adapted from http://coding.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/
// I removed the Comic Sans font declaration because, well, I really can't stand it, even in this context
%uglystyle {
display: block !important;
background: pink !important;
padding: 0.5em !important;
color: #000 !important;
//font-family: 'comic sans ms', cursive !important;
//font-size: 16px !important;
}
// Rule 1: “If it’s a hyperlink, it should have an href attribute.”
a:not([href]):after {
@extend %uglystyle;
content: 'Do you mean for this to be a link or a button, because it does not link to anything!';
}
// Rule 2: “If it’s a hyperlink and has an href attribute, it should have a valid value.”
a[href=""]:after, a[href$="#"]:after, a[href^="javascript"]:after {
@extend %uglystyle;
content: 'Do you mean for this link to be a button, because it does not go anywhere!';
}
// Rule 3: “If it uses a button class, it should be a button — at least in the accessibility layer.”
.button:not(button):not([role="button"]):not([type="button"]):not([type="submit"]):not([type="reset"]):after,
.btn:not(button):not([role="button"]):not([type="button"]):not([type="submit"]):not([type="reset"]):after,
a[class*="button"]:not([role="button"]):after {
@extend %uglystyle;
content: 'If you are going to make it look like a button, make it a button, damn it!';
}
// Rule 4: “If it is an a element with role="button", then it should link to somewhere when JavaScript is off.”
a[role="button"]:not([href*="/"]):not([href*="."]):not([href*="?"]):after {
@extend %uglystyle;
content: 'Either use a link fallback, or just use a button element.';
}
// Rule 5: “You can’t disable a hyperlink.”
a.button[class*="disabled"]:after,
a.btn.disabled:after,
a[class*="button"][class*="disabled"]:after {
@extend %uglystyle;
content: 'You cannot disable a hyperlink. Use a button element with disabled="disabled".';
}
// Rule 6: “Buttons in forms should have explicit types.”
form button:not([type]):after {
@extend %uglystyle;
content: 'Is this a submit button, a reset button or what? Use type="submit", type="reset" or type="button"';
}
// Rule 7: “Both hyperlinks and buttons should have some sort of content or an ARIA label.”
// Buttons and links that don’t include any kind of direction for their usage are pretty bogus.
a:empty:not([aria-label]):not([aria-labelledby]):after,
button:empty:not([aria-label]):not([aria-labelledby]):after,
button:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt]):after,
a:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt]):after {
@extend %uglystyle;
content: 'All buttons and links should have text content, an image with alt text or an ARIA label';
}
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.