icon-test-automation

Get a Free Trial

Creating, executing, and maintaining reliable tests has never been easier.

Get Started

5月第3週木曜日は、Global Accessibility Awareness Dayでした。グローバルコミュニティがアクセシビリティの重要性を認識しすべての人のために機能するデジタル体験を作るための行動を呼びかけたことから、アクセシビリティが注目されています。mablは、品質エンジニアチームがアクセシビリティテストをソフトウェアテストのプロセスに統合し、開発チームがアクセシブルなアプリやウェブサイトを積極的に構築しやすくなるよう支援することを目的とした一連の記事で、この活動をサポートしています。

アクセシブルなUIの設計とテスト

アクセシビリティの要件とガイドラインは、世界中で大きく異なっています。mablでは、アプリケーションをウェブコンテンツアクセシビリティガイドライン(WCAG)-バージョン2.0と2.1-に照らしてチェックし、多くの国で要件を満たす、またはそれを上回る国際標準規格を採用しています。この規格には12~13のガイドラインがあり、それぞれに3段階の成功基準が設定されています。A、AA、AAAという3段階の成功基準があります。これらの基準により、ウェブサイトやアプリケーションがWCAGガイドラインにどの程度適合しているかが判断されます。

  • レベルAは、適合性の最低レベルであり、アプリやウェブサイトがAの基準をすべて満たしていることを意味します。
  • レベルAAは、すべてのAAとAの要件が満たされていることを意味します。 
  • レベルAAAは、最高レベルでの適合性を示し、すべての基準(A、AA、AAA)を満たしていることを意味します。 

なお、レベルAAAは、ウェブコンテンツによっては満たすことができないため、一般的な方針として推奨されるものではありません。多くの組織は、特にアクセシビリティの改善を開始する際に、各レベルの間にいることに気づくかもしれません。品質管理チームが作業を始めるにあたって、自動アクセシビリティテストで発見される最も一般的な課題と、DevOpsパイプラインでそれらの課題を迅速に解決するためにできることは何かを見ていきましょう。 

ラベルやボタンなどのフォームに含まれる構成要素

ウェブアクセシビリティに関する最も一般的で深刻な問題のひとつに、フォーム要素、特にボタンなど、ウェブページと対話するために必要な要素にラベルがないことが挙げられます。スクリーンリーダーが簡単に読める明確なラベルは、全世界で22億人とも言われる視覚障害者にとって不可欠です。視力障害や失明を抱える人の大半が50歳以上であることを考えると、このすでに膨大な数は、世界人口の高齢化とともに増え続けることになります。Webサイトが申込みに必要なボタンを正しく表示できなければ、操作できない顧客が存在する可能性が高まります。アクセシビリティを向上させるためにmablが独自に行ったより明確なラベルをつける方法の例は、以下のとおりです。 

Screenshot of mabl website contrasting the older labeling system to the new system

mablの自動化されたエンドツーエンドE2Eテストにアクセシビリティチェックが追加されると、品質エンジニアチームは、アクセシビリティダッシュボードでラベリングの問題がグループ化されたことを確認できます。時間をかけてより多くのテストを実行すると、ラベルの付け方の問題の傾向から、品質、開発、およびコンプライアンスチームは、スクリーンリーダーを使用するユーザーエクスペリエンスがどのように改善されるかを理解することができます。  

色のコントラストを改善し、文字をより鮮明に表示

スクリーンリーダーを必要としない何百万人もの視覚障害者にとって、テキスト、ボタン、その他の視覚要素のコントラストを改善することは、アプリやウェブサイトでの体験を著しく容易にすることができます。WCAGではAAレベルの基準とされており、鮮明でコントラストの高い配色を採用することは、アクセスの必要性にかかわらず、すべての人のためにオンライン世界を向上させるアクセシビリティガイドラインの優れた例と言えます。 

mablは、ウェブサイトをよりアクセシブルにする方法を検討する中で、テキストを読みやすく、画像を理解しやすくするために、自社のウェブサイトのカラーパレットに微妙な調整を加えました。
Before and after comparison showing new font colors on mabl website

上の画像の上半分を見ると、テキストはより薄いグレーに、「無料トライアル開始」ボタンは少し薄い紫色になっています。この変更はほとんど見分けがつきませんが、すべてのユーザー、特に視覚障害のあるユーザーにとって、mablのサイト全体がより楽しい体験になるようになりました。 

ローコードテスト自動化でアクセシビリティを簡単にチェック

フロントエンドにおけるアクセシビリティの問題の多くは、最終的にバックエンドの開発手法に関連していることに留意することが重要です。言い換えれば、乱雑なコードは、アクセシブルでないデジタル体験に等しいということです。自動化されたアクセシビリティチェックを開発の早い段階から頻繁に組み込むことで、ソフトウェア開発ライフサイクルのすべての段階で品質とアクセシビリティがプロアクティブに管理されるようになります。 

すでに拡大しつつあるソフトウェアテスト戦略を管理している品質エンジニアにとって、アクセシビリティテストを追加することは、圧倒的なタスクのように思えるかもしれません。しかし、新しいローコードテスト自動化プラットフォームは、既存のエンドツーエンドテストにアクセシビリティチェックを組み込むことをこれまで以上に容易にし、価値と影響を与えるまでの時間を大幅に短縮しています。おそらくさらに重要なことは、これらの新しいテスト自動化ソリューションが、テストデータをトレンドレポートとして組織全体で可視化された課題を共有して、コラボレーションプロセスを簡略化することです。 

mablの14日間の無料トライアルに登録して、アクセシビリティチェックの機能を試してみてください。