AXで自動化されたアクセシビリティチェック

ax：Webサイトをよりアクセスしやすくするための自動補助関数テスト

障害のある人もそれにアクセスできるようにウェブサイトを設計したとき、どのくらいの時間と労力を費やしましたか？多くの人が「いいえ」と答えるかもしれません。ただし、多数のインターネットユーザーは、色を区別したり、テキストを読んだり、マウスを使用したり、複雑なWebサイト構造を閲覧したりするのが難しいため、Webサイトにアクセスするのが困難です。

アクセシビリティソリューションを確認および実装するための努力が必要であるため、アクセシビリティの問題は見落とされがちです。開発者は、基礎となる基準に精通しているだけでなく、満たされているかどうかも常に確認する必要があります。標準チェックを自動化することにより、アクセシビリティWebサイトの開発を簡素化できますか？

この記事では、AXライブラリといくつかの関連するツールを使用して、Webサイトやアプリケーションの潜在的なアクセシビリティの問題を自動的に確認および報告する方法を示します。そのようなアクティビティに必要な作業量を減らし、いくつかの手動作業を自動化することにより、作成したコンテンツを使用するすべてのユーザーにより良い結果をもたらすことができます。

axはじめに

AXは、補助機能テストを主流のWeb開発にもたらすように設計された自動補助機能テストライブラリです。 Axe-Coreライブラリはオープンソースであり、さまざまなテストフレームワーク、ツール、環境で動作するように設計されています。たとえば、機能テストの開発バージョン、ブラウザプラグイン、またはアプリケーションで実行できます。現在、Webサイトのさまざまなアクセシビリティの側面をチェックするための約55のルールをサポートしています。

ライブラリがどのように機能するかをすばやく実証するには、簡単なコンポーネントを作成してテストしましょう。完全なページは作成しませんが、タイトルだけを作成します。

写真：CODEPENサンプルスクリーンショット

タイトルを作成する際にいくつかの優れたデザインの決定を下しました：

この色はエレガントでスタイリッシュなので、背景とダークグレーへのリンクを設定します
2. 検索ボタンにクールな拡大ガラスアイコンを使用しました
検索入力のタブインデックスを1に設定して、ユーザーがタブキーを押して、ページを開くときにすぐに検索クエリを入力できるようにします。

悪くないよね？アクセシビリティの観点からそれがどのように見えるか見てみましょう。 CDNからaxを追加し、次のようにすべてのエラーをブラウザコンソールにログに記録できます。

例を実行してコンソールを開くと、私たちが抱えている問題をリストしている6つの違反オブジェクトの配列が表示されます。各オブジェクトは、当社が違反したルール、非難すべきHTML要素への言及を説明し、問題を解決する方法に関する情報を支援します。

axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});

以下は、JSON形式で表示される違反オブジェクトの例です。

違反の説明だけを選択する場合、ここにそれが言っていることがあります：

[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]

私たちはデザインの決定にそれほど素晴らしいものではなかったことが証明されています：

1. 私たちが選んだ2つの灰色の影は十分に対照的ではなく、視覚障害のある人が
を読むのは難しいかもしれません
2. 検索ボタンの拡大ガラスアイコンは、スクリーンリーダーを使用している人にボタンの目的に関する指示を提供しません
3. 検索入力タブインデックススクリーンリーダーまたはキーボードを使用している人の通常のナビゲーションプロセスを破り、メニューリンクにアクセスするのが難しくなります。

私たちが期待していなかった他のいくつかのことも指摘しています。さまざまな標準ガイドラインやベストプラクティスからのルールを含む、合計約55の異なるチェックが実行されました。

エラーリストを表示するには、スクリプトをページ自体に挿入する必要があります。完全に実現可能ですが、便利ではありません。自分で何も注入せずにこれらのチェックを任意のページで実行できればさらに良いでしょう。よく知られているテストランナーを使用するのが最善です。これは、Selenium WebDriverとMochaを使用して行うことができます。

Selenium WebDriverを使用してAXを実行します

seleniumを使用してaxを実行するには、Axe-webdriverjsライブラリを使用します。 WebDriverの上で使用できるAX APIを提供します。

セットアップするには、個別のプロジェクトを作成し、NPM initコマンドを使用してNPMプロジェクトを初期化しましょう。必要なすべてのデフォルト値を残すことができます。 Seleniumを実行するには、Selenium-Webdriverをインストールする必要があります。 Phantomjsでテストを実行するため、インストールする必要があります。 Seleniumにはノードバージョン6.9以降が必要なので、インストールしていることを確認してください。

ソフトウェアパッケージをインストールするには、実行してください：

axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});

ここで、Axe-CoreとAxe-Webdriverjs：

をインストールする必要があります

[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]

インフラストラクチャがセットアップされたので、SitePoint.comに対してテストを実行するスクリプトを作成しましょう（個人的なgrみ、男）。プロジェクトフォルダーにaxe.jsファイルを作成し、以下を追加します。

このテストを実行するには、node axe.jsを実行できます。地元のプロジェクトにPhantomjsがインストールされているため、コンソールから実行できません。 NPMスクリプトとして実行する必要があります。これを行うには、package.jsonファイルを開き、デフォルトのテストスクリプトエントリを変更します。

<code>确保按钮具有清晰的文本
确保前景和背景颜色之间的对比度满足 WCAG 2 AA 对比度比率阈值
确保每个 HTML 文档都有一个 lang 属性
确保 <img  alt="AXで自動化されたアクセシビリティチェック" ></img> 元素具有替代文本或无角色或演示角色
确保每个表单元素都有一个标签
确保 tabindex 属性值不大于 0</code>

今すぐNPMテストを実行してみてください。数秒で、AXによって見つかった違反のリストが表示されます。違反が見られない場合、この記事を読んだ後にSitePointがそれらを修正したことを意味する可能性があります。

npm install phantomjs-prebuilt selenium-webdriver --save-dev

これは、テストしているページを変更する必要がないため、CLIを使用して便利に実行できないため、最初のアプローチよりも便利です。ただし、これの欠点は、テストを実行するために個別のスクリプトを実行する必要があることです。残りのテストで実行できればさらに良いでしょう。これを達成するためにモカを使用する方法を見てみましょう。

Mocha <

Mochaは最も人気のあるテストランナーの1人なので、AXを試すのは良い選択のようです。ただし、Axをお気に入りのテストフレームワークに同様の方法で統合できるはずです。さらに、Seleniumサンプルプロジェクトを構築しましょう。

明らかに、Mocha自体とアサーションライブラリが必要です。チャイはどうですか？次のコマンドですべてをインストールします

axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});

ここで、Mochaテストケースで書いたセレンコードをラップする必要があります。次のコードを使用して、テスト/axe.spec.jsファイルを作成します

テストは、結果の長さをチェックすることにより、非常に基本的なアサーションを実行します。テストを実行するには、テストスクリプトを変更してMochaを呼び出します。

[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]

この演習の次の論理的なステップは、テストが失敗したときにより詳細なエラーレポートを生成することです。その後、ページの結果を正しく表示するために、お気に入りのCI環境と統合することも役立ちます。これらの2つのことを演習として読者に任せ、有用な追加のax構成オプションを紹介し続けます。

<code>确保按钮具有清晰的文本
确保前景和背景颜色之间的对比度满足 WCAG 2 AA 对比度比率阈值
确保每个 HTML 文档都有一个 lang 属性
确保 <img  alt="AXで自動化されたアクセシビリティチェック" ></img> 元素具有替代文本或无角色或演示角色
确保每个表单元素都有一个标签
确保 tabindex 属性值不大于 0</code>

（高度な構成、要約、FAQに関するコンテンツは、以前の出力、コンテンツの一貫性の維持、ステートメントと段落構造の調整に基づいて同様に書き直すことができます。 🎜>

以上がAXで自動化されたアクセシビリティチェックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。