checka11y-css/checka11y-warnings.css

A CSS stylesheet to quickly highlight a11y concerns.

/*! Checka11y.css v2.4.0 | MIT License | github.com/jackdomleo7/Checka11y.css */
:root {
  --checka11y-text-warning: #856404;
  --checka11y-bg-warning: #ffffd8;
  --checka11y-border-warning: #ff6;
}

: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);
}

[accesskey]::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: "WARNING (W0000): accesskey attribute could interfere and conflict with screen readers and assistive technologies." !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[aria-hidden=true] a::after, [aria-hidden=true] button::after, [aria-hidden=true] summary::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: "WARNING (W0009): Focusable element in a aria-hidden element." !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[aria-hidden=true] area, [aria-hidden=true] audio[controls], [aria-hidden=true] iframe, [aria-hidden=true] input, [aria-hidden=true] select, [aria-hidden=true] textarea, [aria-hidden=true] video[controls] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-warning);
  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, 255, 216, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 255, 102, 0.999999)" /><g fill="rgba(133, 100, 4, 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">WARNING (W0009): Focusable</text> <text x="15" y="60">element in a aria-hidden element.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 350px;
  padding-bottom: 80px;
}

a[aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

button[aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

summary[aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[role=separator][aria-valuenow][aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[role=separator][aria-valuemin][aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[role=separator][aria-valuemax][aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

area[aria-hidden=true] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-warning);
  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, 255, 216, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 255, 102, 0.999999)" /><g fill="rgba(133, 100, 4, 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">WARNING (W0017): Interactive</text> <text x="15" y="60">element containing aria-hidden</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 350px;
  padding-bottom: 80px;
}

audio[controls][aria-hidden=true] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-warning);
  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, 255, 216, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 255, 102, 0.999999)" /><g fill="rgba(133, 100, 4, 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">WARNING (W0017): Interactive</text> <text x="15" y="60">element containing aria-hidden</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 350px;
  padding-bottom: 80px;
}

iframe[aria-hidden=true] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-warning);
  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, 255, 216, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 255, 102, 0.999999)" /><g fill="rgba(133, 100, 4, 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">WARNING (W0017): Interactive</text> <text x="15" y="60">element containing aria-hidden</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 350px;
  padding-bottom: 80px;
}

input[aria-hidden=true] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-warning);
  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, 255, 216, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 255, 102, 0.999999)" /><g fill="rgba(133, 100, 4, 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">WARNING (W0017): Interactive</text> <text x="15" y="60">element containing aria-hidden</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 350px;
  padding-bottom: 80px;
}

select[aria-hidden=true] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-warning);
  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, 255, 216, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 255, 102, 0.999999)" /><g fill="rgba(133, 100, 4, 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">WARNING (W0017): Interactive</text> <text x="15" y="60">element containing aria-hidden</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 350px;
  padding-bottom: 80px;
}

textarea[aria-hidden=true] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-warning);
  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, 255, 216, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 255, 102, 0.999999)" /><g fill="rgba(133, 100, 4, 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">WARNING (W0017): Interactive</text> <text x="15" y="60">element containing aria-hidden</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 350px;
  padding-bottom: 80px;
}

video[controls][aria-hidden=true] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-warning);
  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, 255, 216, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 255, 102, 0.999999)" /><g fill="rgba(133, 100, 4, 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">WARNING (W0017): Interactive</text> <text x="15" y="60">element containing aria-hidden</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 350px;
  padding-bottom: 80px;
}

[role=button][aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[role=combobox][aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[role=link][aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[role=menuitem][aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[role=menuitemcheckbox][aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[role=menuitemradio][aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[role=option][aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[role=scrollbar][aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[role=searchbox][aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[role=slider][aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[role=spinbutton][aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[role=switch][aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[role=tab][aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[role=radio][aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[role=textbox][aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[role=treeitem][aria-hidden=true]::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: "WARNING (W0017): Interactive element containing aria-hidden" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

[autoplay] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-warning);
  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, 255, 216, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 255, 102, 0.999999)" /><g fill="rgba(133, 100, 4, 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">WARNING (W0001): Media should</text> <text x="15" y="60">not autoplay.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 350px;
  padding-bottom: 80px;
}

[onclick]:not(a, button, [onkeydown], [onkeyup], [onkeypress])::after, [onclick][onkeyup]:not([tabindex], a, button)::after, [onclick][onkeyup][tabindex="-1"]:not(a, button)::after, [onclick][onkeydown]:not([tabindex], a, button)::after, [onclick][onkeydown][tabindex="-1"]:not(a, button)::after, [onclick][onkeypress]:not([tabindex], a, button)::after, [onclick][onkeypress][tabindex="-1"]:not(a, button)::after, [ondblclick]:not(a, button, [onkeydown], [onkeyup], [onkeypress])::after, [ondblclick][onkeyup]:not([tabindex], a, button)::after, [ondblclick][onkeyup][tabindex="-1"]:not(a, button)::after, [ondblclick][onkeydown]:not([tabindex], a, button)::after, [ondblclick][onkeydown][tabindex="-1"]:not(a, button)::after, [ondblclick][onkeypress]:not([tabindex], a, button)::after, [ondblclick][onkeypress][tabindex="-1"]:not(a, button)::after, [onmousedown]:not(a, button, [onkeydown], [onkeyup], [onkeypress])::after, [onmousedown][onkeyup]:not([tabindex], a, button)::after, [onmousedown][onkeyup][tabindex="-1"]:not(a, button)::after, [onmousedown][onkeydown]:not([tabindex], a, button)::after, [onmousedown][onkeydown][tabindex="-1"]:not(a, button)::after, [onmousedown][onkeypress]:not([tabindex], a, button)::after, [onmousedown][onkeypress][tabindex="-1"]:not(a, button)::after, [onmouseup]:not(a, button, [onkeydown], [onkeyup], [onkeypress])::after, [onmouseup][onkeyup]:not([tabindex], a, button)::after, [onmouseup][onkeyup][tabindex="-1"]:not(a, button)::after, [onmouseup][onkeydown]:not([tabindex], a, button)::after, [onmouseup][onkeydown][tabindex="-1"]:not(a, button)::after, [onmouseup][onkeypress]:not([tabindex], a, button)::after, [onmouseup][onkeypress][tabindex="-1"]:not(a, button)::after, [onmouseover]:not(a, button)::after, [onmouseenter]:not(a, button)::after, [onmouseleave]:not(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: "WARNING (W0002): Potentially inaccessible click event used on non-clickable element. Ensure you have an accessible alternative." !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

head {
  display: block;
}

head meta[name=viewport][content*="maximum-scale=1" i], head meta[name=viewport][content*="user-scalable=no" i] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-warning);
  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, 255, 216, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 255, 102, 0.999999)" /><g fill="rgba(133, 100, 4, 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">WARNING (W0016): The display zoom/scale</text> <text x="15" y="60">has been disabled.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 458px;
  padding-bottom: 80px;
  display: block;
  border: 0;
}

h1[role=text]::after, h2[role=text]::after, h3[role=text]::after, h4[role=text]::after, h5[role=text]::after, h6[role=text]::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: "WARNING (W0010): Using role='text' on a heading element causes it to lose semantic meaning for screen readers" !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

img[alt^="logo for" i], img[alt^="logo of" i], img[alt^="image of" i], img[alt^=bullet i], img[alt^="graphic of" i], img[alt$=logo i], img[alt$=graphic i], img[alt$=image i], img[alt$=".ivaf" i], img[alt$=".webp" i], img[alt$=".bmp" i], img[alt$=".svg" i], img[alt$=",jpeg" i], img[alt$=".jpg" i], img[alt$=".gif" i], img[alt$=".png" i], img[alt=" " i], img[alt="*" i], img[alt=graph i], img[alt=diagram i], img[alt=table i], img[alt=chart i], img[alt=blank i], img[alt=spacer i], img[alt=more i], img[alt=arrow i], img[alt=button i], img[alt=bullet i], img[alt=logo i], img[alt=artwork i], img[alt=painting i], img[alt=drawing i], img[alt=photograph i], img[alt=photo i], img[alt=graphic i], img[alt=image i] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-warning);
  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, 255, 216, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 255, 102, 0.999999)" /><g fill="rgba(133, 100, 4, 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">WARNING (W0003): Alt text must</text> <text x="15" y="60">describe the content of the image.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 400px;
  padding-bottom: 80px;
}

img[longdesc] {
  border: 0.4rem solid;
  border-color: var(--checka11y-border-warning);
  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, 255, 216, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 255, 102, 0.999999)" /><g fill="rgba(133, 100, 4, 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">WARNING (W0015): longdesc attribute is</text> <text x="15" y="60">deprecated and should be avoided.</text></g></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  min-width: 450px;
  padding-bottom: 80px;
}

[style*="!important"]::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: "WARNING (W0004): !important inline styles should be avoided." !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

*:not([role=text]) > em::after, *:not([role=text]) span::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: "WARNING (W0005): Text broken by <span> or <em> elements might need a [role='text'] attribute." !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

a[target=_blank]::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: "WARNING (W0006): Links that open in a new tab or window should be communicated to the user, ensure the user knows of this behavior." !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

a[href="#"]::after, a[role=button]::after, a[href^="javascript:"]::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: "WARNING (W0011): Anchor tags should not be used as buttons. Links should redirect to a resource/page, if they don't they probably should be buttons." !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

a[href$=".pdf"]::after, a[href$=".docx"]::after, a[href$=".doc"]::after, a[href$=".xlsx"]::after, a[href$=".xls"]::after, a[href$=".pptx"]::after, a[href$=".pptm"]::after, a[href$=".ppt"]::after, a[href$=".txt"]::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: "WARNING (W0013): Anchor tags that contain a link to a PDF, Word, Excel, or PowerPoint document is present on the page and could be a potential accessibility issue." !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

a[href*="https://youtu.be"]::after, a[href*="https://youtube.com"]::after, a[href*="https://spotify.com/"]::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: "WARNING (W0014): Anchor tags that contain a link to content site (Youtube, Spotify etc) is present on the document." !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

section:empty::before, section > :not(h1, h2, h3, h4, h5, h6, img):last-child::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: "WARNING (W0012): A <section> should contain a heading element." !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

section > :is(h1, h2, h3, h4, h5, h6) ~ :not(:is(h1, h2, h3, h4, h5, h6, img)):last-child::before {
  content: none !important;
}

[title]::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: "WARNING (W0008): The title attribute has many accessibility concerns, consider using an alternative method." !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}

u::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: "WARNING (W0007): Using <u> element could be confused as a hyperlink, consider using a different element such as <em> or <b>." !important;
  color: var(--checka11y-text-warning);
  border: 0.4rem solid var(--checka11y-border-warning);
  background-color: var(--checka11y-bg-warning);
}