@d-zero/a11y-check 0.10.2 → 0.10.4
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.
- package/README.md +20 -128
- package/package.json +10 -10
package/README.md
CHANGED
|
@@ -1,75 +1,33 @@
|
|
|
1
1
|
# `@d-zero/a11y-check`
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
ウェブサイトのアクセシビリティチェック CLI。Puppeteer でページを検証し、Google スプレッドシートにレポート出力する。
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
- Googleスプレッドシートに詳細なレポートを出力します
|
|
7
|
-
- 複数のシナリオ(axe、01、02)でチェックを実行可能
|
|
8
|
-
- スクリーンショット機能付き
|
|
9
|
-
|
|
10
|
-
## CLI
|
|
5
|
+
## Installation
|
|
11
6
|
|
|
12
7
|
```sh
|
|
13
|
-
|
|
14
|
-
npx @d-zero/a11y-check <url>... [options]
|
|
8
|
+
yarn add @d-zero/a11y-check
|
|
15
9
|
```
|
|
16
10
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
### オプション
|
|
20
|
-
|
|
21
|
-
- `-v, --version`: バージョンを表示
|
|
22
|
-
- `-f, --listfile <file>`: URLリストを持つファイルのパス
|
|
23
|
-
- `<url>`: 対象のURL(複数指定可能)
|
|
24
|
-
- `-s, --screenshot`: スクリーンショットを撮影する(デフォルト: false)
|
|
25
|
-
- `-o, --out <url>`: GoogleスプレッドシートのURL(デフォルト: 標準出力)
|
|
26
|
-
- `-c, --credentials <file>`: Google認証用のクレデンシャルJSONファイルのパス(または環境変数`GOOGLE_AUTH_CREDENTIALS`で指定)
|
|
27
|
-
- `--scenarios <scenarios>`: チェックシナリオ(カンマ区切り、利用可能: axe,01,02、デフォルト: axe)
|
|
28
|
-
- `--cache <true|false>`: キャッシュを使用する(デフォルト: true)
|
|
29
|
-
- `--cacheDir <dir>`: キャッシュディレクトリ(デフォルト: .cache)
|
|
30
|
-
- `--locale <locale>`: ロケール設定
|
|
31
|
-
- `--limit <number>`: 並列実行数の上限
|
|
32
|
-
- `--interval <ms>`: 並列実行間の間隔(デフォルト: なし)
|
|
33
|
-
- 数値または"min-max"形式でランダム範囲を指定可能
|
|
34
|
-
- `--debug`: デバッグモード(デフォルト: false)
|
|
35
|
-
- `--verbose`: 詳細ログモード(デフォルト: false)
|
|
36
|
-
|
|
37
|
-
### 使用例
|
|
11
|
+
## Usage
|
|
38
12
|
|
|
39
13
|
```sh
|
|
40
|
-
|
|
41
|
-
npx @d-zero/a11y-check
|
|
42
|
-
|
|
43
|
-
# ファイルから読み込み
|
|
44
|
-
npx @d-zero/a11y-check -f urls.txt
|
|
45
|
-
|
|
46
|
-
# スクリーンショット付きで実行
|
|
47
|
-
npx @d-zero/a11y-check https://example.com --screenshot
|
|
48
|
-
|
|
49
|
-
# 結果をGoogleスプレッドシートに出力
|
|
50
|
-
npx @d-zero/a11y-check -f urls.txt -o https://docs.google.com/spreadsheets/d/xxx/edit
|
|
14
|
+
npx @d-zero/a11y-check <url>... [options]
|
|
15
|
+
npx @d-zero/a11y-check -f <listfile> [options]
|
|
51
16
|
```
|
|
52
17
|
|
|
53
|
-
|
|
18
|
+
オプションは `--help` を参照。
|
|
19
|
+
|
|
20
|
+
### URL リストファイル
|
|
54
21
|
|
|
55
22
|
```txt
|
|
56
23
|
https://example.com
|
|
57
|
-
https://example.com/a
|
|
58
|
-
|
|
59
|
-
ABC https://example.com/c
|
|
60
|
-
XYZ https://example.com/xyz/001
|
|
61
|
-
# コメント
|
|
62
|
-
# https://example.com/d
|
|
24
|
+
ID001 https://example.com/a
|
|
25
|
+
# コメント行
|
|
63
26
|
```
|
|
64
27
|
|
|
65
|
-
URLの手前に任意のID
|
|
66
|
-
IDが指定されていない場合は、URLのみが記録されます。
|
|
28
|
+
各 URL の手前に任意の ID を空白区切りで付与可能。`#` で始まる行はコメント。
|
|
67
29
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
## 設定ファイル
|
|
71
|
-
|
|
72
|
-
Frontmatterを使用してページフックを設定できます。
|
|
30
|
+
### 設定ファイル(frontmatter)
|
|
73
31
|
|
|
74
32
|
```txt
|
|
75
33
|
---
|
|
@@ -79,93 +37,27 @@ hooks:
|
|
|
79
37
|
---
|
|
80
38
|
|
|
81
39
|
https://example.com
|
|
82
|
-
https://example.com/a
|
|
83
|
-
︙
|
|
84
40
|
```
|
|
85
41
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
### 利用可能なシナリオ
|
|
89
|
-
|
|
90
|
-
- `axe`: axe-coreを使用したアクセシビリティチェック
|
|
91
|
-
- `01`: カスタムシナリオ01
|
|
92
|
-
- `02`: カスタムシナリオ02
|
|
42
|
+
設定ファイルでは `hooks` のみ指定可能。その他のオプションは CLI で渡す。`hooks` は IPC 越境のためファイルパスで渡す仕様(詳細は [`@d-zero/puppeteer-page-scan`](../puppeteer-page-scan/) の `PageHookSource`)。
|
|
93
43
|
|
|
94
44
|
### ページフック
|
|
95
45
|
|
|
96
|
-
`hooks`に配列としてスクリプトファイルのパスを渡すと、ページを開いた後にそれらのスクリプトを実行します。
|
|
97
|
-
|
|
98
46
|
```js
|
|
99
|
-
/**
|
|
100
|
-
* @type {import('@d-zero/puppeteer-page-scan').PageHook}
|
|
101
|
-
*/
|
|
47
|
+
/** @type {import('@d-zero/puppeteer-page-scan').PageHook} */
|
|
102
48
|
export default async function (page, { name, width, resolution, log }) {
|
|
103
|
-
//
|
|
104
|
-
// page: PuppeteerのPageオブジェクト
|
|
105
|
-
// name: サイズ名
|
|
106
|
-
// width: ウィンドウ幅
|
|
107
|
-
// resolution: 解像度
|
|
108
|
-
// log: ロガー
|
|
109
|
-
|
|
110
|
-
// ログイン処理の例
|
|
111
|
-
log('login');
|
|
49
|
+
// 例: ログイン処理
|
|
112
50
|
await page.type('#username', 'user');
|
|
113
51
|
await page.type('#password', 'pass');
|
|
114
52
|
await page.click('button[type="submit"]');
|
|
115
53
|
await page.waitForNavigation();
|
|
116
|
-
log('login done');
|
|
117
54
|
}
|
|
118
55
|
```
|
|
119
56
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
## Googleスプレッドシート出力
|
|
123
|
-
|
|
124
|
-
`-o`オプションでGoogleスプレッドシートのURLを指定すると、詳細なレポートが出力されます。
|
|
125
|
-
|
|
126
|
-
### クレデンシャルの設定
|
|
127
|
-
|
|
128
|
-
Googleスプレッドシートに出力するには、クレデンシャルファイルが必要です。以下のいずれかの方法で指定します:
|
|
129
|
-
|
|
130
|
-
**方法1: CLIオプションで指定**
|
|
131
|
-
|
|
132
|
-
```bash
|
|
133
|
-
npx @d-zero/a11y-check -f urls.txt -o https://docs.google.com/spreadsheets/d/xxx/edit -c /path/to/credential.json
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
**方法2: 環境変数で指定**
|
|
137
|
-
|
|
138
|
-
```bash
|
|
139
|
-
export GOOGLE_AUTH_CREDENTIALS='/path/to/credential.json'
|
|
140
|
-
npx @d-zero/a11y-check -f urls.txt -o https://docs.google.com/spreadsheets/d/xxx/edit
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
CLIオプション`-c`が優先され、未指定の場合は環境変数`GOOGLE_AUTH_CREDENTIALS`が使用されます。
|
|
144
|
-
|
|
145
|
-
クレデンシャルファイルは、Google Cloud Consoleの[APIとサービス](https://console.cloud.google.com/apis/credentials)から**OAuth 2.0 クライアント ID**(アプリケーションの種類は**デスクトップ**)を発行してダウンロードします。
|
|
146
|
-
|
|
147
|
-
### 出力されるレポート項目
|
|
148
|
-
|
|
149
|
-
- No.: 連番
|
|
150
|
-
- 対象画面URL: チェック対象のURL
|
|
151
|
-
- テスト方法: 使用したシナリオ
|
|
152
|
-
- 日時: チェック実行日時
|
|
153
|
-
- パーツ: コンポーネント名
|
|
154
|
-
- 環境: 実行環境
|
|
155
|
-
- 対象箇所: 問題のある要素
|
|
156
|
-
- AS IS: 現在の状態
|
|
157
|
-
- TO BE: 改善すべき状態
|
|
158
|
-
- TO BE(補足): 補足説明
|
|
159
|
-
- WCAGバージョン: WCAGのバージョン
|
|
160
|
-
- 達成基準番号: WCAGの達成基準
|
|
161
|
-
- 適合レベル: A/AA/AAA
|
|
162
|
-
- 深刻度: 問題の深刻度
|
|
163
|
-
- スクリーンショット: スクリーンショットのURL
|
|
164
|
-
|
|
165
|
-
## 認証
|
|
57
|
+
### Google スプレッドシート出力
|
|
166
58
|
|
|
167
|
-
|
|
59
|
+
`-o <URL>` で出力。クレデンシャル指定は `-c <path>` または `GOOGLE_AUTH_CREDENTIALS` 環境変数(CLI 優先)。クレデンシャルファイルは Google Cloud Console の OAuth 2.0 クライアント ID(アプリ種別: **デスクトップ**)を発行してダウンロード。
|
|
168
60
|
|
|
169
|
-
Basic
|
|
61
|
+
### Basic 認証
|
|
170
62
|
|
|
171
|
-
|
|
63
|
+
URL に資格情報を含める: `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.10.
|
|
3
|
+
"version": "0.10.4",
|
|
4
4
|
"description": "Accessibility Checker CLI",
|
|
5
5
|
"author": "D-ZERO",
|
|
6
6
|
"license": "MIT",
|
|
@@ -24,14 +24,14 @@
|
|
|
24
24
|
"clean": "tsc --build --clean"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@d-zero/a11y-check-axe-scenario": "0.5.
|
|
28
|
-
"@d-zero/a11y-check-core": "0.7.
|
|
29
|
-
"@d-zero/a11y-check-scenarios": "0.4.
|
|
30
|
-
"@d-zero/cli-core": "1.3.
|
|
31
|
-
"@d-zero/google-auth": "0.7.
|
|
32
|
-
"@d-zero/google-sheets": "0.9.
|
|
33
|
-
"@d-zero/puppeteer-page-scan": "4.5.
|
|
34
|
-
"@d-zero/readtext": "1.1.
|
|
27
|
+
"@d-zero/a11y-check-axe-scenario": "0.5.26",
|
|
28
|
+
"@d-zero/a11y-check-core": "0.7.4",
|
|
29
|
+
"@d-zero/a11y-check-scenarios": "0.4.40",
|
|
30
|
+
"@d-zero/cli-core": "1.3.11",
|
|
31
|
+
"@d-zero/google-auth": "0.7.3",
|
|
32
|
+
"@d-zero/google-sheets": "0.9.2",
|
|
33
|
+
"@d-zero/puppeteer-page-scan": "4.5.2",
|
|
34
|
+
"@d-zero/readtext": "1.1.23",
|
|
35
35
|
"@d-zero/shared": "0.22.0",
|
|
36
36
|
"ansi-colors": "4.1.3",
|
|
37
37
|
"dayjs": "1.11.19",
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"url": "https://github.com/d-zero-dev/tools.git",
|
|
45
45
|
"directory": "packages/@d-zero/a11y-check"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "16c831105a12bb635d49130e7f5add25b6643c40"
|
|
48
48
|
}
|