@d-zero/a11y-check 0.4.5 → 0.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +152 -0
  2. package/package.json +11 -11
package/README.md CHANGED
@@ -1 +1,153 @@
1
1
  # `@d-zero/a11y-check`
2
+
3
+ ウェブサイトのアクセシビリティチェックを行うツールです。
4
+
5
+ - Puppeteerを使用してページのアクセシビリティを検証します
6
+ - Googleスプレッドシートに詳細なレポートを出力します
7
+ - 複数のシナリオ（axe、01、02）でチェックを実行可能
8
+ - スクリーンショット機能付き
9
+
10
+ ## CLI
11
+
12
+ ```sh
13
+ npx @d-zero/a11y-check -f <listfile> [options]
14
+ npx @d-zero/a11y-check <url>... [options]
15
+ ```
16
+
17
+ リストをファイルから読み込むか、URLを直接指定して実行します。
18
+
19
+ ### オプション
20
+
21
+ - `-f, --listfile <file>`: URLリストを持つファイルのパス
22
+ - `<url>`: 対象のURL（複数指定可能）
23
+ - `-s, --screenshot`: スクリーンショットを撮影する（デフォルト: false）
24
+ - `-o, --out <url>`: GoogleスプレッドシートのURL（デフォルト: 標準出力）
25
+ - `--scenarios <scenarios>`: チェックシナリオ（カンマ区切り、利用可能: axe,01,02、デフォルト: axe）
26
+ - `--cache <true|false>`: キャッシュを使用する（デフォルト: true）
27
+ - `--cacheDir <dir>`: キャッシュディレクトリ（デフォルト: .cache）
28
+ - `--locale <locale>`: ロケール設定
29
+ - `--limit <number>`: 並列実行数の上限
30
+ - `--debug`: デバッグモード（デフォルト: false）
31
+ - `--verbose`: 詳細ログモード（デフォルト: false）
32
+
33
+ ### 使用例
34
+
35
+ ```sh
36
+ # 基本的な使用
37
+ npx @d-zero/a11y-check https://example.com
38
+
39
+ # ファイルから読み込み
40
+ npx @d-zero/a11y-check -f urls.txt
41
+
42
+ # スクリーンショット付きで実行
43
+ npx @d-zero/a11y-check https://example.com --screenshot
44
+
45
+ # 結果をGoogleスプレッドシートに出力
46
+ npx @d-zero/a11y-check -f urls.txt -o https://docs.google.com/spreadsheets/d/xxx/edit
47
+ ```
48
+
49
+ #### URLリストのファイルフォーマット
50
+
51
+ ```txt
52
+ https://example.com
53
+ https://example.com/a
54
+ https://example.com/b
55
+ ABC https://example.com/c
56
+ XYZ https://example.com/xyz/001
57
+ # コメント
58
+ # https://example.com/d
59
+ ```
60
+
61
+ URLの手前に任意のIDを付与することができます。ホワイトスペースで区切ることでIDとURLを分けることができます。
62
+ IDが指定されていない場合は、URLのみが記録されます。
63
+
64
+ `#`で始まる行はコメントとして無視されます。
65
+
66
+ ## 設定ファイル
67
+
68
+ Frontmatterを使用してページフックを設定できます。
69
+
70
+ ```txt
71
+ ---
72
+ hooks:
73
+ - ./hook1.cjs
74
+ - ./hook2.mjs
75
+ ---
76
+
77
+ https://example.com
78
+ https://example.com/a
79
+ ︙
80
+ ```
81
+
82
+ **注意**: 設定ファイルでは`hooks`のみ設定可能です。その他のオプション（`scenarios`, `screenshot`, `locale`, `cache`, `cacheDir`など）はCLIオプションとして指定してください。
83
+
84
+ ### 利用可能なシナリオ
85
+
86
+ - `axe`: axe-coreを使用したアクセシビリティチェック
87
+ - `01`: カスタムシナリオ01
88
+ - `02`: カスタムシナリオ02
89
+
90
+ ### ページフック
91
+
92
+ `hooks`に配列としてスクリプトファイルのパスを渡すと、ページを開いた後にそれらのスクリプトを実行します。
93
+
94
+ ```js
95
+ /**
96
+ * @type {import('@d-zero/puppeteer-page-scan').PageHook}
97
+ */
98
+ export default async function (page, { name, width, resolution, log }) {
99
+ // 非同期処理可能
100
+ // page: PuppeteerのPageオブジェクト
101
+ // name: サイズ名
102
+ // width: ウィンドウ幅
103
+ // resolution: 解像度
104
+ // log: ロガー
105
+
106
+ // ログイン処理の例
107
+ log('login');
108
+ await page.type('#username', 'user');
109
+ await page.type('#password', 'pass');
110
+ await page.click('button[type="submit"]');
111
+ await page.waitForNavigation();
112
+ log('login done');
113
+ }
114
+ ```
115
+
116
+ ## Googleスプレッドシート出力
117
+
118
+ `-o`オプションでGoogleスプレッドシートのURLを指定すると、詳細なレポートが出力されます。
119
+
120
+ ### 必要な環境変数
121
+
122
+ Googleスプレッドシートに出力するには、以下の環境変数が必要です：
123
+
124
+ ```bash
125
+ export GOOGLE_AUTH_CREDENTIALS='/path/to/credential.json'
126
+ ```
127
+
128
+ クレデンシャルファイルは、Google Cloud Consoleの[APIとサービス](https://console.cloud.google.com/apis/credentials)から**OAuth 2.0 クライアント ID**（アプリケーションの種類は**デスクトップ**）を発行してダウンロードします。
129
+
130
+ ### 出力されるレポート項目
131
+
132
+ - No.: 連番
133
+ - 対象画面URL: チェック対象のURL
134
+ - テスト方法: 使用したシナリオ
135
+ - 日時: チェック実行日時
136
+ - パーツ: コンポーネント名
137
+ - 環境: 実行環境
138
+ - 対象箇所: 問題のある要素
139
+ - AS IS: 現在の状態
140
+ - TO BE: 改善すべき状態
141
+ - TO BE(補足): 補足説明
142
+ - WCAGバージョン: WCAGのバージョン
143
+ - 達成基準番号: WCAGの達成基準
144
+ - 適合レベル: A/AA/AAA
145
+ - スクリーンショット: スクリーンショットのURL
146
+
147
+ ## 認証
148
+
149
+ ### Basic認証
150
+
151
+ Basic認証が必要なページの場合はURLにユーザー名とパスワードを含めます。
152
+
153
+ 例: `https://user:pass@example.com`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@d-zero/a11y-check",
3
- "version": "0.4.5",
3
+ "version": "0.4.7",
4
4
  "description": "Accessibility Checker CLI",
5
5
  "author": "D-ZERO",
6
6
  "license": "MIT",
@@ -24,20 +24,20 @@
24
24
  "clean": "tsc --build --clean"
25
25
  },
26
26
  "dependencies": {
27
- "@d-zero/a11y-check-axe-scenario": "0.4.4",
28
- "@d-zero/a11y-check-core": "0.5.4",
29
- "@d-zero/a11y-check-scenarios": "0.4.4",
30
- "@d-zero/cli-core": "1.1.1",
31
- "@d-zero/google-auth": "0.4.2",
32
- "@d-zero/google-sheets": "0.3.4",
33
- "@d-zero/puppeteer-page-scan": "4.1.0",
34
- "@d-zero/readtext": "1.1.8",
27
+ "@d-zero/a11y-check-axe-scenario": "0.4.6",
28
+ "@d-zero/a11y-check-core": "0.5.6",
29
+ "@d-zero/a11y-check-scenarios": "0.4.6",
30
+ "@d-zero/cli-core": "1.1.2",
31
+ "@d-zero/google-auth": "0.4.3",
32
+ "@d-zero/google-sheets": "0.4.0",
33
+ "@d-zero/puppeteer-page-scan": "4.2.1",
34
+ "@d-zero/readtext": "1.1.9",
35
35
  "@d-zero/shared": "0.9.2",
36
36
  "ansi-colors": "4.1.3",
37
37
  "dayjs": "1.11.18",
38
- "dotenv": "17.2.1",
38
+ "dotenv": "17.2.3",
39
39
  "front-matter": "4.0.2",
40
40
  "minimist": "1.2.8"
41
41
  },
42
- "gitHead": "8081edac801400fed7c0b7ebeccc0ce66ccfe131"
42
+ "gitHead": "85b9a1f15d2db8798cf24a6a3f035cee1db6ba3d"
43
43
  }