From b7b5aa5a08a028ed806a73adfe316b71e58a2866 Mon Sep 17 00:00:00 2001
From: ttsukagoshi <taro.tsukagoshi@gmail.com>
Date: Tue, 1 Feb 2022 14:06:04 +0900
Subject: [PATCH 1/4] =?UTF-8?q?=E3=83=A6=E3=83=BC=E3=82=B6=E3=81=AE?=
=?UTF-8?q?=E5=80=8B=E5=88=A5=E8=A8=AD=E5=AE=9A=E3=83=95=E3=82=A1=E3=82=A4?=
=?UTF-8?q?=E3=83=ABsettings.json=E3=82=92gitignore=E3=81=AB=E8=BF=BD?=
=?UTF-8?q?=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.gitignore | 1 +
1 file changed, 1 insertion(+)
diff --git a/.gitignore b/.gitignore
index 1221ea1..664c85a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,5 @@ node_modules/
# axe-test
urls.txt
axe-results.csv
+settings.json
debug/
From ad524d0562e368fea746705c137e1dfa0e401b04 Mon Sep 17 00:00:00 2001
From: ttsukagoshi <taro.tsukagoshi@gmail.com>
Date: Wed, 2 Feb 2022 23:25:50 +0900
Subject: [PATCH 2/4] =?UTF-8?q?user-settings.json=E3=81=AB=E3=82=88?=
=?UTF-8?q?=E3=81=A3=E3=81=A6=E3=83=A6=E3=83=BC=E3=82=B6=E8=A8=AD=E5=AE=9A?=
=?UTF-8?q?=E3=82=92=E8=AA=BF=E6=95=B4=E5=8F=AF=E8=83=BD=E3=81=A8=E3=81=99?=
=?UTF-8?q?=E3=82=8B=20(#19)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.gitignore | 1 -
src/axe-test.js | 78 ++++++++++++++++++++++++----------------------
user-settings.json | 8 +++++
3 files changed, 48 insertions(+), 39 deletions(-)
create mode 100644 user-settings.json
diff --git a/.gitignore b/.gitignore
index 664c85a..1221ea1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,5 +4,4 @@ node_modules/
# axe-test
urls.txt
axe-results.csv
-settings.json
debug/
diff --git a/src/axe-test.js b/src/axe-test.js
index 10f17d4..e76e0ff 100644
--- a/src/axe-test.js
+++ b/src/axe-test.js
@@ -1,29 +1,17 @@
-/* --------------------------------------------------- */
-// ユーザ設定
-
-// @axe-core/puppeteerのwithTagsで、テスト基準を選択的に設定できる。
-// withTagsの設定オプションの詳細は公式ドキュメントを参照：
-// https://www.deque.com/axe/core-documentation/api-documentation/#user-content-axe-core-tags
-const AXE_CORE_TAGS = ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'];
-
-// 出力する結果の種類を指定。詳細は公式ドキュメントを参照：
-// https://www.deque.com/axe/core-documentation/api-documentation/#options-parameter
-// inapplicable: 判定対象外の基準
-// incomplete: 適合しているか判断できなかった基準
-// passes: 適合している判断とされた基準
-// violations: 適合していないと判断された基準
-const RESULT_TYPES = ['incomplete', 'violations'];
-
-// 入力するURL一覧のフォルダ・ファイル名と文字コード
-const INPUT_PATH = './urls.txt';
-const INPUT_ENCODE = 'utf8';
-
-// 出力するフォルダ・ファイル名
-const OUTPUT_PATH = './axe-results.csv';
-const OUTPUT_ENCODE = 'utf8';
-
-/* --------------------------------------------------- */
+// 初期設定。詳細はREADMEを参照:
+// https://github.com/ttsukagoshi/axe-test/blob/main-ops/README.md
+const DEFAULT_SETTINGS = {
+ axeCoreTags: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'],
+ resultTypes: ['incomplete', 'violations'],
+ inputPath: './urls.txt',
+ inputEncode: 'utf8',
+ outputPath: './axe-results.csv',
+ outputEncode: 'utf8',
+};
+// ユーザ設定ファイルのファイルパス
+const USER_SETTINGS_FILE_PATH = './user-settings.json';
+const fs = require('fs');
const { AxePuppeteer } = require('@axe-core/puppeteer');
const puppeteer = require('puppeteer');
const AXE_LOCALE_JA = require('axe-core/locales/ja.json');
@@ -45,20 +33,14 @@ const reportHeader = [
'Help URL',
];
-// テスト対象の URL を、外部テキストファイルから読み込んで、配列に整形する。
-const fs = require('fs');
-let urls_list = fs.readFileSync(INPUT_PATH, { encoding: INPUT_ENCODE });
-urls_list = urls_list.replace(/\r?\n/g, ',');
-urls_list = urls_list.split(',');
-
(async () => {
try {
let cliMode = false; // デフォルトではファイル出力する
let outputText = ''; // ファイル出力用のテキスト
if (process.argv[2]) {
+ // 引数を受け取った場合の処理
if (process.argv[2] === '--cli') {
- // CLI出力
- cliMode = true;
+ cliMode = true; // CLI出力
} else {
throw new Error(
`${process.argv[2]} は無効な引数です。「--cli」とすることで、結果をファイル出力する代わりにコマンドラインで返します。`
@@ -66,7 +48,25 @@ urls_list = urls_list.split(',');
}
}
- const urls = urls_list;
+ // ユーザ設定を取得
+ let userSettings = JSON.parse(
+ await fs.promises.readFile(USER_SETTINGS_FILE_PATH)
+ );
+ // ユーザ設定で指定されていない項目には初期値を適用
+ Object.keys(DEFAULT_SETTINGS).forEach((key) => {
+ if (!userSettings[key]) {
+ userSettings[key] = DEFAULT_SETTINGS[key];
+ }
+ });
+
+ // テスト対象の URL を、外部テキストファイルから読み込んで、配列に整形する。
+ const urls = fs
+ .readFileSync(userSettings.inputPath, {
+ encoding: userSettings.inputEncode,
+ })
+ .replace(/\r?\n/g, ',')
+ .split(',');
+
const browser = await puppeteer.launch();
for (let i = 0; i < urls.length; i++) {
@@ -95,11 +95,11 @@ urls_list = urls_list.split(',');
// テストを実行
const results = await new AxePuppeteer(page)
.configure(config)
- .withTags(AXE_CORE_TAGS)
+ .withTags(userSettings.axeCoreTags)
.analyze();
// テスト結果をCSVとして出力できるように整形
- RESULT_TYPES.forEach((resultType) => {
+ userSettings.resultTypes.forEach((resultType) => {
results[resultType].forEach((resultItem) => {
resultItem.nodes.forEach((node) => {
node.any.forEach((a) => {
@@ -108,7 +108,7 @@ urls_list = urls_list.split(',');
resultItem.id,
resultType,
resultItem.tags
- .filter((tag) => AXE_CORE_TAGS.includes(tag))
+ .filter((tag) => userSettings.axeCoreTags.includes(tag))
.join(),
resultItem.impact,
a.message,
@@ -136,7 +136,9 @@ urls_list = urls_list.split(',');
}
await browser.close();
if (!cliMode) {
- fs.writeFileSync(OUTPUT_PATH, outputText, { encoding: OUTPUT_ENCODE });
+ fs.writeFileSync(userSettings.outputPath, outputText, {
+ encoding: userSettings.outputEncode,
+ });
}
console.info('アクセシビリティ検査が完了しました。');
} catch (error) {
diff --git a/user-settings.json b/user-settings.json
new file mode 100644
index 0000000..b931369
--- /dev/null
+++ b/user-settings.json
@@ -0,0 +1,8 @@
+{
+ "axeCoreTags": ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"],
+ "resultTypes": ["incomplete", "violations"],
+ "inputPath": "./urls.txt",
+ "inputEncode": "utf8",
+ "outputPath": "./axe-results.csv",
+ "outputEncode": "utf8"
+}
From 336a3c9544a02c1cee19be13b545f371f246d404 Mon Sep 17 00:00:00 2001
From: ttsukagoshi <taro.tsukagoshi@gmail.com>
Date: Wed, 2 Feb 2022 23:27:44 +0900
Subject: [PATCH 3/4] =?UTF-8?q?=E3=83=A6=E3=83=BC=E3=82=B6=E8=A8=AD?=
=?UTF-8?q?=E5=AE=9A=E3=81=AE=E8=AA=BF=E6=95=B4=E6=96=B9=E6=B3=95=E3=82=92?=
=?UTF-8?q?README=E3=81=AB=E8=BF=BD=E8=A8=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 33 +++++++++++++++++++++------------
1 file changed, 21 insertions(+), 12 deletions(-)
diff --git a/README.md b/README.md
index cb4d50c..2110b67 100644
--- a/README.md
+++ b/README.md
@@ -43,26 +43,35 @@ node .
<img width="1294" alt="「axe-test.js」によって出力されたテスト結果 (.csv) のイメージ" src="https://user-images.githubusercontent.com/55706659/151901139-a87e171b-c37d-4938-867d-14183982eb1d.png">
-### テスト基準の設定変更
+### オプション設定
-「[./src/axe-test.js](https://github.com/ttsukagoshi/axe-test/blob/main/src/axe-test.js)」では、冒頭のユーザ設定で、テスト基準を設定しています。
+作業フォルダ直下にある `user-settings.json` を編集することで、初期設定を変更できます。
-```javascript
-const axeCoreTags = ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'];
-```
+#### 設定できる値
-WCAG 2.1 (および 2.0) の、達成基準レベル A と AA に相当するテストルールを適用して、テストを実行する設定ということです。必要に応じて上記 1 行の記述を変更することで、テスト基準の設定を変更することができます。ここに記述可能なタグについては、[axe API Documentation の 「Axe-core Tags」のセクション](https://www.deque.com/axe/core-documentation/api-documentation/#user-content-axe-core-tags) をご参照ください。
+<!-- prettier-ignore -->
+| 変数名 | データ型 | 意味 | 初期値 |
+| --- | --- | --- | --- |
+| `axeCoreTags` | *Array* | テストの基準となるアクセシビリティ水準を指定します。初期値は、WCAG 2.1 (および 2.0) の、達成基準レベル A と AA に相当するテストルールを適用して、テストを実行する設定となっています。ここに記述可能な水準については、[axe API Documentation の 「Axe-core Tags」のセクション](https://www.deque.com/axe/core-documentation/api-documentation/#user-content-axe-core-tags) をご参照ください。 | `["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"]` |
+| `resultTypes` | *Array* | 出力する結果の種類を指定します。 `inapplicable`: 判定対象外の基準/`incomplete`: 適合しているか判断できなかった基準/ `passes`: 適合している判断とされた基準/ `violations`: 適合していないと判断された基準。詳細は公式ドキュメントをご参照ください: https://www.deque.com/axe/core-documentation/api-documentation/#options-parameter | `["incomplete", "violations"]` |
+| `inputPath` | *String* | URL一覧のテキストファイルのファイルパス | `./urls.txt` |
+| `inputEncode` | *String* | URL一覧のテキストファイルの文字エンコード。サポートされている形式については公式ドキュメントを参照: https://nodejs.org/api/buffer.html#buffers-and-character-encodings | `utf8` |
+| `outputPath` | *String* | 出力するCSVのファイルパス | `./axe-results.csv` |
+| `outputEncode` | *String* | 出力するCSVファイルの文字エンコード。サポートされている形式については公式ドキュメントを参照: https://nodejs.org/api/buffer.html#buffers-and-character-encodings | `utf8` |
-### テスト結果として出力する項目の調整
+#### `user-settings.json` の例
-「[./src/axe-test.js](https://github.com/ttsukagoshi/axe-test/blob/main/src/axe-test.js)」では、冒頭のユーザ設定で、テスト結果として出力する項目を定義しています。
+変更した項目だけ残して、残りは削除しても問題ありません。削除した項目では自動的に初期値が適用されます。
-```javascript
-const resultTypes = ['incomplete', 'violations'];
+```json
+{
+ "axeCoreTags": ["wcag2a", "wcag2aa"],
+ "resultTypes": ["violations"],
+ "inputPath": "./private/urls.txt",
+ "inputEncode": "utf16le"
+}
```
-現状では `incomplete` （適合しているか判断できなかった基準）と `violations` （適合していないと判断された基準）を返す設定となっています。
-
### コマンドラインへの出力
実行コマンドに `--cli` とつけることで、ファイル出力の代わりにコマンドライン出力できます。
From 7a7e2d44b8e3a8a2481b346fae337bf666c19189 Mon Sep 17 00:00:00 2001
From: ttsukagoshi <taro.tsukagoshi@gmail.com>
Date: Wed, 2 Feb 2022 23:35:25 +0900
Subject: [PATCH 4/4] =?UTF-8?q?=E5=A4=89=E6=95=B0=E5=AE=9A=E7=BE=A9?=
=?UTF-8?q?=E3=81=AE=E9=85=8D=E7=BD=AE=E3=82=92=E6=95=B4=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/axe-test.js | 27 +++++++++++++++------------
1 file changed, 15 insertions(+), 12 deletions(-)
diff --git a/src/axe-test.js b/src/axe-test.js
index e76e0ff..29e283c 100644
--- a/src/axe-test.js
+++ b/src/axe-test.js
@@ -1,3 +1,11 @@
+const fs = require('fs');
+const { AxePuppeteer } = require('@axe-core/puppeteer');
+const puppeteer = require('puppeteer');
+const AXE_LOCALE_JA = require('axe-core/locales/ja.json');
+const config = {
+ locale: AXE_LOCALE_JA, // テスト結果を日本語で出力するように設定する。
+};
+
// 初期設定。詳細はREADMEを参照:
// https://github.com/ttsukagoshi/axe-test/blob/main-ops/README.md
const DEFAULT_SETTINGS = {
@@ -10,17 +18,8 @@ const DEFAULT_SETTINGS = {
};
// ユーザ設定ファイルのファイルパス
const USER_SETTINGS_FILE_PATH = './user-settings.json';
-
-const fs = require('fs');
-const { AxePuppeteer } = require('@axe-core/puppeteer');
-const puppeteer = require('puppeteer');
-const AXE_LOCALE_JA = require('axe-core/locales/ja.json');
-const config = {
- locale: AXE_LOCALE_JA, // テスト結果を日本語で出力するように設定する。
-};
-
// 出力されるテスト結果のフィールド名（ヘッダ行）
-const reportHeader = [
+const REPORT_HEADER = [
'URL',
'Rule Type', // rule ID
'Result Type', // inapplicable, incomplete, passes, or violations
@@ -71,7 +70,7 @@ const reportHeader = [
for (let i = 0; i < urls.length; i++) {
if (i === 0) {
- const outputHeader = reportHeader.join(); // 出力1行目としてヘッダ行を追加
+ const outputHeader = REPORT_HEADER.join(); // 出力1行目としてヘッダ行を追加
if (cliMode) {
console.log(outputHeader);
} else {
@@ -140,7 +139,11 @@ const reportHeader = [
encoding: userSettings.outputEncode,
});
}
- console.info('アクセシビリティ検査が完了しました。');
+ console.info(
+ `アクセシビリティ検査が完了しました。${
+ cliMode ? '' : userSettings.outputPath + ' に結果が出力されています。'
+ }`
+ );
} catch (error) {
console.error(error);
}