@charset "UTF-8";

/* make sure to include the type in a form button */

form button:not([type]):after {
  background: red;
  color: white;
  content: 'Warning: this button doesn’t have a type attribute. Is it a submit, reset or just button?';
}


/* Don't use the button class on elements other than a button */

.button:not(button):after {
  background: red;
  color: white;
  content: 'Warning: You are making an element look like a button here. Is it really a button?';
}


/* Use the real 'disabled' attribute, as opposed to custom classes */

button.disabled:not([disabled]):after,
a.disabled[href]:after {
  background: red;
  color: white;
  content: 'Warning: It looks like you are styling an element to be disabled here. Make sure it is disabled properly.';
}


/* Properly label your links and buttons */

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 {
  background: red;
  color: white;
  content: 'You are not providing enough information about what this button does. Please include some text within the button.';
}