Accessibility Testing user stylesheet (for Stylus)

accessibility-testing.css

/* Based on Heydon Pickering's REVENGE.css */
:root {
  --error-outline: 0.25rem solid red;
  --span-outline: 0.25rem solid goldenrod;
}

h1:not(:only-of-type) {
    outline: 5px solid blue !important;
    --error-multiple-h1: 'You have more than one H1 heading.';
}

table table,
table table th, 
table table td {
  outline: var(--error-outline);
  --error-nested-tables: 'You have nested tables. Please revise your layout so that data is enclosed in one table.';
}

:is(h1,h2,h3,h4,h5,h6) span:not(:only-of-type, :is([role="text"], :is(h1,h2,h3,h4,h5,h6) span[role="text"] span)) {
  outline: var(--span-outline);
  --error-nested-heading-spans: 'You have spans in headings. VoiceOver will read these as separate phrases with pauses in between. If this is not a complete phrase, add a parent span with role="text" around the individual spans, or replace the inner spans with another inline element.';
}

:is(a[href],button) span:not(:only-of-type, :is([role="text"], :is(a[href],button) span[role="text"] span, :is([aria-label],[aria-labelledby]) span)) {
  outline: var(--span-outline);
  --error-nested-spans: 'You have spans in button or link text. VoiceOver will read these as separate phrases with pauses in between. If this is not a complete phrase, add a parent span with role="text" around the individual spans, or replace the inner spans with another inline element.';
}

a[href^="javascript"] {
  outline: var(--error-outline);
  --error-javascript-href: 'The href does not appear to include a location. Did you mean to use a <button>?';
}

a[disabled] {
  outline: var(--error-outline);
  --error-anchor-disabled: 'The disabled property is not valid on anchors (links). Did you mean to use a <button>?';
}

label:not(:has(:is(input,output,textarea,select))):not([for]) {
  outline: var(--error-outline);
  --error-unassociated-label: 'The <label> neither uses the `for` attribute nor wraps an applicable form element'
}

input:not(form input) {
  outline: var(--warning-outline);
  --error-input-orphan: 'The input is outside a <form> element. Users may benefit from <form> semantics and behaviors.'
}

ul[class*="nav"]:not(:is(nav[aria-label], nav[aria-labelledby]) ul) {
  outline: var(--error-outline);
  --error-undiscoverable-breadcrumbs: 'It looks like you have provided navigation outside a labeled `<nav>` landmark';
}

body :not(:is(header,nav,main,aside,footer,search,[role="search"])):not(:is(header,nav,main,aside,footer,search,[role="search"]) *):not(.skip-link) {
  outline: var(--error-outline);
  --error-content-outside-landmark: 'You have some content that is not inside a landmark (header, nav, main, aside, search, or footer)';
}

fieldset:has(legend.visually-hidden) {
    outline: 3px dashed green;
    outline-offset: 2px;
    position: relative;
    --info-hidden-legend: 'This set of form fields is grouped in a fieldset with a hidden legend. That\'s great! We are revealing it in green so you can review the legend text.';
}

legend.visually-hidden {
    position: absolute;
    left: -5px;
    width: revert;
    height: revert;
    overflow: visible;
    clip: revert;
    border: 0;
    background-color: green !important;
    color: white !important;
    font-size: small;
    top: -5px;
}