yonathan-boop/Claude - 人間のためのアクセシビリティスキル

antislop-human

アンチスラップ：AIコーディングエージェントのためのルール。人間スキル

antislopシステムの一部です。antislop.md（コア）と併せてお読みください。このスキルは、人間に関わる問題を深く掘り下げます。すなわち、異なる視力や手、環境を持つ人々にとってもUIが使いやすくなければならないという点です。コントラスト、キーボード、フォーカス、状態、そして人々を排除するモバイル上の細部について扱います。

このスキルの使い方

• antislop.mdと一緒に読み込んでください。タスクがUIを構築または編集するときは常にこれを行います。コアはメカニズム（目的テスト、3つのティア、デリバリーゲート）を保持し、このスキルは人間側の深み、すなわち異なる視力、手、環境を持つ人々を排除するUIの部分を保持します。
• 各エントリは同じ構造を持ちます：問題（パターン）、理由（誰を排除するか、なぜ未完成と見なされるか）、修正方法（代わりに何をすべきか）。それぞれに、支配的なコアルールがR-XXとして引用されています。
• アクセシビリティは、最後に付け加えるチェックリストではありません。これは「UIが持続する」（C-4）というコアの約束の一部です。コアのデリバリーゲートは引き続きゲートとして機能し、このファイルの末尾にある「人間スキルチェックリスト」はそれに沿って実行する補足です。
• コントラストチェッカー（計算式 + 参照テーブル + スクリプト）はこのスキルに含まれています。目で確認できないすべての色のペアリングに使用してください。
• このスキルは、人々を排除するモバイル上の細部、すなわちズームと画面上のキーボードのみを保持します。

色とコントラスト

低コントラストテキスト

• 問題： 白または白に近い背景の上に薄いグレーのテキスト、細い本文テキスト、「エレガント」に見えるために選ばれたが読みにくいミュートされたラベル。
• 理由： 視力の弱いユーザーと、明るい光の下で作業するすべての人を排除します。基準を確認せずに行われた視覚的な選択であり、まさにフィルターが捕捉すべき種類のデフォルトです。
• 修正方法： WCAG AAの最小要件（R-25）を満たします。通常テキストは4.5:1、大きいテキスト（18px以上）は3:1。比率を計算し、目視で判断しないでください。

写真やグラデーション上のテキスト

• 問題： 画像やグラデーションの上に直接配置された白いテキストで、画像の一部が明るく、1箇所だけ明るいスポットでチェックされている場合。
• 理由： コントラストは局所的です。画像が明るい部分では、ヒーロー画像がまだ「見栄え」が良くても、テキストは4.5:1を下回ります。R-25は、テキストが通過する領域全体をテストすることを要求し、単一のポイントではありません。
• 修正方法： テキストの背後にスクリムまたは単色のブロックを追加し、最良の場所ではなく最悪の場所で確認します。テキスト領域の一部が不合格であれば、その処理は失敗です。

グレーオングレーの幻覚

• 問題： 「黒の上の濃いグレー」または「白の上の薄いグレー」が、計算なしでAAに合格すると主張される。
• 理由： これは最も一般的なアクセシビリティの幻覚です。目はグレーのペアリングでのコントラストを過大評価し、エージェントはそれがもっともらしいように聞こえるため主張を繰り返します。黒の上の#555555は2.8:1です。不合格です。
• 修正方法： ペアリングが合格したと決して断言しないでください。コントラストチェッカー（後述）を実行するか、計算式を適用します。どちらも不可能な場合は、参照テーブルを使用します。

非テキストコントラスト

• 問題： インタラクティブコンポーネント（ボタン、アイコン、入力境界線、フォーカスインジケーター、チャートセグメント）が、背景と3:1未満の差で区別されている。
• 理由： 非テキストUIは形状とエッジで情報を伝えます。エッジがわずかな色合いしかない場合、視力の弱いユーザーはコントロールを見つけられません。ホバーや選択などの状態にも同じ基準が適用されます。
• 修正方法： すべてのコンポーネントの境界線とすべてのステータスインジケーターに、隣接色との3:1の比率を与えます（WCAG 1.4.11）。アイコンには4.5:1を満たすテキストラベルをペアにします。

コントラストチェッカー

コントラストチェッカーの本拠地。最も便利なものから順に3つの層があります。

スクリプト。 スクリプトランタイムが利用可能でファイルが存在する場合は、手計算ではなくスクリプトを実行してください。スクリプトはこのスキルのフォルダ（contrast-check.py、このSKILL.mdの隣）にあります。macOSとLinuxではpython3、Windowsではpythonで実行します：

python3 "${CLAUDE_SKILL_DIR}/contrast-check.py" "#FFFFFF" "#777777"
# 通常テキスト：FAIL (4.48 < 4.5)
# 大きいテキスト：PASS (4.48 >= 3.0)

${CLAUDE_SKILL_DIR}変数がこのエージェントで利用できない場合は、スクリプトパスをこのスキルのフォルダに直接指定してください。スクリプトは、エージェントがAA合格を幻覚するのを防ぐために存在します。2つの16進色を受け取り、比率と両方のテキストサイズの判定を出力します。ファイルがない場合でも、以下の計算式とテーブルだけで完全に機能します。スクリプトがないことを理由に処理を止めないでください。

計算式 (WCAG 2.x)。

1. コントラスト比 = (L1 + 0.05) / (L2 + 0.05)。ここでL1は明るい方の相対輝度、L2は暗い方です。
2. 1つの色の相対輝度L：各チャンネルを0-1に変換し（c = hex / 255）、線形化します：c <= 0.03928の場合、c_lin = c / 12.92；それ以外の場合、c_lin = ((c + 0.055) / 1.055)^2.4。
3. L = 0.2126*R + 0.7152*G + 0.0722*B。
4. 丸めていない比率と比較します：通常テキストは4.5:1、大きいテキスト（18px以上、R-25に従う）は3:1。表示のためだけに丸めます。したがって、4.498:1のペアリングは4.50と表示され、それでも4.5:1に不合格となります。最大比率は21.0（白の上の黒）です。

参照テーブル（一般的なペアリング、計算式で計算済み）：

ペアリング（テキスト on 背景）	比率	通常テキスト (4.5)	大きいテキスト (3.0)
白の上の黒	21.00	合格	合格
黒の上の白	21.00	合格	合格
#333333の上の白	12.63	合格	合格
#666666の上の白	5.74	合格	合格
白の上の#777777	4.48	不合格	合格
#070707の上の#777777	4.50	不合格	合格
#888888の上の白	3.54	不合格	合格
#999999の上の白	2.85	不合格	不合格
黒の上の#555555	2.82	不合格	不合格

#070707の上の#777777の行はしきい値近くのケースです。4.4983:1は表示のために4.50に丸められますが、それでも4.5:1には不合格です。

テーブルは簡易チェックとして読み、代替として使用しないでください。リストにないペアリング、またはしきい値に近いものは、計算式またはスクリプトを使用します。

キーボード

フォーカスアウトラインの削除

• 問題： 代替フォーカススタイルなしでのoutline: noneまたはoutline: 0。
• 理由： キーボードユーザーは自分がどこにいるかを確認できません。マウスなしでUIを使えなくする最も早い方法であり、R-32はこれを全面的に禁止しています。
• 修正方法： アウトラインを維持するか、隣接色に対して3:1のコントラスト基準を満たす可視の:focus-visibleスタイルで置き換えます。代替スタイルなしでoutline: noneを設定しないでください。

マウスのみのパターン

• 問題： ホバー時のみ開くメニュー、クリックで開くがキーボードでは開かないドロップダウン、キーボードフォールバックのないドラッグアンドドロップ。
• 理由： それぞれがキーボードユーザーと支援技術ユーザーを排除します（R-32）。コントロールがTab、Enter、またはSpaceで到達・操作できない場合、それはあるグループの人々にとって存在しません。
• 修正方法： すべてのインタラクティブ要素はキーボードで到達可能かつ操作可能でなければなりません（R-32）。論理的なタブ順序は視覚的な順序に従い、EnterまたはSpaceでアクティブ化し、ダイアログはEscapeで閉じられるようにします（R-26）。

壊れたタブ順序

• 問題： フォーカスがページ内を飛び回り、コンテンツをスキップし、DOMの順序が視覚的な順序と一致しないために隠し要素に到達する。
• 理由： 視覚的な順序ではなくコードの順序を読み取るタブ順序は、ナビゲーションを予測不能にします（R-32）。ユーザーは位置を見失い、ページが壊れているように感じます。
• 修正方法： ソースの順序を視覚的な順序に合わせ、長いページにはスキップリンクを追加し、ダイアログなどの制御されたフォーカストラップの一部でない限り、実際のコンテンツにtabindex="-1"を設定しないでください。

フォーカスと状態

弱いまたは見えないフォーカスインジケーター

• 問題： 背景と同じ色のフォーカスリング、ホバー時にのみ表示されるリング、または1pxの境界線よりも薄いインジケーター。
• 理由： フォーカスインジケーターは、キーボードユーザーが自分がどこにいるかを知る方法です。コントラスト基準を満たさないか、ホバー時のみ表示される場合、キーボードのみの使用は機能しません（R-32、R-34）。
• 修正方法： すべてのインタラクティブ要素に可視のフォーカスインジケーターを設定し、隣接色に対して3:1、出荷するすべてのテーマで確認します。ダークモードとライトモードの両方でチェックします。

色のみのフィードバック

• 問題： 成功、エラー、ステータスが色のみで伝えられる：赤いエラーテキスト、緑の成功境界線、色付きのチップ、アイコン、ラベル、テキストなし。
• 理由： 色覚異常および視力の弱いユーザーを排除し、強制カラーモードでは完全に消えます。色相の知覚に依存するステータスはステータスではありません（C-4）。
• 修正方法： すべての色信号にテキスト、アイコン、またはパターンをペアにします。エラー状態はまずテキストで表現します：「パスワードは8文字以上である必要があります」、単なる赤い境界線ではありません。

欠落したUI状態

• 問題： 空、ローディング、またはエラー状態のないデータビュー、または存在するが見えない状態：テキストなしのスピナー、説明なしの空の画面。
• 理由： R-27は3つの状態を要求します。アクセシビリティの観点からは、各状態が知覚可能かつ情報提供可能でなければならず、装飾的であってはなりません。コンテキストのないローディングスピナーは、スクリーンリーダーユーザーにはフリーズしたページとして読み取られます。
• 修正方法： すべてのデータビューに3つの状態すべてを用意します（R-27）。それぞれが通知または可視化されます：明示的な空メッセージ、テキスト付きのローディング状態、何が起こり、どう対処すべきかを示すエラー状態。

ズームとモバイル使用

モバイルのレイアウトメカニズム（ブレークポイント、スケール、グリッド、オーバーフロー、タップターゲット）はantislop-layoutmobileの対象です。このセクションは、人々を排除するモバイル上の細部、すなわちズームと画面上のキーボードのみを保持します。

ズームできないテキスト

• 問題： 固定ピクセルのフォントサイズ、または200%ズームでテキストをクリップするoverflow: hiddenのコンテナ。
• 理由： ユーザーはテキストサイズを変更できなければなりません（WCAG 1.4.4）。200%にズームしたときにコンテンツがクリップされたり、横スクロールを強制されたりする場合、テキストは実質的にリサイズ可能ではありません。
• 修正方法： ズームに伴ってリフローする流動的なタイポグラフィ、テキストにクリッピングコンテナを使用しない、狭いビューポートで200%ズーム時にレイアウトが持続することを確認します（R-35）。

モバイルキーボードがフォームを覆う

• 問題： ビューポートの下部にある入力が、画面上のキーボードの背後に隠れ、ビューへのスクロールがなく、入力のためのスペースもない。
• 理由： ユーザーが見たり到達したりできないフォームは、完了できないフォームです。これはモバイルのみの排除です（R-03）。
• 修正方法： 入力がフォーカスされると、キーボードの上にスクロールして表示され、フォーカスされたフィールドが決して覆われないように十分な下部パディングを追加します。実際のデバイスまたはエミュレートされたキーボードでテストします。

人間スキルチェックリスト

タスクがUIを含む場合、コアのデリバリーゲートと共にこれらを実行してください。すべての回答が**「はい」**である必要があります：

• すべてのテキストと背景のペアリングが、コントラストチェッカー（計算式、テーブル、またはスクリプト）で検証されていますか？画像やグラデーション上のテキストも含みますか？（R-25）
• すべてのインタラクティブコンポーネントの境界線とステータスインジケーターが、背景に対して3:1を満たしていますか？（非テキストコントラスト）
• フォーカスインジケーターは可視で、高コントラストで、すべてのテーマのすべてのインタラクティブ要素に存在しますか？（R-32、R-34）
• すべてのインタラクティブ要素がキーボードで到達可能かつ操作可能であり、ダイアログはEscapeで閉じられ、代替なしのoutline: noneはありませんか？（R-32、R-26）
• すべてのデータビューの空、ローディング、エラー状態が存在し、知覚可能で、色のみではありませんか？（R-27、C-4）
• テキストを200%にリサイズしてもクリップされず、モバイルキーボードがフォーカスされた入力を覆うことはありませんか？（R-35）