accessibility

分类: 工具与效率 | 上传者: holger1411 | 下载: 0 | 版本: v1.0（最新）

在创建或修改用户可见的任何 UI 元素、查看 HTML 标记、添加交互元素或 Lighthouse 可访问性降至 90 以下时使用。

更新日志: Source: GitHub https://github.com/holger1411/astrodeck

目录结构

当前层级: tree/main/.claude/skills/accessibility/

📄 LEARNINGS.md 349 B
📄 SKILL.md 1.8 KB

SKILL.md

---
name: accessibility
description: Use when creating or modifying any UI element visible to the user, reviewing HTML markup, adding interactive elements, or when Lighthouse Accessibility drops below 90.
---

# Accessibility Skill

## Canonical Sources

> This skill references the following globals — read them BEFORE starting work:
> - `system/globals/accessibility.md` — WCAG rules, ARIA patterns, keyboard nav, focus styles
> - `system/globals/colors.md` — Contrast ratios, color semantics

## Domain

WCAG 2.1 AA, ARIA, Keyboard Navigation, Contrast, Screen Readers

## KPIs

| Metric | Target | Measurement |
|--------|--------|-------------|
| Lighthouse Accessibility | >90 | Lighthouse JSON → `categories.accessibility.score * 100` |
| Pa11y Errors | 0 | `npx pa11y <URL> --reporter=json` |
| Images without Alt | 0 | Grep: `<img` without `alt=` in src/ |

## Non-Negotiable

These rules always apply — even under time pressure, even for "it's just an internal tool":

- **No element without alt text.** Not even "because it's a template" — templates set the standard for thousands of projects built on top of them.
- **No `div` instead of `button` for clickable elements.** Not even "because it's easier." A `div` is not focusable, not keyboard-operable, and is ignored by screen readers.
- **No commit without heading hierarchy.** "It's just a landing page" is not an excuse — screen readers navigate via headings.
- **Dark mode is mandatory from day 1.** "We'll add it later" doesn't work — CSS variables must be correct from the start. Retrofitting is double the work.
- **Keyboard navigation is not a nice-to-have.** "Users only use the mouse anyway" is wrong — 25% of users rely on keyboard, assistive technology, or both.

## Before Applying

Read `LEARNINGS.md` in this directory to avoid known anti-patterns.

登录后下载/点赞/收藏 ❤ 40 | ★ 0

accessibility

目录结构

SKILL.md

举报内容

提示