使い方ガイドへスキップ
fixing-accessibility作者 Julien Thibeaut

Fixing Accessibility スキル。

Claude Code と Codex 向けのデザインレビュースキル。ARIA、キーボード、フォーカス、コントラスト、フォームのエラーを検証・修正します。

  • デザインレビュー & アクセシビリティ
  • レビューレポート
ibelick/ui-skills · skills/fixing-accessibility/SKILL.mdSKILL.md
--- name: fixing-accessibility description: 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. --- ## how to use ## when to apply ## rule categories by priority ## common fixes ## review guidance
2026-09-14 に上流ファイルから読み取ったフロントマターとセクション見出し · 全 4,714 文字

01 できること

fixing-accessibilityスキルがClaude CodeとCodexで行うこと

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

HTMLアクセシビリティのための参照・修正ルールセットで、コーディングエージェント内でインタラクティブなUIを追加・レビューするデザイナーおよび開発者を対象としています。9つのルールカテゴリを優先度と影響度でランク付けし、アクセシブルな名前、キーボードアクセス、フォーカスとダイアログ、ツールの境界(最重要)から、セマンティクス、フォーム、エラー、アナウンス、コントラストと状態、さらにメディアとモーションまでを扱います。

各カテゴリは、アイコンのみのボタンへのaria-label、1を超えるtabindexの禁止、失敗したフィールドへのaria-invalidといった具体的な要件の短いリストです。共通の修正ブロックでは、アイコンのみのボタン、divをボタンとして使うケース、リンクされていないフォームエラーについて、修正前・修正後のHTMLを示しています。また、レビューモードでは各違反について、引用行、1文での理由、コードレベルの修正を報告します。

レビューレポート
プロンプト例を見る ↗

仕組み

  1. 01
    制約をその場に適用する

    素のコマンドを実行すると、そのルールはその会話で行われるあらゆるUI作業に対する常設の制約となります。単発のオーディットパスではありません。

  2. 02
    違反レポートのためにファイルを指定する

    ファイル引数を付けると、そのファイルをすべてのルールに照らして検証し、各違反を引用行またはスニペット、重要性を説明する1文、そしてコードレベルの修正として報告します。

  3. 03
    カテゴリを優先順位に沿って処理する

    ルールは影響度評価付きでランク付けされたカテゴリにグループ化されており、アクセシブルな名前が優先度1に位置し、最重要とマークされています。

  4. 04
    変更を最小限に保つ

    このスキルは、UIの大部分を書き直すべきではないこと、そして修正は最小限かつ的を絞ったものであるべきことを明示しています。

02 適合性を確認

fixing-accessibility スキルを使用するタイミング

この種のデザインレビューが必要な場合は、Claude Code または Codex で fixing-accessibility スキルを使用してください。適合性と制限事項は、スキル自身のファイルから取得されています。

適している場合

  • 既存のインターフェースにボタン、リンク、入力欄、メニュー、ダイアログ、タブ、ドロップダウンを追加または変更する場合。
  • 検証、エラー状態、ヘルパーテキストを備えたフォームを構築する場合。
  • キーボードショートカットやその他のカスタムインタラクションを実装する場合。
  • フォーカス状態、フォーカストラップ、モーダルの動作に取り組んでいる場合。
  • アイコンのみのコントロールをレンダリングする場合、またはホバー時のみのインタラクションや非表示コンテンツを追加する場合。

境界を知る

  • 修正中のアクセシビリティの問題と無関係なコードをリファクタリングする場合。
  • ネイティブのボタン、リンク、入力で同じ役割を果たせる場合に、ロールベースのハックを使う場合。
  • 音声付きメディアを自動再生する場合。

03 スキルの内部

fixing-accessibility スキルが Claude Code と Codex に与えるルール

SKILL.md がエージェントに設定する 8 つの具体的な指示・既定値・制限 — 結果を変える部分です。

  1. アイコンのみのコントロールすべてに名前を付ける

    アイコンのみのボタンには、目に見えるグリフだけでなく、aria-label または aria-labelledby によるアクセシブルな名前が必要です。

  2. 正の tabindex は絶対に使わない

    0 より大きい tabindex 値は完全に除外され、タブ順序は自然な順序に委ねられます。

  3. ダイアログでフォーカスをトラップし、初期設定し、復元する

    モーダルは開いている間フォーカスをトラップし、ダイアログ内に初期フォーカスを設定し、閉じるときにトリガーへフォーカスを戻す必要があります。

  4. エラーを対応するフィールドにリンクする

    メッセージがフィールドと一緒にアナウンスされるように、エラーは aria-describedby で入力欄に結び付ける必要があります。

  5. 検証エラーのあるフィールドを invalid とマークする

    無効なフィールドは、単にエラー用のスタイルを表示するだけでなく、aria-invalid を設定する必要があります。

  6. ネイティブのセマンティクスで既に機能する場合は ARIA を使わない

    ネイティブのセマンティクスが既に問題を解決している場合は aria を追加しません。これはツールの境界の下にある重要な制約として位置付けられます。

  7. フォーカスを常に可視にする

    目に見える代替表示を用意しない限り、フォーカスのアウトラインを削除してはなりません。

  8. UI ライブラリを移行しない

    UI ライブラリの入れ替えは、ユーザーが明示的に要求しない限り対象外です。

04 実際に使う

Claude Code または Codex に fixing-accessibility をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex、またはあなたのエージェントに fixing-accessibility を追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill fixing-accessibility

skills/fixing-accessibility/SKILL.md 用の汎用的な skills CLI 形式です。リポジトリ側で独自のパスを文書化している場合もあります。

スキルに最初のデザインレビュータスクを与える

SKILL.md にはサンプルプロンプトが含まれていません。このスターターはカタログの一行説明から作成されています。タスク行を実際のブリーフに置き換えてください。

Starter prompt
Use the fixing-accessibility skill on the material I attach. What the skill should do here: Audits and fixes ARIA, keyboard, focus, contrast, and form errors. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

ソース:カタログの一行使用例から作成されたスタータープロンプト(SKILL.md からではありません)。

最初の結果を確認

出力を受け入れる前に、トランスクリプトとファイル内で以下を確認してください。

  • 結果はレビューレポートとして提供され、このスキルのカタログに記載されています。
  • エージェントは結果を生成する前に、計画またはトランスクリプト内で fixing-accessibility スキルの名前を挙げます。
  • あなた自身のコンテンツ、名前、数値は出力で変更されずに表示されます。

OpenDesign では、fixing-accessibility を SKILL.md のリンクからインポートします。Plugins → Add → Skill → Import from link を選び、上部バーで選択してください。

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Repository
github.com/ibelick/ui-skills ブランチ main
スキルファイル
skills/fixing-accessibility/SKILL.md 検証時に記録されたコンテンツチェックサム;コミット 79081ab
License
MIT LICENSE より
リポジトリスター数
8,402 ibelick/ui-skills リポジトリ全体の GitHub スナップショット(2026-09-14 取得)。このカタログには 5 つのスキルが含まれています。fixing-accessibility の評価や使用数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません(2026-08-28 確認)。このページには実行記録がありません。
スキル自身による説明
「ARIA ラベル、キーボードナビゲーション、フォーカス管理、色のコントラスト、フォームエラーを含む HTML アクセシビリティの問題を監査して修正します。インタラクティブなコントロール、フォーム、ダイアログを追加する際や、WCAG 準拠をレビューする際に使用してください。」

SKILL.md のフロントマター説明です。ファイル全体は約 4,714 文字です。GitHub で完全なファイルを読む。

Fixing Accessibility

実際のデザインレビュータスクで fixing-accessibility を実行

OpenDesign をダウンロードし、SKILL.md リンクから fixing-accessibility をインポートして、上記のプロンプトを貼り付け、結果の前に計画を確認してください。

ターミナル
npx skills add https://github.com/ibelick/ui-skills --skill fixing-accessibility

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート/スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応