accessibility-audit

Files (1)

• SKILL.md

SKILL.md (first lines)

# Accessibility Audit

## WCAG 2.1 Quick Reference

### Level A (Minimum)
- All images have alt text
- All form inputs have labels
- Keyboard accessible
- No content flashes more than 3 times/sec
- Page has title
- Link text is descriptive

### Level AA (Recommended)
- Color contrast ratio ≥ 4.5:1 (normal text), ≥ 3:1 (large text)
- Text resizable up to 200% without loss
- Responsive to viewport changes
- Focus visible on interactive elements
- Skip navigation link provided

## Semantic HTML

```html
<!-- Bad -->
<div class="nav">
  <div class="nav-item" onclick="go('/home')">Home</div>
</div>
<div class="content">
  <div class="title">Welcome</div>
</div>

<!-- Good -->
<nav aria-label="Main">
  <ul>
    <li><a href="/home">Home</a></li>
  </ul>
</nav>
<main>
  <h1>Welcome</h1>
</main>
```

## ARIA Patterns

### Landmarks
```html
<header aria-label="Site header">...</header>
<nav aria-label="Main navigation">...</nav>
<main>
  <article>
    <h1>Page Title</h1>
    <section aria-labelledby="section-1">
      <h2 id="section-1">Section</h2>
    </section>
  </article>
  <aside aria-label="Related links">...</aside>
</main>
<footer aria-label="Site footer">...</footer>
```

### Live Regions
```html
<!-- Announce dynamic updates -->
<div aria-live="polite" aria-atomic="true">
  3 items in cart
</div>

<!-- Assertive (interrupts) -->
<div aria-live="assertive">
  Error: Form submission failed
</div>

<!-- Loading state -->
<div aria-busy="true">
  <span aria-hidden="true">Loading...</span>
</div>
```

### Modal Dialog
```html
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirm Action</h2>
  <p>Are you sure?</p>
  <button>Cancel</button>
  <button>Confirm</button>
</div>
```

### Tabs
```html
<div role="tablist" aria-label="Settings">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
    General
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
    Security
  </button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  Content for General
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
  Content for Security
</div>
```

### Accordion
```html
<h3>
  <button aria-expanded="true" aria-controls="content-1">
    Section 1
  </button>
</h3>
<div id="content-1" role="region" aria-labelledby="header-1">
  <p>Content here</p>
</div>
```

## Keyboard Navigation

From ProjectZeroDays/FreeAI_AI_Inference_Workstation, MIT.

More from ProjectZeroDays/FreeAI_AI_Inference_Workstation