a11y-debug.min.css

:root {--color-debug-dark: #121212;--color-debug-dark-rgb: 18, 18, 18;--color-debug-light: #ffffff;--color-debug-warning: darkorange;--color-debug-light-error: oklch(88.5% 0.062 18.334);--color-debug-error: crimson;}.a11y-debug {[role="button"],[role="link"] {outline: 2px dashed var(--color-debug-warning);outline-offset: 4px;position: relative;}[role="button"]::after,[role="link"]::after {content: "⚠️ Role needs keyboard support";color: var(--color-debug-warning);font-size: 0.675rem;font-weight: bold;display: block;margin-top: 0.25em;border: 1px solid var(--color-debug-dark);background-color: var(--color-debug-light);padding: 0.25em 0.75em;border-radius: 1.25em;}table:not(:has(caption)) {outline: 2px dashed var(--color-debug-error);outline-offset: 4px;position: relative;width: 100%;}table:not(:has(caption))::after {content: "❌ Table missing <caption>";color: var(--color-debug-dark);font-size: 0.675rem;font-weight: bold;display: block;margin-block: 0.25em;background-color: var(--color-debug-light-error);border: 1px solid var(--color-debug-dark);padding: 0.25em 0.75em;border-radius: 1.25em;width: fit-content;}ul:has(> :not(li)),ol:has(> :not(li)) {outline: 2px dashed var(--color-debug-warning);outline-offset: 4px;position: relative;}ul:has(> :not(li))::before,ol:has(> :not(li))::before {content: "⚠️ List has children that aren't <li>";color: var(--color-debug-warning);font-size: 0.675rem;font-weight: bold;display: block;margin-top: 0.25em;border: 1px solid var(--color-debug-dark);background-color: var(--color-debug-light);padding: 0.25em 0.75em;border-radius: 1.25em;width: fit-content;}h1:empty,h2:empty,h3:empty,h4:empty,h5:empty,h6:empty {outline: 2px solid var(--color-debug-error);outline-offset: 4px;position: relative;}h1:empty::before,h2:empty::before,h3:empty::before,h4:empty::before,h5:empty::before,h6:empty::before {content: "⚠️ Empty heading";color: var(--color-debug-warning);font-size: 0.675rem;font-weight: bold;display: block;margin-top: 0.25em;border: 1px solid var(--color-debug-dark);background-color: var(--color-debug-light);padding: 0.25em 0.75em;border-radius: 1.25em;width: fit-content;}*:has(> img:not([alt])) {outline: 2px dashed var(--color-debug-error);outline-offset: 4px;position: relative;}*:has(> img:not([alt]))::after {content: "❌ Image missing alt text";color: var(--color-debug-dark);font-size: 0.675rem;font-weight: bold;display: block;margin-top: 0.25em;background-color: var(--color-debug-light-error);border: 1px solid var(--color-debug-dark);padding: 0.25em 0.75em;border-radius: 1.25em;width: fit-content;}label:not([for]):not(:has(input, select, textarea)),label[for]+input:not([id]),label[for]+select:not([id]),label[for]+textarea:not([id]) {outline: 2px dashed var(--color-debug-error);outline-offset: 4px;position: relative;}label:not([for]):not(:has(input, select, textarea))::before,label[for]+input:not([id])::before,label[for]+select:not([id])::before,label[for]+textarea:not([id])::before {content: " ⚠️ Label missing 'for' or control";color: var(--color-debug-error);font-size: 0.675rem;font-weight: bold;display: block;margin-top: 0.25em;background-color: var(--color-debug-light-error);border: 1px solid var(--color-debug-dark);padding: 0.25em 0.75em;border-radius: 1.25em;width: fit-content;}button:has(svg):not(:has(span)):not([aria-label]) {outline: 2px dashed var(--color-debug-warning);outline-offset: 4px;position: relative;}button:has(svg):not(:has(span)):not([aria-label])::after {content: "⚠️ Icon-only button needs a label";color: var(--color-debug-error);font-size: 0.675rem;font-weight: bold;display: block;margin-top: 0.25em;background-color: var(--color-debug-light-error);border: 1px solid var(--color-debug-dark);padding: 0.15em 0.75em;border-radius: 1.25em;width: fit-content;}}