初めてのアクセシビリティテスト

アクセシビリティは、障害を持つユーザーを含め、すべてのユーザーがアプリケーションの内容を理解して操作できるようにするためのユーザーエクスペリエンスの重要な要素です。

例として、アプリケーションにアクセスした人がスクリーンリーダーを使用する場合を考えます。

• ページには必要な情報が表示されているか?
• 画像にaltの代替テキスト説明が含まれているか?
• フォームが存在する場合に、入力が必要な情報を把握するためのlabelエレメントが含まれているか?

mablでは、既存のブラウザーテストにアクセシビリティチェックを追加して、画像のaltテキストの指定やフォームへのlabelエレメントの追加など、定められたアクセシビリティガイドラインにアプリケーションが準拠しているかどうかを検証できます。アクセシビリティチェックの出力は、チームがアプリケーションの全体的な「アクセシビリティ品質」を把握し、アプリケーションをあらゆる利用者にとってインクルーシブなものにする手段を見つけるうえで役立ちます。

このガイドでは、mablで初めてアクセシビリティテストを行う場合の手順について説明します。

開始する前に

Webアクセシビリティは、非常に広範で繊細さを伴うテーマです。mablでアクセシビリティテストを行う前には、以下の点に留意するようにしてください。

1. チームが一丸となってアクセスしやすいアプリケーションの構築に取り組みます。すべてのメンバーの関与が必要です。
2. テストはアクセシビリティを実現する取り組みの一部にすぎません。アクセシビリティを念頭に置いてプランニングや設計を行うことで、基本的なミスを犯したり、後で作業をやり直したりすることがないようにします。
3. 自動化されたアクセシビリティテストだけではアプリケーションのアクセシビリティを十分に確保できるとは限りません。手動のアクセシビリティテストを行うことで、キーボード操作でサイト内を移動する人から見たアプリケーション全体の序列や一貫性といった、自動化されたアクセシビリティテストでは見つけられない問題点を明らかにすることができます。

mablでアクセシビリティテストを開始する方法

アクセシビリティチェックを追加する

アクセシビリティチェックを既存のブラウザーテストに追加するには、次の手順を実行します。

1. mablアプリケーションで、[Tests] をクリックします。
2. ブラウザーテストをクリックして、テストの詳細ページを開きます。
3. [Edit test] ボタンをクリックし、[Launch Trainer] を選択します。

Trainerでの既存のテストの表示

4. mabl Trainerウィンドウで、ステップカーソルをクリックしてデフォルトのVisit URL assigned to variable "app.url"ステップの後にドラッグします。

5. Trainerウィンドウの下部にあるプラス記号 (+)をクリックして、新しいステップを追加します。

6. [Accessibility] を選択します。
7. ターゲットを [Page]に設定して、ホームページ全体をチェックできるようにします。
8. この最初のアクセシビリティチェックの失敗条件を [Never fail]に設定します。アプリケーションについての理解が深まると、より具体的な失敗条件を設定できます。

9. [OK] をクリックします。
10. テストを保存し、mabl Trainerを閉じます。

アクセシビリティチェックを実行する

アクセシビリティチェックの詳細な結果を確認するには、次の手順で、クラウドでのテストを実行します。

1. テストの詳細ページで、[Run test] をクリックします。
2. [Cloud run] タブを選択します。
3. [Start 1 run] ボタンをクリックしてテストをトリガーします。

結果を確認する

アクセシビリティチェックの結果は、次の手順で、[Test Output]ページで確認できます。

1. テスト実行ステータス ([Running]、[Passed]、または [Failed])をクリックして、[Test Output] ページを開きます。
2. 「Run an accessibilitycheck」のステップをクリックして、アクセシビリティチェックの結果(全体の成功率と具体的な違反を含む) を確認します。

アクセシビリティチェックの出力

違反には以下の内容が表示されます。

• Help:問題の修正方法とその問題が重要である理由を記載したドキュメントへのリンク
• Element info: 違反が検出されたターゲット要素
• Failure details: 違反の修正に関するアドバイス

アクセシビリティ違反の詳細

次のステップ

今回初めてアクセシビリティチェックを実行し、多くの問題点があったとしても、心配する必要はありません。目的は、アプリケーションを少しずつ改善していくことです。

アクセシビリティの問題点を修正する際は、以下の手法を用いてください。

• 重要なものから処理する:アクセシビリティの問題点は重大度によって分類されます。重大なアクセシビリティ違反から先に対処していくようにします。
• アクセシビリティ違反について調べる:アクセシビリティガイドラインについて不明な点がある場合は、[Help]リンクをクリックしてドキュメントを確認します。
• 協力して取り組む:アクセシビリティチェックの失敗の詳細をチームで共有し、問題点の修正方法を確認します。
• しきい値を設定する:チームと連携して、常に維持できる品質レベルを明確にします。

アプリケーションのアクセシビリティの品質が把握できたら、次のことを行います。

• 特定のエレメントをターゲットにするように、または特定の重大度レベルを上回る違反が存在する場合に失敗するように、アクセシビリティチェックをカスタマイズする
• アクセシビリティダッシュボードでしきい値を設定する

アクセシビリティテストの詳細については、こちらをクリックしてください。