スペックファイルを用いたページの解析

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

specとbulk-specサブコマンドを使用してスペックファイルを用いたページの解析方法

Not for use with personal data

スペックファイルは、JSONまたはYAML形式のファイルで、解析前に各ページに対して実行するブラウザアクションと、ウェブページのリストを定義します。 axe spec 単一のスペックファイルを実行するには、 axe bulk-spec スペックファイルのディレクトリを処理するには、

コマンド axe spec 

axe spec <spec-file> <output-dir> [options]

JSON結果が保存される場所です。省略された場合、結果は現在の作業ディレクトリに保存されます。 <output-dir>

使用例:

axe spec ./axe-workflow.yaml ./axe-results --format html

スペックファイルの構造

スペックファイルは、分析するページのリストと各ページに対して実行するオプションのアクションと共に、1つ以上のプロジェクトを定義します。

YAMLの例

projects:
  - name: deque.com
    id: deque.com
    metadata:
      products:
        - CLI
      environment:
        - Prod
    globalActions:
      - dismiss modal "#CybotCookiebotDialog" with close button "#CybotCookiebotDialogBodyButtonAccept"
    pageList:
      - name: Deque search
        url: https://www.deque.com/
        actions:
          - type "axe" into element "#searchform input"
          - click element "#searchform button"
          - wait for element ".m-search-page" to be found
          - analyze
      - name: Axe Dashboard
        url: https://axe.deque.com/

プロジェクト

プロパティ タイプ 説明
name 文字列 プロジェクトのユニークな表示名。
id 文字列 プロジェクトのユニークな識別子。
metadata オブジェクト 任意。ご利用のケースに応じた任意のメタデータ（例：製品名、環境）。
globalActions 配列 任意。プロジェクト内の全ページの状態変化に応じて実行するアクション（例：クッキーバナーやアンケートポップアップを閉じる）。詳細は グローバルアクションを参照。
pageList 配列 分析するページのリスト。詳細は ページを参照。

ページ

プロパティ タイプ 説明
name 文字列 ページの表示名。
url 文字列 ページのURL。
actions 配列 任意。解析の前後にページで実行するアクション。詳細は アクション。

JSON/YAMLフォーマット

スペックファイルはYAMLまたはJSONで記述できます。以下の表に、それぞれのフォーマットで同じ値を示しています。JSONでは、二重引用符を含むアクション文字列は、バックスラッシュでエスケープする必要があることに注意してください。

YAML JSON
type "axe" into element "#searchform input" "type \"axe\" into element \"#searchform input\""
dismiss modal "#CybotCookiebotDialog" with close button "#CybotCookiebotDialogBodyButtonAccept" "dismiss modal \"#CybotCookiebotDialog\" with close button \"#CybotCookiebotDialogBodyButtonAccept\""

アクション

アクションは、スペックファイルの actions （または globalActions）配列内の文字列です。ボタンのクリック、フォームの入力、ダイアログの解除、ページ状態の待機、アクセシビリティ分析の実行などのタスクを実行します。アクションは、リストされた順に実行されます。

アクションには2種類あります：

  • ページアクション は、特定のページで順に実行されます。 analyze アクションは、ページごとに少なくとも1回は呼び出されなければなりません。
  • グローバルアクション は、状態変化に応じて、プロジェクト内のすべてのページで実行されます。「 グローバルアクション」をご覧ください。

アクションの完全な例

次の例では、Deque Universityにログインし、ダッシュボードを分析します：

projects:
  - name: Deque University login flow
    id: deque-university-login-flow
    pageList:
      - name: homepage
        url: https://dequeuniversity.com/
        actions:
          - click element ".loginLink"
          - wait for element ".loginUsername" to be found
          - type "user@example.com" into element ".loginUsername"
          - type "secretpassword" into element "#loginPassword"
          - click element "input[type=submit]"
          - wait for element ".logoutLink" to be found
          - analyze page

セレクター

多くのアクションは、ページ上の要素を特定するセレクター引数を取ります。セレクターは、CSSセレクターまたはXPathセレクターであり、単一の文字列または文字列のリストとして指定できます。

iframe内の要素を対象にするには、リストを使用する必要があります。リスト内のすべてのセレクターは、最後の1つを除いて、順次移動する <iframe> 要素を特定し、CSSセレクターでなければなりません。リスト内の最後のセレクターは、ターゲット要素を特定し、CSSまたはXPathのどちらでもかまいません。リスト内の各セレクターは、前のエントリによって確立された文書コンテキストに相対して評価されます：最初のセレクターはルート文書に対して相対的であり、その後の各iframeセレクターは前のiframe内の文書に対して相対的です。

単一の文字列（リストではない）を使用する場合、iframeに移動することはできません。

iframeセレクターの例

このHTML構造を考えてみてください：

<body>
  <!-- root document -->
  <iframe class="payment-widget">
    <!-- document inside the payment-widget iframe -->
    <div class="form-wrapper">
      <iframe id="card-fields">
        <!-- document inside the card-fields iframe -->
        <form>
          <input type="text" name="card-number" class="card-input">
        </form>
      </iframe>
    </div>
  </iframe>
</body>

カード番号入力をクリックするには、セレクターリストを使用します。各CSSセレクターは、前のエントリによって確立された文書コンテキスト内で評価されます：

# "iframe.payment-widget" is evaluated in the root document
# "#card-fields" is evaluated in the document inside iframe.payment-widget
# ".card-input" is evaluated in the document inside #card-fields
click element [ "iframe.payment-widget", "#card-fields", ".card-input" ]

最終ターゲット要素にXPathを使用するには（iframeセレクターは依然としてCSSである必要があります）：

click element [ "iframe.payment-widget", "#card-fields", "//input[@name='card-number']" ]

JSONの場合：

"click element [\"iframe.payment-widget\", \"#card-fields\", \".card-input\"]"

ページアクション

CLIは9つのページアクションをサポートしています：

  1. analyze：アクセシビリティ分析を実行
  2. change：の値を変更 <input>、 <textarea>、または <select> をJavaScriptで
  3. click：要素をクリック
  4. dismiss：ポップアップまたはモーダルを解除
  5. eval：任意のJavaScriptを評価
  6. press：キーを押す（修飾キー付きまたはなし）
  7. select：のオプションを選択 <select>
  8. type：に入力 <input>
  9. wait：特定の状態を待機またはスリープ

analyze

analyze アクションはアクセシビリティ分析を実行します。ページごとに必ず1回は呼び出されなければなりません。ワークフローの異なるポイントでページを分析するために複数回呼び出すこともできます（結果を区別するために with title バリアントを使用してください）。

オプションの ruleset パラメータは使用するルールセットを指定します。デフォルトは **WCAG 2.1 AA**利用可能なルールセット:

ルールセットID 標準
wcag2 WCAG 2.0 AA
wcag2.1 WCAG 2.1 AA（デフォルト）
wcag2.2 WCAG 2.2 AA
wcag2aaa WCAG 2.0 AAA
wcag2.1aaa WCAG 2.1 AAA
wcag2.2aaa WCAG 2.2 AAA
508 Section 508
ttv5 Trusted Tester v5
en301549 EN 301 549
rgaav4 RGAA v4

要素の含め方や除外方法については、 Contextパラメータに関するaxe-core APIドキュメントを参照してください。

# Analyze using the WCAG 2.1 AA ruleset (default) — all three forms are equivalent
analyze
analyze the page
analyze page

# Analyze using the Section 508 ruleset
analyze page with ruleset "508"

# Analyze with a custom title (useful when analyzing a page multiple times)
analyze the page with title "after login"

# Analyze only a specific element
analyze only element "#main-content"

# Analyze only specific elements
analyze only element "#idOfElement" and element ".classToAnalyze"

# Analyze everything except images that are immediate children of paragraphs
analyze the page excluding element "p > img"

# Analyze everything except elements inside a frame with a specific class
analyze the page excluding element [ ".classOfFrameToExclude", "#idOfElement" ]

# Save results to a specific directory
analyze the page and save in "./homepage-team/"

# Save a copy to an additional directory while also saving to the default location
analyze the page and save a copy in "./homepage-team/"

# Use the axe-core library's built-in default ruleset
analyze the page with the source default ruleset

複数のオプションを組み合わせた例: クラスを持つ要素内の画像のみを分析し、 third-party 送信時に検証されないフォームを除外し、クラスを持つ要素を除外します、 old-apiを使用して、 508 ルールセット、カスタムタイトルおよびカスタム保存場所を設定します。

analyze only element [ ".third-party", "img"] and element "form[novalidate]" excluding element ".old-api" with ruleset "508" with title "What is this testing" and save in "Results for Some test"

JSONにおける例:

"analyze only element [\".third-party\", \"img\"] and element \"form[novalidate]\" excluding element \".old-api\" with ruleset \"508\" with title \"What is this testing\" and save in \"Results for Some test\""

change

その change アクションは <input>の値を <textarea>、 <select> 要素をJavaScriptで変更します。正常なDOMイベントが利用できないときに使用します。 change 正常なDOMイベントが利用できないときに使用します。

# Change the value of an input
change the value of "input[name=song]" to "too many puppies"

click

その click アクションは、指定されたセレクタに一致する最初の要素をクリックします。

# Click a button by class selector
click element ".myButton"

# Click the body element
click "body"

dismiss

その dismiss アクションは、ポップアップやモーダルをクローズボタンをクリックして閉じます。モーダルコンテナのCSSセレクタとクローズボタンのCSSセレクタを提供してください。いずれかの要素が存在しない場合、このアクションは優雅に失敗します。

note

このアクションはネイティブな alert() または confirm() ダイアログを消去しません。

# Dismiss a modal using separate selectors for the container and close button
dismiss modal ".myModal" with close button ".myModal .close"

eval

その eval アクションはページ上で任意のJavaScriptを実行します。それを使用してDOMを操作したりカスタムアクションを行ったりします。

# Change the page title
eval "document.title = 'hello world'"

# Scroll an element into view
eval "document.querySelector('.someElement').scrollIntoView()"

# Scroll to the bottom of the page
eval "window.scrollTo(0, document.body.scrollHeight)"

press

その press アクションは要素にキー押下（オプションで修飾キー）を送信します。サポートされているキー名については、 Seleniumキーの文書を参照してください。

# Press H on the body element
press "H" on "body"

# Press Shift+Tab on the navigation element
press "shift+tab" on element ".navigation"

# Press Shift+Control+7 on an element
press "shift+control+7" on element ".foo"

select

その select アクションは <option> の <select> 要素をその 表示されるテキスト によって選択します（ value 属性ではありません）。

次のHTMLに基づいて:

<select class="mySelect">
  <option></option>
  <option value="1">dog</option>
  <option value="2">cat</option>
  <option value="3">fish</option>
</select>
# Select by visible option text
select the "dog" option in ".mySelect"
select the "cat" option in element ".mySelect"

type

その type アクションは文字列を ", "context": "paragraph <input> または ", "context": "paragraph <textarea> 要素に入力します。フォームを記入したり、検索フィールドを埋めたりするのに使用します。", "context": "paragraph

# Type into an email input
type "user@example.com" into element "input[type=email]"

# Type into a textarea
type "hello world" into "textarea.Message"

# Type with a delay between keystrokes to simulate human typing
type "sloth" into "input[type=search]" with a 150ms key delay

wait

この ", "context": "paragraph wait アクションは、要素が指定された状態に達するのを待つか、指定された時間だけスリープします。", "context": "paragraph

サポートされている要素の状態：", "context": "paragraph visible、", "context": "paragraph hidden、", "context": "paragraph selected、", "context": "paragraph enabled、", "context": "paragraph disabled、", "context": "paragraph found。", "context": "paragraph

スリープの持続時間については、数値はミリ秒として解釈されます。文字列は ", "context": "paragraph ms", "context": "strong text パッケージを使用して変換されます。例えば、", "context": "paragraph 1m = 60,000 ms、", "context": "paragraph 1s = 1,000 ms。", "context": "paragraph

# Wait for an element to appear
wait for element ".myElement" to be found

# Wait for an element to become hidden
wait for element ".myElement" to be hidden

# Sleep for 1 minute
wait for 1m

# Sleep for 1 second
wait for 1s

# Sleep for 30 milliseconds
wait for 30

グローバルアクション", "context": "heading level 2

グローバルアクションは、ページアクションのように手続的に実行されるのではなく、状態の変化に応じてプロジェクト内のすべてのページで実行されます。現在サポートされているグローバルアクションは1つのみです：", "context": "paragraph dismiss modal。", "context": "paragraph

  • グローバルアクションは ", "context": "paragraph spec モードおよびヘッドレスURIモードの両方で動作します。", "context": "paragraph
  • グローバルアクションは手続的ではなく、ページイベントに応じてトリガーされ、固定の順序では実行されません。", "context": "paragraph
  • この ", "context": "paragraph dismiss modal グローバルアクションは、指定されたモーダルが表示されるのを待ち、それを閉じた後にページアクションが続行されます。", "context": "paragraph

グローバルアクションをプロジェクトに追加する際は ", "context": "paragraph name/", "context": "paragraphid から ", "context": "paragraph pageListの前に行います。", "context": "paragraph

projects:
  - id: demo
    name: CLI demo
    globalActions:
      - dismiss modal "#__next .survey" with close button ".survey button.close"
    pageList:
      - name: homepage
        url: https://dequelabs.github.io/aget-demo-site
      - name: popup
        url: https://dequelabs.github.io/aget-demo-site
        actions:
          - wait for element "#__next header nav" to be visible
          - click element "#__next header nav a[href*=popup]"
          - wait for element ".content button" to be found
          - analyze with title "before popup"
          - click element ".content button"
          - analyze with title "with popup"
          - dismiss modal ".ReactModal__Content" with close button ".ReactModal__Content .close"
          - analyze with title "after popup"
      - name: contact
        url: https://dequelabs.github.io/aget-demo-site/contact
        actions:
          - analyze with title "form disabled"
          - wait for element "#__next .toggle" to be found
          - click element ".toggle button"
          - wait for element "input[name=name]" to be enabled
          - analyze with title "form enabled"
          - type "stephen" into element "input[name=name]"
          - type "555-555-5555" into element "input[name=phone]"
          - type "stephen@deque.com" into element "input[name=email]"
          - type "hello world" into element "textarea[name=message]"
          - click element "button[type=submit]"
          - wait for element ".thanks" to be found
          - analyze with title "thanks message"

バッチ処理と ", "context": "heading level 2 axe bulk-spec

複数のスペックファイルを一度に処理するには、", "context": "paragraph axe bulk-spec を使用してスペックファイルを含むディレクトリを指定します。CLIはディレクトリとそのサブディレクトリ内のスペックファイルを再帰的に検索します。", "context": "paragraph

axe bulk-spec <spec-files-directory> <output-directory>

この ", "context": "paragraph <output-directory> はオプションです。省略した場合、結果は現在の作業ディレクトリに保存されます。", "context": "paragraph

進行状況の更新は ", "context": "paragraph stdout 中に印刷されます。", "context": "paragraph

結果は出力ディレクトリに書き込まれます：各 ", "context": "paragraph analyze アクションごとに1つのJSONファイルと、失敗したスペックファイルおよび失敗の理由を記載したログファイルが生成されます。", "context": "paragraph

オプション", "context": "heading level 2

以下のオプションが利用可能です：", "context": "paragraph axe spec：", "context": "paragraph

--axe-devhub-api-key <api-key>

Axe Developer Hub APIキーを指定します。Axe Developer Hubに結果を送信するには ", "context": "paragraph --axe-devhub-project-idと共に必要です。詳細は ", "context": "paragraph Axe Developer Hubに結果を送信", "context": "link textを参照してください。", "context": "paragraph

--axe-devhub-project-id <project-id>

Axe Developer HubプロジェクトIDを指定します。Axe Developer Hubに結果を送信するには ", "context": "paragraph --axe-devhub-api-keyと共に必要です。詳細は ", "context": "paragraph Axe Developer Hubに結果を送信", "context": "link textを参照してください。", "context": "paragraph

--axe-devhub-server-url <url>

Axe Developer HubサーバーのURLを指定します。デフォルトは ", "context": "paragraph https://axe.deque.com。これは ", "context": "paragraph AXE_DEVHUB_SERVER_URL 環境変数に相当します。「", "context": "paragraph Axe Developer Hub への結果送信", "context": "link text」を参照してください。", "context": "paragraph

-c, --custom <path>

デフォルトのルールセットを上書きするカスタムルールセットファイルを指定します。", "context": "paragraph

--descendant-links

各ページのリンクを収集し、それらを結果に追加します。必要なもの: ", "context": "paragraph --verbose。", "context": "paragraph

--dismiss-alerts

スキャン前にブラウザの ", "context": "paragraph alert()、", "context": "paragraph confirm()および ", "context": "paragraph prompt() ダイアログを自動的に閉じます。", "context": "paragraph

--enable-tracking <state>

メトリックライブラリへのデータ送信を有効にします。", "context": "paragraph

--filter <type(s)>

出力から結果のタイプをフィルタリングします: ", "context": "paragraph passes、", "context": "paragraph violations、", "context": "paragraph incomplete、", "context": "paragraph inapplicable。必要なもの: ", "context": "paragraph --format csv。", "context": "paragraph

-f, --format <type(s)>

レポート形式: ", "context": "paragraph html、", "context": "paragraph junit、", "context": "paragraph csv、またはカンマで区切られた組み合わせ。デフォルト: ", "context": "paragraph html。", "context": "paragraph

--no-git-data

Axe Developer Hub への結果送信時に Git ブランチやコミット情報を除外します。「", "context": "paragraph Axe Developer Hub への結果送信", "context": "link text」を参照してください。", "context": "paragraph

--page-name <name>

仕様ファイルの指定された名前のページのみを実行します。", "context": "paragraph pageList。", "context": "paragraph

--page-source

スキャンした HTML ソースを結果に追加します。必要なもの: ", "context": "paragraph --verbose。", "context": "paragraph

--page-title

ページタイトルを結果に追加します。必要なもの: ", "context": "paragraph --verbose。", "context": "paragraph

--remote-proxy <proxy-server>

指定されたリモートプロキシサーバーを経由してトラフィックをルーティングします。", "context": "paragraph

--resume-from <name>

仕様ファイルの名前付きページの前のすべてのページをスキップします。", "context": "paragraph pageList。", "context": "paragraph

--scanned-url

基本 URL と現在のスキャン URL を詳細結果に追加します。Chrome 限定。必要なもの: ", "context": "paragraph --verbose。", "context": "paragraph

--set-distinct-id <id>

異なる ID 値を上書きします。", "context": "paragraph

--set-legacy-mode

非推奨の ", "context": "paragraph レガシースキャンモード", "context": "link textを有効にします。これはバージョン 5.0 で削除される予定です。", "context": "paragraph

important

これは最後の手段のオプションです。それが、スキャンを許可すると報告されていますが、", "context": "paragraph window.open()影響を受けることを避けるべきです。", "context": "paragraph

--set-tracking-url <url>

メトリックデータが送信される URL を上書きします。", "context": "paragraph

-t, --tags

タグで標準ルールセットをフィルタリングします。", "context": "paragraph

--user-agent

ブラウザ用のカスタムユーザーエージェント文字列を設定します。", "context": "paragraph

--validate

仕様ファイルを実行せずに検証します。", "context": "paragraph

-v, --verbose

追加出力を含めます: Axe の結果とツール名、バージョン、環境などのメタデータ。", "context": "paragraph

追加の構成オプションについては、", "context": "paragraph 構成の確認", "context": "link text。

Is this page helpful?

Help us improve this page

Still need help?