checka11y-css/checka11y-errors.css

A CSS stylesheet to quickly highlight a11y concerns.

/*! Checka11y.css v2.4.0 | MIT License | github.com/jackdomleo7/Checka11y.css */
:root {
  --checka11y-text-error: #721c24;
  --checka11y-bg-error: #ffc6c6;
  --checka11y-border-error: #f00;
}

:root {
  --checka11y-space: 0.25rem;
  --checka11y-space-0: calc(var(--checka11y-space) * 0);
  --checka11y-space-2: calc(var(--checka11y-space) * 2);
  --checka11y-space-4: calc(var(--checka11y-space) * 4);
  --checka11y-space-6: calc(var(--checka11y-space) * 6);
}

button audio[controls] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="550px" height="80px" viewBox="0 0 550 80"><rect class="box" x="4" y="4" width="542" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0000): Ensure that &lt;audio controls&gt; is</text> <text x="15" y="60">not a child of &lt;button&gt;.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 550px;
  padding-bottom: 80px;
}

button button::after {
  display: block;
  font-size: 1rem;
  font-family: verdana, geneva, tahoma, sans-serif;
  font-weight: 700;
  font-style: initial;
  padding: var(--checka11y-space-4) var(--checka11y-space-6);
  border-radius: 0.75rem;
  letter-spacing: initial;
  text-decoration: none;
  text-transform: initial;
  text-shadow: none;
  content: "ERROR (E0000): Ensure that <button> is not a child of <button>." !important;
  color: var(--checka11y-text-error);
  border: 0.4rem solid var(--checka11y-border-error);
  background-color: var(--checka11y-bg-error);
}

button details::after {
  display: block;
  font-size: 1rem;
  font-family: verdana, geneva, tahoma, sans-serif;
  font-weight: 700;
  font-style: initial;
  padding: var(--checka11y-space-4) var(--checka11y-space-6);
  border-radius: 0.75rem;
  letter-spacing: initial;
  text-decoration: none;
  text-transform: initial;
  text-shadow: none;
  content: "ERROR (E0000): Ensure that <details> is not a child of <button>." !important;
  color: var(--checka11y-text-error);
  border: 0.4rem solid var(--checka11y-border-error);
  background-color: var(--checka11y-bg-error);
}

button embed {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="350px" height="80px" viewBox="0 0 350 80"><rect class="box" x="4" y="4" width="342" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0000): &lt;embed&gt; cannot</text> <text x="15" y="60">be a child of &lt;button&gt;.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 350px;
  padding-bottom: 80px;
}

button iframe {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="550px" height="80px" viewBox="0 0 550 80"><rect class="box" x="4" y="4" width="542" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0000): Ensure that &lt;iframe&gt; is</text> <text x="15" y="60">not a child of &lt;button&gt;.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 550px;
  padding-bottom: 80px;
}

button img[usemap] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="550px" height="80px" viewBox="0 0 550 80"><rect class="box" x="4" y="4" width="542" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0000): Ensure that &lt;img usemap&gt; is</text> <text x="15" y="60">not a child of &lt;button&gt;.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 550px;
  padding-bottom: 80px;
}

button input:not([type=hidden]) {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="550px" height="80px" viewBox="0 0 550 80"><rect class="box" x="4" y="4" width="542" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0000): Ensure that &lt;input type="hidden"&gt;</text> <text x="15" y="60">is not a child of &lt;button&gt;.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 550px;
  padding-bottom: 80px;
}

button label::after {
  display: block;
  font-size: 1rem;
  font-family: verdana, geneva, tahoma, sans-serif;
  font-weight: 700;
  font-style: initial;
  padding: var(--checka11y-space-4) var(--checka11y-space-6);
  border-radius: 0.75rem;
  letter-spacing: initial;
  text-decoration: none;
  text-transform: initial;
  text-shadow: none;
  content: "ERROR (E0000): Ensure that <label> is not a child of <button>." !important;
  color: var(--checka11y-text-error);
  border: 0.4rem solid var(--checka11y-border-error);
  background-color: var(--checka11y-bg-error);
}

button object[usemap] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="550px" height="80px" viewBox="0 0 550 80"><rect class="box" x="4" y="4" width="542" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0000): Ensure that &lt;object usemap&gt; is</text> <text x="15" y="60">not a child of &lt;button&gt;.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 550px;
  padding-bottom: 80px;
}

button select {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="550px" height="80px" viewBox="0 0 550 80"><rect class="box" x="4" y="4" width="542" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0000): Ensure that &lt;select&gt; is</text> <text x="15" y="60">not a child of &lt;button&gt;.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 550px;
  padding-bottom: 80px;
}

button textarea {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="550px" height="80px" viewBox="0 0 550 80"><rect class="box" x="4" y="4" width="542" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0000): Ensure that &lt;textarea&gt; is</text> <text x="15" y="60">not a child of &lt;button&gt;.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 550px;
  padding-bottom: 80px;
}

button video[controls] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="550px" height="80px" viewBox="0 0 550 80"><rect class="box" x="4" y="4" width="542" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0000): Ensure that &lt;video controls&gt; is</text> <text x="15" y="60">not a child of &lt;button&gt;.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 550px;
  padding-bottom: 80px;
}

button:not([aria-label], [aria-labelledby]):empty::after {
  display: block;
  font-size: 1rem;
  font-family: verdana, geneva, tahoma, sans-serif;
  font-weight: 700;
  font-style: initial;
  padding: var(--checka11y-space-4) var(--checka11y-space-6);
  border-radius: 0.75rem;
  letter-spacing: initial;
  text-decoration: none;
  text-transform: initial;
  text-shadow: none;
  content: "ERROR (E0001): Ensure that <button> has meaningful content or is labelled appropriately." !important;
  color: var(--checka11y-text-error);
  border: 0.4rem solid var(--checka11y-border-error);
  background-color: var(--checka11y-bg-error);
}

[dir]:not([dir=rtl], [dir=ltr], [dir=auto])::after {
  display: block;
  font-size: 1rem;
  font-family: verdana, geneva, tahoma, sans-serif;
  font-weight: 700;
  font-style: initial;
  padding: var(--checka11y-space-4) var(--checka11y-space-6);
  border-radius: 0.75rem;
  letter-spacing: initial;
  text-decoration: none;
  text-transform: initial;
  text-shadow: none;
  content: "ERROR (E0002): The dir attribute can only have the values, 'ltr', 'rtl' and 'auto'." !important;
  color: var(--checka11y-text-error);
  border: 0.4rem solid var(--checka11y-border-error);
  background-color: var(--checka11y-bg-error);
}

head {
  display: block;
}

head title:empty {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="458px" height="80px" viewBox="0 0 458 80"><rect class="box" x="4" y="4" width="450" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0017): the page title tag must not</text> <text x="15" y="60">be empty.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 458px;
  padding-bottom: 80px;
  display: block;
  border: 0;
}

head:not(:has(title)) {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="458px" height="80px" viewBox="0 0 458 80"><rect class="box" x="4" y="4" width="450" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0018): a title tag must be present</text> <text x="15" y="60">in the page head.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 458px;
  padding-bottom: 80px;
  display: block;
  border: 0;
}

h1:empty::after, h2:empty::after, h3:empty::after, h4:empty::after, h5:empty::after, h6:empty::after {
  display: block;
  font-size: 1rem;
  font-family: verdana, geneva, tahoma, sans-serif;
  font-weight: 700;
  font-style: initial;
  padding: var(--checka11y-space-4) var(--checka11y-space-6);
  border-radius: 0.75rem;
  letter-spacing: initial;
  text-decoration: none;
  text-transform: initial;
  text-shadow: none;
  content: "ERROR (E0003): Headings must not be empty." !important;
  color: var(--checka11y-text-error);
  border: 0.4rem solid var(--checka11y-border-error);
  background-color: var(--checka11y-bg-error);
}

h1[aria-hidden]::after, h2[aria-hidden]::after, h3[aria-hidden]::after, h4[aria-hidden]::after, h5[aria-hidden]::after, h6[aria-hidden]::after {
  display: block;
  font-size: 1rem;
  font-family: verdana, geneva, tahoma, sans-serif;
  font-weight: 700;
  font-style: initial;
  padding: var(--checka11y-space-4) var(--checka11y-space-6);
  border-radius: 0.75rem;
  letter-spacing: initial;
  text-decoration: none;
  text-transform: initial;
  text-shadow: none;
  content: "ERROR (E0004): Headings should be reachable by assistive technologies (no aria-hidden)." !important;
  color: var(--checka11y-text-error);
  border: 0.4rem solid var(--checka11y-border-error);
  background-color: var(--checka11y-bg-error);
}

h2 ~ h1:first-of-type::after, h2 ~ * h1:first-of-type::after, h3 ~ h2:first-of-type::after, h3 ~ * h2:first-of-type::after, h4 ~ h2:first-of-type::after, h4 ~ * h2:first-of-type::after, h5 ~ h2:first-of-type::after, h5 ~ * h2:first-of-type::after, h6 ~ h2:first-of-type::after, h6 ~ * h2:first-of-type::after, h4 ~ h3:first-of-type::after, h4 ~ * h3:first-of-type::after, h5 ~ h3:first-of-type::after, h5 ~ * h3:first-of-type::after, h6 ~ h3:first-of-type::after, h6 ~ * h3:first-of-type::after, h5 ~ h4:first-of-type::after, h5 ~ * h4:first-of-type::after, h6 ~ h4:first-of-type::after, h6 ~ * h4:first-of-type::after, h6 ~ h5:first-of-type::after, h6 ~ * h5:first-of-type::after {
  display: block;
  font-size: 1rem;
  font-family: verdana, geneva, tahoma, sans-serif;
  font-weight: 700;
  font-style: initial;
  padding: var(--checka11y-space-4) var(--checka11y-space-6);
  border-radius: 0.75rem;
  letter-spacing: initial;
  text-decoration: none;
  text-transform: initial;
  text-shadow: none;
  content: "ERROR (E0005): Headings should not skip levels." !important;
  color: var(--checka11y-text-error);
  border: 0.4rem solid var(--checka11y-border-error);
  background-color: var(--checka11y-bg-error);
}

html:not([lang]) body::before {
  display: block;
  font-size: 1rem;
  font-family: verdana, geneva, tahoma, sans-serif;
  font-weight: 700;
  font-style: initial;
  padding: var(--checka11y-space-4) var(--checka11y-space-6);
  border-radius: 0.75rem;
  letter-spacing: initial;
  text-decoration: none;
  text-transform: initial;
  text-shadow: none;
  content: "ERROR (E0006): html has no lang attribute." !important;
  color: var(--checka11y-text-error);
  border: 0.4rem solid var(--checka11y-border-error);
  background-color: var(--checka11y-bg-error);
}

html[lang=""] body::before {
  display: block;
  font-size: 1rem;
  font-family: verdana, geneva, tahoma, sans-serif;
  font-weight: 700;
  font-style: initial;
  padding: var(--checka11y-space-4) var(--checka11y-space-6);
  border-radius: 0.75rem;
  letter-spacing: initial;
  text-decoration: none;
  text-transform: initial;
  text-shadow: none;
  content: "ERROR (E0006): html lang attribute should not be empty." !important;
  color: var(--checka11y-text-error);
  border: 0.4rem solid var(--checka11y-border-error);
  background-color: var(--checka11y-bg-error);
}

iframe:not([title]) {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="350px" height="80px" viewBox="0 0 350 80"><rect class="box" x="4" y="4" width="342" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0007): All &lt;iframe&gt; must</text> <text x="15" y="60">have a title.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 350px;
  padding-bottom: 80px;
}

img:not([alt]) {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="350px" height="80px" viewBox="0 0 350 80"><rect class="box" x="4" y="4" width="342" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0008): All &lt;img&gt; must</text> <text x="15" y="60">have alternative text.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 350px;
  padding-bottom: 80px;
}

img[longdesc$=".jpg" i], img[longdesc$=".jpeg" i], img[longdesc$=".png" i], img[longdesc$=".gif" i], img[longdesc$=".svg" i], img[longdesc$=".bmp" i], img[longdesc$=".tif" i], img[longdesc$=".tiff" i], img[longdesc$=".eps" i], img[longdesc$=".avif" i], img[longdesc$=".webp" i] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="450px" height="80px" viewBox="0 0 450 80"><rect class="box" x="4" y="4" width="442" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0015): longdesc attribute cannot</text> <text x="15" y="60">point to an image.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 450px;
  padding-bottom: 80px;
}

img[longdesc*=" "], img[longdesc=""] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="450px" height="80px" viewBox="0 0 450 80"><rect class="box" x="4" y="4" width="442" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0016): longdesc attribute should be</text> <text x="15" y="60">a valid URL instead of plain text.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 450px;
  padding-bottom: 80px;
}

a audio[controls] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="550px" height="80px" viewBox="0 0 550 80"><rect class="box" x="4" y="4" width="542" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0009): Ensure that &lt;audio controls&gt; is</text> <text x="15" y="60">not a child of &lt;a&gt;.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 550px;
  padding-bottom: 80px;
}

a button::after {
  display: block;
  font-size: 1rem;
  font-family: verdana, geneva, tahoma, sans-serif;
  font-weight: 700;
  font-style: initial;
  padding: var(--checka11y-space-4) var(--checka11y-space-6);
  border-radius: 0.75rem;
  letter-spacing: initial;
  text-decoration: none;
  text-transform: initial;
  text-shadow: none;
  content: "ERROR (E0009): Ensure that <button> is not a child of <a>." !important;
  color: var(--checka11y-text-error);
  border: 0.4rem solid var(--checka11y-border-error);
  background-color: var(--checka11y-bg-error);
}

a details::after {
  display: block;
  font-size: 1rem;
  font-family: verdana, geneva, tahoma, sans-serif;
  font-weight: 700;
  font-style: initial;
  padding: var(--checka11y-space-4) var(--checka11y-space-6);
  border-radius: 0.75rem;
  letter-spacing: initial;
  text-decoration: none;
  text-transform: initial;
  text-shadow: none;
  content: "ERROR (E0009): Ensure that <details> is not a child of <a>." !important;
  color: var(--checka11y-text-error);
  border: 0.4rem solid var(--checka11y-border-error);
  background-color: var(--checka11y-bg-error);
}

a embed {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="550px" height="80px" viewBox="0 0 550 80"><rect class="box" x="4" y="4" width="542" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0009): Ensure that &lt;embed&gt; is</text> <text x="15" y="60">not a child of &lt;a&gt;.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 550px;
  padding-bottom: 80px;
}

a iframe {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="550px" height="80px" viewBox="0 0 550 80"><rect class="box" x="4" y="4" width="542" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0009): Ensure that &lt;iframe&gt; is</text> <text x="15" y="60">not a child of &lt;a&gt;.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 550px;
  padding-bottom: 80px;
}

a img[usemap] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="550px" height="80px" viewBox="0 0 550 80"><rect class="box" x="4" y="4" width="542" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0009): Ensure that &lt;img usemap&gt; is</text> <text x="15" y="60">not a child of &lt;a&gt;.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 550px;
  padding-bottom: 80px;
}

a input:not([type=hidden]) {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="550px" height="80px" viewBox="0 0 550 80"><rect class="box" x="4" y="4" width="542" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0009): Ensure that &lt;input type="hidden"&gt; is</text> <text x="15" y="60">not a child of &lt;a&gt;.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 550px;
  padding-bottom: 80px;
}

a label::after {
  display: block;
  font-size: 1rem;
  font-family: verdana, geneva, tahoma, sans-serif;
  font-weight: 700;
  font-style: initial;
  padding: var(--checka11y-space-4) var(--checka11y-space-6);
  border-radius: 0.75rem;
  letter-spacing: initial;
  text-decoration: none;
  text-transform: initial;
  text-shadow: none;
  content: "ERROR (E0009): Ensure that <label> is not a child of <a>." !important;
  color: var(--checka11y-text-error);
  border: 0.4rem solid var(--checka11y-border-error);
  background-color: var(--checka11y-bg-error);
}

a object[usemap] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="550px" height="80px" viewBox="0 0 550 80"><rect class="box" x="4" y="4" width="542" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0009): Ensure that &lt;object usemap&gt; is</text> <text x="15" y="60">not a child of &lt;a&gt;.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 550px;
  padding-bottom: 80px;
}

a select {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="550px" height="80px" viewBox="0 0 550 80"><rect class="box" x="4" y="4" width="542" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0009): Ensure that &lt;select&gt; is</text> <text x="15" y="60">not a child of &lt;a&gt;.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 550px;
  padding-bottom: 80px;
}

a textarea {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="550px" height="80px" viewBox="0 0 550 80"><rect class="box" x="4" y="4" width="542" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0009): Ensure that &lt;textarea&gt; is</text> <text x="15" y="60">not a child of &lt;a&gt;.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 550px;
  padding-bottom: 80px;
}

a video[controls] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="550px" height="80px" viewBox="0 0 550 80"><rect class="box" x="4" y="4" width="542" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0009): Ensure that &lt;video controls&gt; is</text> <text x="15" y="60">not a child of &lt;a&gt;.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 550px;
  padding-bottom: 80px;
}

a[href]:not([aria-label], [aria-labelledby]):empty::after {
  display: block;
  font-size: 1rem;
  font-family: verdana, geneva, tahoma, sans-serif;
  font-weight: 700;
  font-style: initial;
  padding: var(--checka11y-space-4) var(--checka11y-space-6);
  border-radius: 0.75rem;
  letter-spacing: initial;
  text-decoration: none;
  text-transform: initial;
  text-shadow: none;
  content: "ERROR (E0010): Ensure that <a> has meaningful content or is labelled appropriately." !important;
  color: var(--checka11y-text-error);
  border: 0.4rem solid var(--checka11y-border-error);
  background-color: var(--checka11y-bg-error);
}

dl > *:not(dt, dd)::after {
  display: block;
  font-size: 1rem;
  font-family: verdana, geneva, tahoma, sans-serif;
  font-weight: 700;
  font-style: initial;
  padding: var(--checka11y-space-4) var(--checka11y-space-6);
  border-radius: 0.75rem;
  letter-spacing: initial;
  text-decoration: none;
  text-transform: initial;
  text-shadow: none;
  content: "ERROR (E0012): List markup invalid. Ensure that the only direct children of <dl> are <dt> and <dd>." !important;
  color: var(--checka11y-text-error);
  border: 0.4rem solid var(--checka11y-border-error);
  background-color: var(--checka11y-bg-error);
}

ol > *:not(li, script, template)::after, ul > *:not(li, script, template)::after {
  display: block;
  font-size: 1rem;
  font-family: verdana, geneva, tahoma, sans-serif;
  font-weight: 700;
  font-style: initial;
  padding: var(--checka11y-space-4) var(--checka11y-space-6);
  border-radius: 0.75rem;
  letter-spacing: initial;
  text-decoration: none;
  text-transform: initial;
  text-shadow: none;
  content: "ERROR (E0011): List markup invalid. Ensure <li>, <script> or <template> are the only direct children of <ul> or <ol>." !important;
  color: var(--checka11y-text-error);
  border: 0.4rem solid var(--checka11y-border-error);
  background-color: var(--checka11y-bg-error);
}

nav:not([aria-label], [aria-labelledby]) ~ nav::after, nav ~ nav:not([aria-label], [aria-labelledby])::after {
  display: block;
  font-size: 1rem;
  font-family: verdana, geneva, tahoma, sans-serif;
  font-weight: 700;
  font-style: initial;
  padding: var(--checka11y-space-4) var(--checka11y-space-6);
  border-radius: 0.75rem;
  letter-spacing: initial;
  text-decoration: none;
  text-transform: initial;
  text-shadow: none;
  content: "ERROR (E0013): <nav> indicates the primary navigation for the page. In cases where multiple primary navigations exist, an aria-label or aria-labelledby attribute must be present on both <nav> elements." !important;
  color: var(--checka11y-text-error);
  border: 0.4rem solid var(--checka11y-border-error);
  background-color: var(--checka11y-bg-error);
}

a[href][tabindex="-1"]::after {
  display: block;
  font-size: 1rem;
  font-family: verdana, geneva, tahoma, sans-serif;
  font-weight: 700;
  font-style: initial;
  padding: var(--checka11y-space-4) var(--checka11y-space-6);
  border-radius: 0.75rem;
  letter-spacing: initial;
  text-decoration: none;
  text-transform: initial;
  text-shadow: none;
  content: "ERROR (E0014): Ensure that <a> with an href attribute does not have a tab index of -1." !important;
  color: var(--checka11y-text-error);
  border: 0.4rem solid var(--checka11y-border-error);
  background-color: var(--checka11y-bg-error);
}

area[href][tabindex="-1"] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="80px" viewBox="0 0 400 80"><rect class="box" x="4" y="4" width="392" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0014): Ensure that &lt;area&gt; with an</text> <text x="15" y="60">href attribute does not have a tab index of -1.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 400px;
  padding-bottom: 80px;
}

input:not([disabled])[tabindex="-1"] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="80px" viewBox="0 0 400 80"><rect class="box" x="4" y="4" width="392" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0014): Ensure that &lt;input&gt; that</text> <text x="15" y="60">is not disabled does not have a tab index of -1.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 400px;
  padding-bottom: 80px;
}

select:not([disabled])[tabindex="-1"] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="80px" viewBox="0 0 400 80"><rect class="box" x="4" y="4" width="392" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0014): Ensure that &lt;select&gt; that</text> <text x="15" y="60">is not disabled does not have a tab index of -1.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 400px;
  padding-bottom: 80px;
}

textarea:not([disabled])[tabindex="-1"] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="80px" viewBox="0 0 400 80"><rect class="box" x="4" y="4" width="392" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0014): Ensure that &lt;textarea&gt; that</text> <text x="15" y="60">is not disabled does not have a tab index of -1.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 400px;
  padding-bottom: 80px;
}

button:not([disabled])[tabindex="-1"]::after {
  display: block;
  font-size: 1rem;
  font-family: verdana, geneva, tahoma, sans-serif;
  font-weight: 700;
  font-style: initial;
  padding: var(--checka11y-space-4) var(--checka11y-space-6);
  border-radius: 0.75rem;
  letter-spacing: initial;
  text-decoration: none;
  text-transform: initial;
  text-shadow: none;
  content: "ERROR (E0014): Ensure that <button> that is not disabled does not have a tab index of -1." !important;
  color: var(--checka11y-text-error);
  border: 0.4rem solid var(--checka11y-border-error);
  background-color: var(--checka11y-bg-error);
}

iframe[tabindex="-1"] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-error);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="80px" viewBox="0 0 400 80"><rect class="box" x="4" y="4" width="392" height="72" rx="12" ry="12" fill="rgba(255, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">ERROR (E0014): Ensure that &lt;iframe&gt;</text> <text x="15" y="60">does not have a tab index of -1.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 400px;
  padding-bottom: 80px;
}

[contentEditable=true][tabindex="-1"]::after {
  display: block;
  font-size: 1rem;
  font-family: verdana, geneva, tahoma, sans-serif;
  font-weight: 700;
  font-style: initial;
  padding: var(--checka11y-space-4) var(--checka11y-space-6);
  border-radius: 0.75rem;
  letter-spacing: initial;
  text-decoration: none;
  text-transform: initial;
  text-shadow: none;
  content: "ERROR (E0014): Ensure that HTML elements with editable content don't have a tab index of -1." !important;
  color: var(--checka11y-text-error);
  border: 0.4rem solid var(--checka11y-border-error);
  background-color: var(--checka11y-bg-error);
}