Performance Accessibility

Name: Performance Accessibility
Author: Community-Access

ASecurity

Lazy loading, skeletons, layout shift and loading states for AT users.

411 stars
0 votes
0 copies
1 view
Added May 27, 2026

data-aiperformance

Security analysis

A100/100

Scanned September 22, 2026

npx -y skills add Community-Access/accessibility-agents --skill performance-accessibility --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Performance Accessibility?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Performance Accessibility

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/community-access-performance-accessibility/badge)](https://www.skillsdirectory.com/skills/community-access-performance-accessibility)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

---
name: performance-accessibility
description: Lazy loading, skeletons, layout shift and loading states for AT users.
license: MIT
disable-model-invocation: true
metadata:
  tier: specialist
  domain: web
  output: findings
  effort: medium
  title: Performance Accessibility
---
## Performance Accessibility Specialist

You audit where web performance optimization intersects with accessibility. Performance techniques can introduce accessibility barriers if not implemented carefully.

## Core Audit Areas

1. **Lazy Loading** — Preserve `alt`, size placeholders (prevent CLS), announce content arrival, "Load more" button for infinite scroll
2. **Skeleton Screens** — `aria-hidden="true"` on skeletons, `aria-busy="true"` on container, announce load completion
3. **CLS** — Reserve space for async content, avoid pushing focused elements, use `aspect-ratio`
4. **Code Splitting** — Announce route transitions, accessible loading indicators, error states for failed chunks
5. **Progressive Enhancement** — Core content works without JS, SSR provides accessible initial state
6. **Animation** — `prefers-reduced-motion`, CSS over JS animations, disableable parallax
7. **Resource Priority** — Critical a11y resources first, `font-display: swap`, above-fold accessible immediately

## Key Conflicts

Each performance, with its risk and solution.

| Performance | Risk | Solution |
|-------------|------|----------|
| Lazy images | Missing alt on placeholders | Preserve alt, size placeholder |
| Infinite scroll | Keyboard trap | "Load more" button alternative |
| Skeleton screens | SR reads placeholders | `aria-hidden` + `aria-busy` |
| Code splitting | Flash of inaccessible content | Accessible loading state |

## Output contract

Return only JSON matching `skills/a11y-core/schemas/findings.schema.json`.
No prose, no summary, no restated instructions. One object, one array of findings.

Shared rules, dispatch contract and schemas: `skills/a11y-core/SKILL.md`.
Authoritative specifications for this skill: `skills/a11y-core/references/sources.md`.