アクセシビリティテスト

概要

アクセシビリティテストとは何か？なぜ重要なのか？このレッスンでは、アクセシビリティチェックをUIテストに追加する方法を学びます。

このレッスンを受講する前に

以下のレッスンを修了していると、ここでの学習効果が一層高まります。

基本的なテストの作成
成功させるためのテストの整理
mablでのテストのトリガー

学習目標

このレッスンを修了すると、以下の知識や技能が身につきます。

アクセシビリティテストを定義する
mablトレーナー内でアクセシビリティチェックを作成する
チェックのミスを見直す
どこからでもアクセスできるユーザー体験をつくる

アクセシビリティテストはなぜ重要なのか？

企業やブランドのウェブサイトとアプリケーションは、どんなユーザーでもアクセスしやすく、理解とナビゲーションが簡単なビジュアル、ボタン、操作を備えている必要があります。手動テストでは、アクセシビリティの高いユーザー体験を生むための領域や機能を見落とすことがあるかも知れません。これは、ユーザーからのマイナス評価やブランドロイヤルティの損失、ひいては法的な影響につながることも考えられます。

mablのアクセシビリティテストは、統合ランナーのChromeで利用でき、自動テストの回復力を向上させ、定期的にスケジュールされたテストにアクセシビリティチェックを直接組み込むことができます。これで、どんな人にでも同じユーザー体験を提供できるようになります！

アクセシビリティテストとは？

ウェブアクセシビリティ とは、「ウェブサイトやアプリケーション、ツールがユーザーにとって高い信頼性で見やすく、使いやすく、かつ分かりやすいか」ということです。つまり、「サイトを初めて訪問する人も常連閲覧者たちも、能力に関係なく、同じように企業のウェブサイトを楽しむことができる」という意味です。

アクセシビリティテスト は、発見と検証を兼ねています。できるだけ多くの人に使いやすくするために改善が必要な、ウェブサイトやアプリケーション、ウェブツール内の領域を見つけます。貴社のデザインチームや導入チームは、テストを使ってウェブコンテンツアクセシビリティガイドラインの要件に基づいた改善を行うことができます。

ウェブコンテンツ アクセシビリティガイドラインは、開発者がウェブコンテンツアクセシビリティのテスト可能な達成基準を定義するために設定された一連の標準です。これらの標準の詳細については、WCAG レベル A、AA、AAA ガイドラインを参照してください。

なぜ重要なのか？

mablのアクセシビリティテストは、統合ランナーのChromeで利用でき、自動テストの回復力を向上させ、定期的にスケジュールされたテストにアクセシビリティチェックを直接組み込むことができます。どんな人にでも同じユーザー体験を提供できるようになります

はじめる

まず、アクセシビリティチェックを新しいテストに組み込む方法をお見せします。

アクセシビリティチェックの作成

アクセシビリティチェックは、機能 UI テストの一部です。アクセシビリティチェック専用のテストを作成することも、通常のテストのペースに統合することもできます。このセクションでは、ウェブページやエレメントに個別のアクセシビリティチェックを作成する方法について説明します。

mablトレーナーから開始し、[Insert a Step]をクリックします。
[Accessibility] → [Add an Accessibility Check] を選択します。

ページや要素など、このチェックのターゲットとなる場所を定義してください。

アクセシビリティガイドラインに基づいてテストの失敗をトリガーするアクセシビリティ障害の深刻度をmabl トレーナーに伝えます。

○ 深刻度レベルは下記のように定められています。

■ 失敗しない

■ 致命的（critical）

■ 深刻（serious）

■ 中程度（moderate）

■ 注意程度（minor）

[OK]を選択します。

成功！アクセシビリティチェックがテストに追加されました。

トレーナーの上部にある [Play from beginning（最初からプレイ）] をクリックすると、アクセシビリティチェックのプレビューが表示されます。

注: トレーナーのリプレイではクラウド全体の実行が開始されないため、ダッシュボードにはまだ結果は表示されません。

[Save]と「[Close]をクリックしてmablアプリに戻ってください
クラウド実行のトリガーを始めます
あとはmablに任せましょう！

Tags／Rulesベースのアクセシビリティチェック設定

アクセシビリティガイドラインに基づいて、TagsかRulesベースでアクセシビリティチェックをトリガーすることができます。

上記の「アクセシビリティチェックの作成方法」の手順 1 ~ 3 に従ってください。
[Advanced Settings（詳細設定）]を選択します。

「Default」「Tags」「Rules」から該当するものを選択します。

○ [Default] では、特定のルールを識別して無効にすることができます。

○ [Tags] では、ルールの実行を強制するタグを一覧表示します。

■ タグの例：wcag2a, wcag111

○ [Rules] では、実行する特定のルールを一覧表示します。

■ ルールの例：aria-hidden-focus, color-contrast

■ 特定のタグやルールを追加または無視する際は、GitHub Axe-Core Ruleを参照してください。

[OK]をクリックします。
必ず[Save]をクリックして、結果をmablダッシュボードに送り返してください

テスト出力でのアクセシビリティチェックの結果の確認

UI テスト内に個別のテストまたはステップとしてチェックを追加することは重要ですが、個々のテストの結果を確認する方法も知っておく必要があります。やり方は簡単。こちらを参照してください。

[Result] タブから開始
個々のテストの横にある[Result]を選択します。

[Accessibility violation（アクセシビリティ違反）]のフィルターを追加する

個々のチェックをクリックして違反の深刻度を確認します

高レベルアクセシビリティチェックのパフォーマンスを確認

個々のアクセシビリティチェックのテスト結果の確認方法が分かったところで、アプリケーションのアクセシビリティパフォーマンスを高レベルで確認することが重要です。やり方はこちら！

[Accessibility] に移動します。
ルール違反履歴グラフを確認する

○ フィルターを追加して、より詳細な結果にドリルダウンします。

○ 致命的／深刻／中程度／注意の各レベルのルール違反の数を特定します。

[Accessibility] 内の矢印ドロップダウンを選択します。
違反の深刻度、ID、インスタンス数、URL パス、および違反した axe-core-tag ルールを確認します。

[Actions] ドロップダウンをクリックして、スクリーンショット、ステップトレース、DOM スナップショット、または HTTP アーカイブをダウンロードします。
新しいブラウザウィンドウでFailure Documentationを確認する場合:

オーバーフローメニューを選択し、次に[Rule Documentation]を選択します。

まとめ

復習

Reflect「何を学んだか？」

アクセシビリティテストの定義と重要性

Connect「自分の仕事にどう関係するのか？」

アクセシビリティチェックを既存のテストワークフローに組み込む

Apply「学んだことをどう活かしていくか？」

同じウェブサイト、アプリケーション、ツールのユーザー体験のためにアクセシビリティチェックの失敗を予測し解決する

​​アクセシビリティテスト

概要