技能 frontend-accessibility
📦
frontend-accessibility
內容修訂 r1 安全 📁 檔案系統存取
改善前端無障礙性
前端團隊在例行 UI 工作中經常忽略鍵盤、語意和螢幕閱讀器需求。此技能會引導 Claude、Codex 和 Claude Code 在建立或編輯介面時套用無障礙檢查。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "frontend-accessibility" from https://skillstore.io/skills/eis-its-frontend-accessibility.md and its manifest at https://skillstore.io/api/skills/eis-its-frontend-accessibility/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「frontend-accessibility」。 登入表單使用僅有 placeholder 的標籤和僅以色彩表示的錯誤狀態。
預期結果:
- 新增使用者輸入後仍保持可見的持續性標籤。
- 透過無障礙描述將錯誤連接到欄位。
- 新增文字或圖示，讓錯誤不只依賴色彩呈現。
正在使用「frontend-accessibility」。 彈出視窗從設定按鈕開啟，並包含多個表單控制項。
預期結果:
- 在對話框開啟時將焦點移入其中。
- 在對話框關閉前，將鍵盤焦點保持在對話框內。
- 關閉後將焦點返回設定按鈕。
正在使用「frontend-accessibility」。 頁面有多張卡片，其中包含可點擊的標題和圖示。
預期結果:
- 互動元素使用真正的連結或按鈕。
- 為僅有圖示的控制項提供無障礙名稱。
- 確保標題遵循清楚的頁面階層。
安全審計
安全v10 • 2026/7/9 開啟版本化報告
The only static finding is a relative Markdown link that uses parent directory segments to reference an accessibility standards document. This is not executable filesystem access, and I found no prompt injection, network activity, or data exfiltration intent in SKILL.md.
1
已掃描檔案
30
分析行數
0
複核項目
0
已忽略的誤報
風險因素
📁 檔案系統存取 (1)
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/eis-its-frontend-accessibility/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/eis-its-frontend-accessibility?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/eis-its-frontend-accessibility?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/eis-its-frontend-accessibility/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/eis-its-frontend-accessibility.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>學術引用 (APA · BibTeX · CFF)
APA 引用
EIS-ITS. (2026). frontend-accessibility security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/eis-its-frontend-accessibility/audits/10BibTeX 引用
@techreport{eis-its-eis-its-frontend-accessibility-2026,
author = {EIS-ITS},
title = {frontend-accessibility security audit report (audit version 10)},
institution = {Skillstore},
year = {2026},
number = {10},
url = {https://skillstore.io/skills/eis-its-frontend-accessibility/audits/10},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-accessibility security audit report (audit version 10)"
version: "unspecified"
type: report
authors:
- name: "EIS-ITS"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/eis-its-frontend-accessibility/audits/10"
identifiers:
- type: other
value: "skillstore:eis-its-frontend-accessibility:audit:10"
description: "Skillstore immutable audit report identifier"
比較變體
2 個可安裝變體每位作者的技能都保留為獨立的可安裝項目。推薦變體依 Skillstore 證據排序。
為何此變體排名第一
Skillstore 評分最高
Skillstore 評分
評分依據 證據置信度: 高 55
架構
85
可維護性
87
內容
70
社群
91
規範符合度
你可以打造什麼
審查元件標記
在元件合併前找出缺少的標籤、薄弱的語意和鍵盤障礙。
改善設計系統模式
將一致的無障礙規則套用到表單、選單、對話框和可重用控制項。
準備無障礙 QA 註記
為鍵盤流程、焦點順序、標題和螢幕閱讀器支援建立聚焦的審查註記。
試試這些提示
檢查基本標記
Review this UI for accessibility basics. Focus on semantic HTML, labels, headings, alt text, and obvious keyboard issues.
修正表單
Improve this form for accessibility. Check labels, descriptions, required fields, validation messages, focus behavior, and error announcement.
設計鍵盤互動
Define the keyboard and focus behavior for this interactive component. Include expected tab order, focus return, ARIA use, and escape behavior.
規劃 WCAG 補救
Audit this feature for accessibility risks. Group issues by user impact, propose code-level fixes, and note what needs browser or screen reader testing.
最佳實務
- 新增 ARIA 前，優先使用原生 HTML 控制項。
- 使用鍵盤導覽測試每一條互動路徑。
- 將自動化檢查與人工審查及輔助科技測試搭配使用。
避免
- 不要在沒有完整鍵盤支援的情況下，將 div 或 span 元素作為控制項使用。
- 不要為了視覺樣式隱藏焦點指示器。
- 不要只依賴色彩來傳達錯誤、狀態或選取。
常見問題
此技能是否保證符合 WCAG？
否。它提供實務指引，但最終合規仍需要測試、審查和組織核准。
它能協助 React 或 Vue 元件嗎？
可以。此技能適用於 HTML 範本、JSX、元件標記和常見前端模式。
它會取代自動化無障礙測試嗎？
否。請將它與自動化工具、人工鍵盤測試和輔助科技檢查搭配使用。
我應該何時使用此技能？
在建立、修改或審查前端 UI 程式碼時使用它，尤其是表單和互動元件。
它涵蓋螢幕閱讀器相關考量嗎？
是。它會引導名稱、角色、描述、公告、標題和語意結構。
它能協助處理色彩對比嗎？
可以。它會提示審查對比，並在意義重要時要求使用非色彩指示。