opquast-digital-quality

Opquast デジタル品質のベストプラクティス

正規のソース：mgifford/ACCESSIBILITY.md の examples/OPQUAST_DIGITAL_QUALITY_BEST_PRACTICES.md このスキルはこのファイルをもとに作成されています。判断に迷った場合は、例を正としてください。

ウェブプロジェクトの構築またはレビュー時に、Opquast デジタル品質チェックリスト （バージョン 5、2025-2030）を適用してください。このフレームワークには、コンテンツ、プライバシー、E コマース、 フォーム、アクセシビリティ、セキュリティ、パフォーマンスなどを対象とする、14 カテゴリにわたる 245 のルールが含まれています。

ルールは Creative Commons BY-SA 4.0 のもとで公開されています。 エージェントはルールの文言を参照、引用できます。Opquast を明記し、 継承ライセンスを遵守してください。派生物にも同じライセンスを適用する必要があります。 正規の情報源については opquast.com をご覧ください。

---

重大度の尺度（このスキル）

レベル	意味
Critical	あるユーザーグループのアクセス、購入、またはタスクの完了を完全に妨げる
Serious	アクセスまたはユーザビリティを大幅に損なう。合理的な回避策を期待できない
Moderate	不便を生じさせる。回避策はあるが負担が大きい
Minor	ベストプラクティスからの逸脱。影響はわずか

カテゴリごとの重大度の目安：

• セキュリティの不備（HTTPS、ヘッダー、パスワード）：Critical から Serious
• フォームの不備（ラベル、エラー処理）：Critical から Serious
• ナビゲーションの不備（キーボード、フォーカス）：Critical から Serious
• 画像／メディアの代替テキスト／キャプションの欠落：Critical
• プライバシーポリシーの欠落：Serious
• プレゼンテーションのコントラスト：Serious、ズームの阻止：Serious
• コンテンツ、リンク、識別：ほとんどの場合、Moderate から Minor
• サーバー／パフォーマンス、ニュースレター、国際化：ほとんどの場合、Minor

---

このスキルを使用する場面

• 新しいウェブサイトまたはウェブアプリケーションを構築するとき
• 既存のサイトの品質をレビューまたは監査するとき
• アクセシビリティ、セキュリティ、プライバシー機能を実装するとき
• E コマースのフロー、フォーム、ナビゲーションシステムを作成するとき
• 品質基準を満たす必要がある HTML／CSS コードを生成するとき

---

カテゴリ別クイックリファレンス（14カテゴリにわたる245ルール）

カテゴリ	ルール	主な要件
コンテンツ	1–14	メタデータ（説明＋OGタグ）、日付の明記、略語には<abbr>を使用、グラフにはデータテーブルを使用、広告の表示、モデレーション／不正行為の報告手段
個人データ／プライバシー	15–29	フッターにプライバシーリンクを配置、データへのアクセス／変更手順を文書化、第三者サービスのみを使ったログインを不可にする、認証失敗時には一般的なメッセージを表示、Referrer-Policy、機密データにはHTTPSを使用、URLに機密データを含めない
Eコマース	30–68	オプトインを事前選択しない、購入手続き前に在庫状況／配送時間／費用を表示、税を含む価格を明記、2種類以上の支払い方法、注文確認メール、オンラインで請求書を発行
フォーム	69–98	<label for="...">、形式／大文字・小文字の区別に関するヒント、必須項目をテキストで明示、パスワードの強度表示＋表示／非表示機能、aria-invalid、aria-describedby、エラー発生時に入力データを保持、適切なinput type／autocomplete、貼り付けを禁止しない、無効化したボタンにaria-hiddenを設定しない
識別情報	99–115	ページごとに一意のタイトル（Page | Site）、lang属性、ファビコン、フッターに住所／電話番号を掲載、2つ以上の連絡方法、対応時間／営業時間を明記
画像／メディア	116–127	意味のあるalt、装飾用には空のalt=""、画像リンクのaltにはリンク先を記述、文字起こし＋同期した字幕、自動再生をしない、一時停止可能なメディア
国際化	128–135	国際電話の国番号、住所に国名を含める、hreflang／目に見える言語表示、<html>とインラインの言語変更箇所にlangを指定、翻訳版へのリンクラベル
リンク	136–152	内容が分かるアンカーテキスト（「ここをクリック」は使用しない）、tel:プロトコル、新しいタブで開くことを警告、ダウンロードするファイルの種類＋サイズ、内部リンク切れをなくす
ナビゲーション	153–172	強制ログインなしで公開コンテンツにアクセス可能、ナビゲーションのポップアップを表示しない、ホームページへのリンク、パンくずリスト、一貫したナビゲーション配置、アイコンラベルを表示、スキップリンク、:focus-visibleを表示、論理的なタブ順序、サイト内検索、サイトマップ
ニュースレター	173–179	オプトインを確認、配信停止リンク、ワンクリックで配信停止、アーカイブをオンラインで公開、配信頻度を明記
表示	180–196	一貫したビジュアルアイデンティティ、色だけで情報を伝えない、コントラスト比は通常のテキストで4.5:1／大きなテキストで3:1、スタイルを無効にしても意味が伝わる、タッチターゲットは24×24px以上、ズームを禁止しない、レスポンシブレイアウト、印刷用スタイル
セキュリティ	197–217	全ページでHTTPS＋HSTSを使用、混在コンテンツをなくす、セルフサービスのパスワードリセット、パスワードを平文で保存しない、X-Content-Type-Options、X-Frame-Options／frame-ancestors、CSP、サードパーティスクリプトにSRIを使用、サーバーのバージョン情報を公開しない、SPF／DKIM／DMARC
サーバー／パフォーマンス	218–230	robots.txt、sitemap.xml、適切な404ステータス（200にしない）、ナビゲーション付きのカスタムエラーページ、gzip／Brotli、キャッシュ制御ヘッダー、CSS／JSを圧縮
構造／コード	231–244	機械可読な日付（<time datetime>）、UTF-8、一意のID、meta refreshを使用しない、見出し階層h1>h2>h3、スキャン画像ではなくタグ付きPDF、データテーブルに<caption>／<th scope>を使用

---

ワークフロー

1. 該当するカテゴリを特定する

14のカテゴリすべてが、すべてのプロジェクトに該当するわけではありません。

• すべてのウェブプロジェクト：コンテンツ、フォーム、識別情報、画像／メディア、リンク、 ナビゲーション、表示、セキュリティ、サーバー／パフォーマンス、構造／コード
• 該当する場合に追加：Eコマース（オンライン販売）、ニュースレター（メールマーケティング）、 国際化（多言語対応）、個人データ／プライバシー（ユーザーアカウント／データ収集）

2. ルールの全文を参照する

ルールの全文、コード例、ルール番号については、 Opquastの公式ガイド または公式チェックリスト を直接参照してください。このスキルは、245のルールすべてを逐語的に再掲するのではなく、 カテゴリと特に重要なパターンをまとめています。

3. 開発中に適用する

コードを生成またはレビューするときは、ルールを実装要件として適用します。

• HTML の生成：メタデータ、セマンティックな構造、アクセシブルなフォーム、適切な代替テキストを含めます
• CSS の生成：コントラスト比、フォーカススタイル、レスポンシブレイアウト、印刷用スタイルを確保します
• サーバー設定：セキュリティヘッダーを設定し、圧縮を有効にして、キャッシュを構成します
• コンテンツのレビュー：日付形式、リンクテキスト、略語の展開を確認します

4. 検証する

実装後、該当するルールに照らして検証します。一般的な自動チェックは次のとおりです。

• HTML の検証と見出し階層
• 色のコントラスト比（通常のテキストは 4.5:1、大きなテキストは 3:1）
• alt 属性の不足
• フォームラベルの不足
• セキュリティヘッダーの有無
• 内部リンク切れ

---

重要なコードパターン

ページテンプレートの最低要件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Page description here." />
  <meta property="og:title" content="Page Title | Site Name" />
  <meta property="og:description" content="Page description for sharing." />
  <title>Page Title | Site Name</title>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head>
<body>
  <a href="#main" class="skip-link">Skip to main content</a>
  <nav aria-label="Main navigation"></nav>
  <main id="main"></main>
  <footer>
    <a href="/privacy">Privacy Policy</a>
    <a href="/terms">Terms of Use</a>
  </footer>
</body>
</html>

アクセシブルなフォームフィールド

ネイティブ入力要素では、ネイティブの required を使用します。required がある場合、aria-required は冗長なので、アクセシビリティツリーのノイズを避けるために省略してください（ルール 98 の原則：ネイティブのセマンティクスと重複する ARIA 状態を追加しない）。aria-required は、カスタムウィジェット（role="combobox" など）でのみ使用します。また、必須状態は見えるテキストでも示してください。アスタリスクだけでは、慣例について説明がない限り不十分です（ルール 71）。

<label for="email">
  Email address <span aria-hidden="true">*</span> <span class="hint">(required)</span>
  <span class="hint" id="email-hint">Example: [email protected]</span>
</label>
<input id="email" type="email" autocomplete="email"
  required aria-describedby="email-hint" />

パスワードフィールド（ルール 75–76、202–205）

<label for="password">Password</label>
<div class="password-wrapper">
  <input id="password" type="password" aria-describedby="password-hint" />
  <button type="button" aria-controls="password" aria-pressed="false">
    Show password
  </button>
</div>

セキュリティヘッダー（サーバー設定）

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
Content-Security-Policy: default-src 'self';
Referrer-Policy: strict-origin-when-cross-origin

レスポンスヘッダーでサーバーソフトウェアのバージョンを公開しないでください（ルール 213）。Server と X-Powered-By を削除するか、難読化してください。サードパーティのスクリプト／スタイルシートにはサブリソース整合性を適用します（ルール 214）。

<script src="https://cdn.example.com/library.min.js"
  integrity="sha384-<hash>" crossorigin="anonymous"></script>

フォーカスとコントラストのスタイル

:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}
body {
  color: #1a1a1a; /* ~16:1 contrast on white */
  background: #ffffff;
}

印刷用スタイル

@media print {
  nav, header, footer, .sidebar, .no-print { display: none; }
  body { font-size: 12pt; color: #000; }
  a[href]::after { content: " (" attr(href) ")"; }
}

アクセシブルなデータテーブル（ルール 242–243）

<table>
  <caption>Quarterly revenue by region (USD thousands)</caption>
  <thead>
    <tr><th scope="col">Region</th><th scope="col">Q1</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">North America</th><td>1,200</td></tr>
  </tbody>
</table>

---

WCAG との関係

Opquast は WCAG 2.2 を置き換えるのではなく、補完するものです。主な対応関係は次のとおりです。

Opquast ルール	WCAG 基準
116（装飾画像 alt=""）	1.1.1 非テキストコンテンツ（A）
117-118（意味のある代替テキスト）	1.1.1 非テキストコンテンツ（A）
121-122（トランスクリプト、キャプション）	1.2.2、1.2.3、1.2.5
124-127（自動再生なし、一時停止可能）	1.4.2、2.2.2
131-132（lang 属性）	3.1.1、3.1.2
164（スキップリンク）	2.4.1 ブロックスキップ（A）
165（フォーカスの可視化）	2.4.7、2.4.11 フォーカスの可視性／外観
166（キーボードで操作可能）	2.1.1 キーボード（A）
167（論理的なタブ順序）	2.4.3 フォーカス順序（A）
181（色だけに頼らない）	1.4.1 色の使用（A）
182（コントラスト）	1.4.3、1.4.6、1.4.11 コントラスト
186（タッチターゲットは最小 24×24px）	2.5.8 ターゲットサイズの最小値（AA、WCAG 2.2）
193（ズームの無効化なし）	1.4.4 テキストのサイズ変更（AA）
69-70（ラベル、説明）	1.3.1、3.3.2
79-80（エラーの特定）	3.3.1、3.3.3

Opquast を総合的な品質基準として使用し、完全なアクセシビリティ準拠のために WCAG のテストを追加します。

---

サステナビリティとの関連

Opquast の複数のカテゴリは、SUSTAINABILITY.md および Web サステナビリティガイドラインと直接関連しています。

• サーバー／パフォーマンス（ルール 226-230）：圧縮、キャッシュ、縮小化により、ページビューごとのデータ転送量とエネルギー消費を直接削減します
• プレゼンテーション（ルール 193）：ズームを妨げないこと、（ルール 194）：レスポンシブレイアウトにより、モバイル向けの別サイトを用意する必要性を減らします
• 構造／コード（ルール 239）：meta refresh を使用しないことで、不要なページ再読み込みを避けます

Opquast のサーバー／パフォーマンスのルールを適用する際は、二酸化炭素排出量を考慮した配信とアセットの最適化について追加の指針を得るため、SUSTAINABILITY.md も参照してください。

---

完了基準チェックリスト

すべてのプロジェクトに適用します。対象外のカテゴリは省略してください。

コンテンツと識別情報

• すべてのページに <meta name="description"> と OG タグがある
• Page | Site 形式の一意な <title> がある
• <html lang="..."> があり、値が正しい
• <link rel="icon"> がある
• フッターからプライバシーポリシーにリンクしている
• 連絡方法が少なくとも2つ用意されている

フォーム

• すべてのフィールドに、プログラムで関連付けられた <label> がある
• ネイティブの required を使用し、ネイティブ入力要素では aria-required を省略している
• 必須であることを、アスタリスクや色だけに頼らず、表示されるテキストで示している
• 無効なフィールドに aria-invalid="true" を設定している
• エラーメッセージを aria-describedby で関連付け、エラー発生時も入力済みデータを保持している
• 適切な input type と autocomplete の値を使用している
• 貼り付けを禁止していない。無効なボタンを aria-hidden で隠していない

画像とメディア

• 装飾画像に alt="" を設定している
• 情報を伝える画像には内容を説明する alt を設定し、画像リンクではリンク先を説明している
• すべての動画に同期した字幕がある
• すべての音声にテキストのトランスクリプトがある
• 自動再生（音声または動画）がなく、すべてのメディアを一時停止できる

ナビゲーションとキーボード

• スキップリンクがあり、正常に機能する
• :focus-visible のスタイルが定義されている。代替手段なしに outline: none を使用していない
• すべてのコンテンツをキーボードで操作でき、タブ順序が論理的である
• パンくずリストなど、現在位置を示す機能がある

表示

• コントラスト比が通常のテキストでは 4.5:1 以上、大きなテキストと UI コンポーネントでは 3:1 以上である
• 色だけで情報を伝えていない
• user-scalable=no と maximum-scale を使用していない
• タッチターゲットが 24×24px 以上（44×44 を推奨）
• 印刷用スタイルでナビゲーションを非表示にし、リンク URL を表示する

セキュリティ

• すべてのページで HTTPS を使用し、HTTP から HTTPS にリダイレクトし、混在コンテンツがない
• HSTS ヘッダーがある
• X-Content-Type-Options: nosniff がある
• X-Frame-Options または CSP の frame-ancestors がある
• CSP ヘッダーがある
• すべてのサードパーティ製スクリプトとスタイルシートに SRI を設定している
• サーバーやフレームワークのバージョンを示すヘッダーを公開していない

サーバーとパフォーマンス

• robots.txt と sitemap.xml がある
• ページが見つからない場合、適切な 404 ステータスを返す（200 ではない）
• 圧縮（gzip または Brotli）が有効になっている
• 静的アセットに Cache-Control ヘッダーを設定している
• CSS と JS を圧縮している

構造とコード

• すべての <head> に <meta charset="UTF-8"> がある
• ページ内に重複する id 属性がない
• <meta http-equiv="refresh"> を使用していない
• 見出しの階層が正しい（h1 > h2 > h3、階層を飛ばさない）
• データテーブルに <caption> と <th scope="..."> がある
• 内部 PDF にタグを付けている（テキストを選択可能）。スキャン画像ではない

---

WCAG の主な達成基準

上記の WCAG 関連表を参照してください。Opquast は WCAG 2.2 AA のすべてを網羅し、セキュリティ、プライバシー、電子商取引、パフォーマンスの分野まで大きく範囲を広げています。

---

参考資料

• ベストプラクティスガイド全文
• Opquast デジタル品質チェックリスト — CC-BY-SA 4.0。出典を明記すればルールの文言を引用できます
• opquast.com — 権威ある情報源、トレーニング、認定
• TRUSTED_SOURCES.yaml — id: opquast、id: opquast-checklist
• SUSTAINABILITY.md — サーバーとパフォーマンスに関するルールは WSG に準拠

基準の対象期間： これらのルールは、WCAG 2.2 AA と Opquast v5 （2025-2030）を対象としています。WCAG 3.0 は策定中です。 最新情報：https://www.w3.org/TR/wcag-3.0/