[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-ec4b7b4a-643b-4c36-90fb-f193b4d6121c":3,"$fg9OB5UaZIFT-ZiUESyp7ay8xi1vZlwevTEmSg4eNui4":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"ec4b7b4a-643b-4c36-90fb-f193b4d6121c","fixing-accessibility","审计和修复HTML可访问性问题，包括ARIA标签、键盘导航、焦点管理、色彩对比和表单错误。在添加交互控件、表单、对话框或审查WCAG合规性时使用。","cat_coding_frontend","mod_coding","sickn33,coding","---\nname: fixing-accessibility\ndescription: Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.\nrisk: unknown\nsource: community\n---\n\n# fixing-accessibility\n\nFix accessibility issues.\n\n## how to use\n\n- `\u002Ffixing-accessibility`\n  Apply these constraints to any UI work in this conversation.\n\n- `\u002Ffixing-accessibility \u003Cfile>`\n  Review the file against all rules below and report:\n  - violations (quote the exact line or snippet)\n  - why it matters (one short sentence)\n  - a concrete fix (code-level suggestion)\n\nDo not rewrite large parts of the UI. Prefer minimal, targeted fixes.\n\n## When to Use\nReference these guidelines when:\n- adding or changing buttons, links, inputs, menus, dialogs, tabs, dropdowns\n- building forms, validation, error states, helper text\n- implementing keyboard shortcuts or custom interactions\n- working on focus states, focus trapping, or modal behavior\n- rendering icon-only controls\n- adding hover-only interactions or hidden content\n\n## rule categories by priority\n\n| priority | category | impact |\n|----------|----------|--------|\n| 1 | accessible names | critical |\n| 2 | keyboard access | critical |\n| 3 | focus and dialogs | critical |\n| 4 | semantics | high |\n| 5 | forms and errors | high |\n| 6 | announcements | medium-high |\n| 7 | contrast and states | medium |\n| 8 | media and motion | low-medium |\n| 9 | tool boundaries | critical |\n\n## quick reference\n\n### 1. accessible names (critical)\n\n- every interactive control must have an accessible name\n- icon-only buttons must have aria-label or aria-labelledby\n- every input, select, and textarea must be labeled\n- links must have meaningful text (no “click here”)\n- decorative icons must be aria-hidden\n\n### 2. keyboard access (critical)\n\n- do not use div or span as buttons without full keyboard support\n- all interactive elements must be reachable by Tab\n- focus must be visible for keyboard users\n- do not use tabindex greater than 0\n- Escape must close dialogs or overlays when applicable\n\n### 3. focus and dialogs (critical)\n\n- modals must trap focus while open\n- restore focus to the trigger on close\n- set initial focus inside dialogs\n- opening a dialog should not scroll the page unexpectedly\n\n### 4. semantics (high)\n\n- prefer native elements (button, a, input) over role-based hacks\n- if a role is used, required aria attributes must be present\n- lists must use ul or ol with li\n- do not skip heading levels\n- tables must use th for headers when applicable\n\n### 5. forms and errors (high)\n\n- errors must be linked to fields using aria-describedby\n- required fields must be announced\n- invalid fields must set aria-invalid\n- helper text must be associated with inputs\n- disabled submit actions must explain why\n\n### 6. announcements (medium-high)\n\n- critical form errors should use aria-live\n- loading states should use aria-busy or status text\n- toasts must not be the only way to convey critical information\n- expandable controls must use aria-expanded and aria-controls\n\n### 7. contrast and states (medium)\n\n- ensure sufficient contrast for text and icons\n- hover-only interactions must have keyboard equivalents\n- disabled states must not rely on color alone\n- do not remove focus outlines without a visible replacement\n\n### 8. media and motion (low-medium)\n\n- images must have correct alt text (meaningful or empty)\n- videos with speech should provide captions when relevant\n- respect prefers-reduced-motion for non-essential motion\n- avoid autoplaying media with sound\n\n### 9. tool boundaries (critical)\n\n- prefer minimal changes, do not refactor unrelated code\n- do not add aria when native semantics already solve the problem\n- do not migrate UI libraries unless requested\n\n## common fixes\n\n```html\n\u003C!-- icon-only button: add aria-label -->\n\u003C!-- before --> \u003Cbutton>\u003Csvg>...\u003C\u002Fsvg>\u003C\u002Fbutton>\n\u003C!-- after -->  \u003Cbutton aria-label=\"Close\">\u003Csvg aria-hidden=\"true\">...\u003C\u002Fsvg>\u003C\u002Fbutton>\n\n\u003C!-- div as button: use native element -->\n\u003C!-- before --> \u003Cdiv onclick=\"save()\">Save\u003C\u002Fdiv>\n\u003C!-- after -->  \u003Cbutton onclick=\"save()\">Save\u003C\u002Fbutton>\n\n\u003C!-- form error: link with aria-describedby -->\n\u003C!-- before --> \u003Cinput id=\"email\" \u002F> \u003Cspan>Invalid email\u003C\u002Fspan>\n\u003C!-- after -->  \u003Cinput id=\"email\" aria-describedby=\"email-err\" aria-invalid=\"true\" \u002F> \u003Cspan id=\"email-err\">Invalid email\u003C\u002Fspan>\n```\n\n## review guidance\n\n- fix critical issues first (names, keyboard, focus, tool boundaries)\n- prefer native HTML before adding aria\n- quote the exact snippet, state the failure, propose a small fix\n- for complex widgets (menu, dialog, combobox), prefer established accessible primitives over custom behavior\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,145,1076,"2026-05-16 13:18:15",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"前端开发","frontend","mdi-language-html5","HTML\u002FCSS\u002FJavaScript\u002F框架相关",1,96,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"3f2dc635-96d8-4178-a192-0fe91e2d3ef7","1.0.0","fixing-accessibility.zip",2278,"uploads\u002Fskills\u002Fec4b7b4a-643b-4c36-90fb-f193b4d6121c\u002Ffixing-accessibility.zip","f6c0c988659cc9c788d5ab381686a09cf1a60dbc460a2b2184cc1a929af4fa58","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":5067}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]