frontend-accessibility
フロントエンドのアクセシビリティを改善する
フロントエンドチームは、日常的なUI作業の中で、キーボード、セマンティック、スクリーンリーダーに関する要件を見落としがちです。このスキルは、Claude、Codex、Claude Code がインターフェースの作成や編集を行う際にアクセシビリティチェックを適用できるよう支援します。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の 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.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「frontend-accessibility」を使用しています。 ログインフォームでプレースホルダーのみのラベルと、色のみのエラー状態を使用している。
期待される結果:
- ユーザーが入力した後も表示され続ける永続的なラベルを追加します。
- アクセシブルな説明を使ってエラーをフィールドに関連付けます。
- エラーが色だけに依存しないように、テキストまたはアイコンを追加します。
「frontend-accessibility」を使用しています。 モーダルが設定ボタンから開き、複数のフォームコントロールを含んでいる。
期待される結果:
- 開いたときにフォーカスをダイアログ内へ移動します。
- 閉じるまでキーボードフォーカスをダイアログ内に保持します。
- 閉じた後にフォーカスを設定ボタンへ戻します。
「frontend-accessibility」を使用しています。 ページに、クリック可能なタイトルとアイコンを持つ複数のカードがある。
期待される結果:
- インタラクティブ要素には実際のリンクまたはボタンを使用します。
- アイコンのみのコントロールにアクセシブルな名前を付けます。
- 見出しが明確なページ階層に従うようにします。
セキュリティ監査
安全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)
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。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 スコア
このスコアの理由 証拠の信頼度: 高作成できるもの
コンポーネントのマークアップをレビューする
コンポーネントがマージされる前に、不足しているラベル、弱いセマンティクス、キーボード操作上の障壁を見つけます。
デザインシステムのパターンを改善する
フォーム、メニュー、ダイアログ、再利用可能なコントロールに一貫したアクセシビリティルールを適用します。
アクセシビリティQAメモを準備する
キーボードフロー、フォーカス順序、見出し、スクリーンリーダー対応に関する的を絞ったレビューメモを作成します。
これらのプロンプトを試す
このUIのアクセシビリティの基本をレビューしてください。セマンティックHTML、ラベル、見出し、altテキスト、明らかなキーボード操作の問題に注目してください。
このフォームのアクセシビリティを改善してください。ラベル、説明、必須フィールド、バリデーションメッセージ、フォーカス動作、エラー通知をチェックしてください。
このインタラクティブコンポーネントのキーボード操作とフォーカス動作を定義してください。想定されるタブ順序、フォーカスの戻り先、ARIAの使用、Escapeキーの動作を含めてください。
この機能のアクセシビリティリスクを監査してください。ユーザーへの影響ごとに問題を分類し、コードレベルの修正案を提案し、ブラウザーまたはスクリーンリーダーでのテストが必要な箇所を記してください。
ベストプラクティス
- ARIAを追加する前に、ネイティブHTMLコントロールを優先します。
- すべてのインタラクティブな経路をキーボードナビゲーションでテストします。
- 自動チェックに加えて、手動レビューと支援技術によるテストを組み合わせます。
回避
- 完全なキーボード対応なしに、divまたはspan要素をコントロールとして使用しないでください。
- 視覚的なスタイリングのためにフォーカスインジケーターを非表示にしないでください。
- エラー、ステータス、選択状態を伝えるために色だけに依存しないでください。