Last active
September 25, 2024 12:29
-
-
Save stephanieleary/e99fb1e066b865490599d05e743648cf to your computer and use it in GitHub Desktop.
Accessibility Testing user stylesheet (for Stylus)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Based on Heydon Pickering's REVENGE.css */ | |
| table table, | |
| table table th, | |
| table table td { | |
| outline: 2px solid red !important; | |
| } | |
| h1:not(:only-of-type) { | |
| outline: 5px solid blue !important; | |
| --error-multiple-h1: 'You have more than one H1 heading.'; | |
| } | |
| table table { | |
| outline: var(--error-outline); | |
| --error-nested-tables: 'You have nested tables. Please revise your layout so that data is enclosed in one table.'; | |
| } | |
| 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, 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. We are revealing it in green.'; | |
| } | |
| 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; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment