Skip to content

Instantly share code, notes, and snippets.

@stevenpetryk
Last active August 7, 2019 18:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stevenpetryk/2528c73662c562aee4ddef98e2489d47 to your computer and use it in GitHub Desktop.
Save stevenpetryk/2528c73662c562aee4ddef98e2489d47 to your computer and use it in GitHub Desktop.
A generator + issue template for WCAG 2.1

To generate this list, I ran the following on the WCAG document page:

const a = Array.from(document.querySelectorAll('h1, h2, h3, h4'))
const headings = a.map((el) => [el.tagName, el.textContent, (el.parentNode.querySelector('.conformance-level') || {}).innerText])

headings
  .filter((h) => /^\D*[1-4]/.test(h[1]))
  .map(([headingLevel, title, level, permalink]) => {
    const headingHashes = "#".repeat(+headingLevel.replace(/\D/g, "") - 1)

    const actualPermalink = ` [§](${permalink})`

    let actualLevel = ''

    if (headingHashes === '###') {
      actualLevel = (level || '').replace('Level ', '')
    }

    const actualTitle = title.replace('§', actualPermalink)
      .replace('Success Criterion ', '')
      .replace('Guideline ', '')

    return `${headingHashes} ${actualTitle} ${actualLevel}`.replace(/\s+/g, ' ')
  }).join("\n\n")

Copy the result, remove the top two headings if you want (was too lazy to script this in).

This is handy for making big old issues to track your site's compliance.

1. Perceivable §

1.1 Text Alternatives §

1.1.1 Non-text Content § (A)

1.2 Time-based Media §

1.2.1 Audio-only and Video-only (Prerecorded) § (A)

1.2.2 Captions (Prerecorded) § (A)

1.2.3 Audio Description or Media Alternative (Prerecorded) § (A)

1.2.4 Captions (Live) § (AA)

1.2.5 Audio Description (Prerecorded) § (AA)

1.2.6 Sign Language (Prerecorded) § (AAA)

1.2.7 Extended Audio Description (Prerecorded) § (AAA)

1.2.8 Media Alternative (Prerecorded) § (AAA)

1.2.9 Audio-only (Live) § (AAA)

1.3 Adaptable §

1.3.1 Info and Relationships § (A)

1.3.2 Meaningful Sequence § (A)

1.3.3 Sensory Characteristics § (A)

1.3.4 Orientation § (AA)

1.3.5 Identify Input Purpose § (AA)

1.3.6 Identify Purpose § (AAA)

1.4 Distinguishable §

1.4.1 Use of Color § (A)

1.4.2 Audio Control § (A)

1.4.3 Contrast (Minimum) § (AA)

1.4.4 Resize text § (AA)

1.4.5 Images of Text § (AA)

1.4.6 Contrast (Enhanced) § (AAA)

1.4.7 Low or No Background Audio § (AAA)

1.4.8 Visual Presentation § (AAA)

1.4.9 Images of Text (No Exception) § (AAA)

1.4.10 Reflow § (AA)

1.4.11 Non-text Contrast § (AA)

1.4.12 Text Spacing § (AA)

1.4.13 Content on Hover or Focus § (AA)

2. Operable §

2.1 Keyboard Accessible §

2.1.1 Keyboard § (A)

2.1.2 No Keyboard Trap § (A)

2.1.3 Keyboard (No Exception) § (AAA)

2.1.4 Character Key Shortcuts § (A)

2.2 Enough Time §

2.2.1 Timing Adjustable § (A)

2.2.2 Pause, Stop, Hide § (A)

2.2.3 No Timing § (AAA)

2.2.4 Interruptions § (AAA)

2.2.5 Re-authenticating § (AAA)

2.2.6 Timeouts § (AAA)

2.3 Seizures and Physical Reactions §

2.3.1 Three Flashes or Below Threshold § (A)

2.3.2 Three Flashes § (AAA)

2.3.3 Animation from Interactions § (AAA)

2.4 Navigable §

2.4.1 Bypass Blocks § (A)

2.4.2 Page Titled § (A)

2.4.3 Focus Order § (A)

2.4.4 Link Purpose (In Context) § (A)

2.4.5 Multiple Ways § (AA)

2.4.6 Headings and Labels § (AA)

2.4.7 Focus Visible § (AA)

2.4.8 Location § (AAA)

2.4.9 Link Purpose (Link Only) § (AAA)

2.4.10 Section Headings § (AAA)

2.5 Input Modalities §

2.5.1 Pointer Gestures § (A)

2.5.2 Pointer Cancellation § (A)

2.5.3 Label in Name § (A)

2.5.4 Motion Actuation § (A)

2.5.5 Target Size § (AAA)

2.5.6 Concurrent Input Mechanisms § (AAA)

3. Understandable §

3.1 Readable §

3.1.1 Language of Page § (A)

3.1.2 Language of Parts § (AA)

3.1.3 Unusual Words § (AAA)

3.1.4 Abbreviations § (AAA)

3.1.5 Reading Level § (AAA)

3.1.6 Pronunciation § (AAA)

3.2 Predictable §

3.2.1 On Focus § (A)

3.2.2 On Input § (A)

3.2.3 Consistent Navigation § (AA)

3.2.4 Consistent Identification § (AA)

3.2.5 Change on Request § (AAA)

3.3 Input Assistance §

3.3.1 Error Identification § (A)

3.3.2 Labels or Instructions § (A)

3.3.3 Error Suggestion § (AA)

3.3.4 Error Prevention (Legal, Financial, Data) § (AA)

3.3.5 Help § (AAA)

3.3.6 Error Prevention (All) § (AAA)

4. Robust §

4.1 Compatible §

4.1.1 Parsing § (A)

4.1.2 Name, Role, Value § (A)

4.1.3 Status Messages § (AA)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment