Skip to main content

アクセシビリティの検査

Pega Communityのロゴ

注: 次のコンテンツはPega Communityを参照したページで、モジュール内容の理解度を高める目的で含まれています。

障害のあるユーザーがアプリケーションにすばやくアクセスし、効率的に操作できるように、アクセシビリティの問題を特定して修正します。 Accessibility Inspectorツールを使用すると、視覚能力が異なるユーザーにアプリケーションがどのように見えるかを確認したり、アクセシブルでないUIコンポーネントを見直したりすることができます。

Accessibility Inspectorのユースケースについて、動画をご覧いただけます
  1. 検査するアプリケーションやポータルを開きます。

  2. 「Developer」ツールバーの「Accessibility」アイコンをクリックします。

  3. 「Accessibility Inspector」パネルで、アプリケーションがアクセシビリティのベストプラクティスに準拠しているかどうかを確認します。

    1. 「Disability preview」リストで、視覚能力のプレビューを選択します。

      リストにはさまざまなタイプの色覚異常が含まれているので、それぞれの状態をシミュレートし、デザインの判断材料にすることができます。
      例: 「Protanopia」を選択すると、アプリケーションのデザインやコントラストレベルが赤緑色弱のユーザーに適しているかどうかを確認できます。
      フィルターなし(左)と赤緑色弱フィルター(右)のUIコンポーネントのサンプル
    2. 問題カテゴリーのリストで、各ノードを展開し、アクセシビリティに影響を与えるルールに移動します。

      例: 「Content」「Provide an associated label」「Driver」をクリックして、ラベルのないセクションを開き、編集します。
      補足: すべてのワーニングが対応を必要とするわけではありません。 たとえば、装飾的な画像にラベルを追加すると、スクリーンリーダーで有用な情報が見にくくなる可能性があります。
      Accessibility InspectorでのUIに関する問題点のリスト
  4. オプション:

    問題の影響を受けるページ要素をハイライト表示するには、以下の操作を行います。

    1. 「Accessibility Inspector」パネルで、「Display menu options for Accessibility Inspector」アイコンをクリックします。

    2. 「Draw outline around on-page issues」をクリックします。

補足: アクセシビリティ標準とベストプラクティスで問題点を減らす方法については、次の記事で説明しています。
トレーニングを受講中に何か問題がありましたら、こちらをご覧ください: Pega Academy サポートのよくある質問 (FAQ).

このコンテンツは役に立ちましたか?

改善できるところはありますか?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice