Accessibility Checker CLI
npm install @d-zero/a11y-check@d-zero/a11y-checkウェブサイトのアクセシビリティチェックを行うツールです。
- Puppeteerを使用してページのアクセシビリティを検証します
- Googleスプレッドシートに詳細なレポートを出力します
- 複数のシナリオ(axe、01、02)でチェックを実行可能
- スクリーンショット機能付き
``sh`
npx @d-zero/a11y-check -f
npx @d-zero/a11y-check
リストをファイルから読み込むか、URLを直接指定して実行します。
- -v, --version: バージョンを表示-f, --listfile
- : URLリストを持つファイルのパス
- : 対象のURL(複数指定可能)-s, --screenshot
- : スクリーンショットを撮影する(デフォルト: false)-o, --out
- : GoogleスプレッドシートのURL(デフォルト: 標準出力)--scenarios
- : チェックシナリオ(カンマ区切り、利用可能: axe,01,02、デフォルト: axe)--cache
- : キャッシュを使用する(デフォルト: true)--cacheDir
- : キャッシュディレクトリ(デフォルト: .cache)--locale
- : ロケール設定--limit
- : 並列実行数の上限--interval
- : 並列実行間の間隔(デフォルト: なし)--debug
- 数値または"min-max"形式でランダム範囲を指定可能
- : デバッグモード(デフォルト: false)--verbose
- : 詳細ログモード(デフォルト: false)
`sh基本的な使用
npx @d-zero/a11y-check https://example.com
#### URLリストのファイルフォーマット
`txt
https://example.com
https://example.com/a
https://example.com/b
ABC https://example.com/c
XYZ https://example.com/xyz/001
コメント
https://example.com/d
`URLの手前に任意のIDを付与することができます。ホワイトスペースで区切ることでIDとURLを分けることができます。
IDが指定されていない場合は、URLのみが記録されます。
#で始まる行はコメントとして無視されます。設定ファイル
Frontmatterを使用してページフックを設定できます。
`txt
---
hooks:
- ./hook1.cjs
- ./hook2.mjs
---https://example.com
https://example.com/a
︙
`注意: 設定ファイルでは
hooksのみ設定可能です。その他のオプション(scenarios, screenshot, locale, cache, cacheDirなど)はCLIオプションとして指定してください。$3
-
axe: axe-coreを使用したアクセシビリティチェック
- 01: カスタムシナリオ01
- 02: カスタムシナリオ02$3
hooksに配列としてスクリプトファイルのパスを渡すと、ページを開いた後にそれらのスクリプトを実行します。`js
/**
* @type {import('@d-zero/puppeteer-page-scan').PageHook}
*/
export default async function (page, { name, width, resolution, log }) {
// 非同期処理可能
// page: PuppeteerのPageオブジェクト
// name: サイズ名
// width: ウィンドウ幅
// resolution: 解像度
// log: ロガー // ログイン処理の例
log('login');
await page.type('#username', 'user');
await page.type('#password', 'pass');
await page.click('button[type="submit"]');
await page.waitForNavigation();
log('login done');
}
`Googleスプレッドシート出力
-oオプションでGoogleスプレッドシートのURLを指定すると、詳細なレポートが出力されます。$3
Googleスプレッドシートに出力するには、以下の環境変数が必要です:
`bash
export GOOGLE_AUTH_CREDENTIALS='/path/to/credential.json'
`クレデンシャルファイルは、Google Cloud ConsoleのAPIとサービスからOAuth 2.0 クライアント ID(アプリケーションの種類はデスクトップ)を発行してダウンロードします。
$3
- No.: 連番
- 対象画面URL: チェック対象のURL
- テスト方法: 使用したシナリオ
- 日時: チェック実行日時
- パーツ: コンポーネント名
- 環境: 実行環境
- 対象箇所: 問題のある要素
- AS IS: 現在の状態
- TO BE: 改善すべき状態
- TO BE(補足): 補足説明
- WCAGバージョン: WCAGのバージョン
- 達成基準番号: WCAGの達成基準
- 適合レベル: A/AA/AAA
- 深刻度: 問題の深刻度
- スクリーンショット: スクリーンショットのURL
認証
$3
Basic認証が必要なページの場合はURLにユーザー名とパスワードを含めます。
例:
https://user:pass@example.com`