📘

Accessibility

Design for everyone, including future you.

v1 design curated
🤖

Install 安装

curl -sSL https://updating.cc/skills/design/accessibility/SKILL.md -o ~/.agents/skills/design__accessibility/SKILL.md

SKILL.md Preview 技能内容预览

---
name: Accessibility
description: Design for everyone, including future you.
---
# Accessibility (a11y)

Accessibility is not a checklist at the end; it's a property of the design, like performance. Build it in or retrofit painfully.

## Must-haves
- **Semantic HTML.** A `<button>` is keyboard-focusable, announced as a button, and works with Enter/Space — for free. A `<div onclick>` is none of these. Use the right element.
- **Visible focus.** Never remove `:focus-visible` outlines without replacing them. Keyboard users navigate by them.
- **Labels, not placeholders.** A placeholder disappears on input; a label stays. Screen readers rely on associated labels.
- **Alt text on meaningful images; empty alt on decorative ones.** "Logo" is useful; a screen reader saying "decorative swirl" on every page is noise.
- **Test with a keyboard, then a screen reader.** If you can't reach and operate every control without a mouse, neither can many of your users.