Skip to main content

アプリケーションのアクセシビリティ

アプリケーションのアクセシビリティ

アクセシビリティを考慮した設計を行うことで、アプリケーションがより多くのユーザーをサポートできるようになります。 英国の2010年平等法や米国のリハビリテーション法第508条などの政府による規制により、アプリケーションのアクセシビリティが要求される場合もあります。

補足: また、政府機関が、アプリケーションがアクセシビリティのガイドラインを満たしていることの証明を求める場合があります。 例えば、米国政府は、アプリケーションのリリースごとにリハビリテーション法第508条へのコンプライアンスを証明するため、第三者が検証したVoluntary Product Accessibility Template(VPT)を要求しています。

アクセシビリティの役割

Pega Platform™は、Web Accessibility Initiative-Accessible Rich Internet Applications(WAI-ARIA)規格をサポートしています。 WAI-ARIAは、WAI-ARIAのロールを使用することで、障害を持つユーザーがデジタルコンテンツやウェブアプリケーションを利用しやすくする方法を定義した技術仕様です。

補足: WAI-ARIA規格は、ワールド・ワイド・ウェブ・コンソーシアム(W3C)が規定するWeb Content Accessibility Guidelines(WCAG 2.1)に準拠しています。 可能な限り、アプリケーションはWCAGのAおよびAAレベルをターゲットにする必要があります。

WAI-ARIAのロールは、ユーザーインターフェイス要素に適用される特定の属性です。 ロールは、UI要素に関する補助デバイスとPega Platformのアプリケーションとの間でコミュニケーションができるようにします。 例えば、ロールはスクリーンリーダーに対し、チェックボックスとボタンを区別し、それぞれのコントロールに対し適切なエクスペリエンスをユーザーに提供するよう指示します。

Pega Platformは、3種類のWAI-ARIAロールをサポートしています。 各ロールタイプは、ポータル内の特定のエリアのコンテンツや機能について説明します。

  • ランドマーク – ランドマークのロールは、ポータル内のコンテンツを整理し、ページ内の特定のエリアに素早くアクセスできるようにすることで、スクリーンリーダーを使用する際のナビゲーションを改善します。 ランドマークコンテンツは、コンテンツのナビゲーション、検索、消費に関連する目的別のコンテンツです。 Pega Platformのポータルがランドマークのロールを使用してアクセシビリティをサポートする方法の詳細情報については、Pega Communityのトピック「WAI-ARIA roles in a screen layout」を参照してください。
  • ドキュメント構造 – ドキュメント構造のロールは、ページコンテンツの構造を説明することです。 一般的に、ドキュメント構造の役割はインタラクティブではありません。 ドキュメント構造には、行や列の見出し、メモ、プレゼンテーションなどの要素があります。
  • コンポーネント/ウィジェット – コンポーネントやウィジェットは、インタラクティブなインターフェイスオブジェクトの一つです。 ウィジェットのロールは、アクセシビリティAPIの標準機能に対応しています。 ユーザーがウィジェットに移動すると、補助テクノロジーはキーボードイベントを傍受し、ウェブアプリケーションを通してウィジェットに渡します。

セクション内のダイナミックレイアウトにロールタイプを割り当てることができます。 デフォルトでは、Pega PlatformはWAI-ARIAロールをUIコントロールや、画面レイアウトやダイナミックコンテナなどのその他のコンポーネントに割り当てます。

注: コントロールに関連するHTMLコードをカスタマイズしたり、カスタムコントロールを作成したりする場合は、W3Cガイドラインに従い、UIコントロールにロールタイプを適用してください。

Pega Platformのアプリケーションにおけるアクセシビリティの詳細情報については、Pega CommunityのトピックAccessibility and Pega Platformを参照してください。 ウェブアクセシビリティに関する詳細情報は、W3Cにあります。

アクセシビリティの機能とアップデートされたアプリケーション

デフォルトでは、Pega Platformのすべてのユーザーに対してアクセシビリティが有効になっています。 Pega Platformの以前のバージョンでは、開発者は、個々のアクセスグループに対してアクセシビリティ機能を有効にする必要がありました。 Pega Platformの以前のバージョンからアプリケーションをアップデートした場合、すべてのアクセスグループをアップデートしてEnable accessibility add-onチェックボックスをオフにし、アプリケーションとすべてのアクセスグループのプロダクションルールセットのリストからPegaWAI ルールセットを削除します。

補足: Pega Platformの以前のバージョンでは、WCAG 1規格に準拠したルールセットを使用することで、個々のエンドユーザーのPegaWAI アクセスグループに対するアクセシビリティを実現していました。 ユーザーを、アクセシビリティ機能の必要性に基づいて様々なアクセスグループに分類すること(このことが、偏見や差別的行為とみなされる可能性があります)を避け、WCAG 2.1規格へのコンプライアンスを確保するため、Pega Platformの現行バージョンにアップデートされたアプリケーションでは、PegaWAIルールセットの使用を中止してください。

次の問題に答えて、理解度をチェックしましょう。

アクセシビリティに関するPega Platformのベストプラクティス

また、Pegaは、補助デバイスの使用をサポートするアクセシビリティのベストプラクティスを推奨しています。 次のテーブルは、アプリケーションのアクセシビリティを改善する目的で開発者が実行できるいくつかの設定オプションのリストを挙げています。

設定 目的
ボタン、リンク、アイコン、入力フィールドなどのすべてのコントロールには、たとえラベルが非表示であってもラベルを付ける。 スクリーンリーダーを使用しているユーザーに、コントロールの目的を公表する。
アプリケーションのスキンをカスタマイズする際に、コントラストの高い配色を設定する。 視力に限界があるユーザーのために十分なコントラストを確保する。
WAI-ARIA Authoring Practicesの一部としてW3Cが提供する推奨事項に従い、コントロールにキーボードコマンドを設定する。 キーボードのみの操作に限定されているユーザーのために、期待通りのキーボード操作を実現する。
ボタンはアクションにのみ使用し、リンクはナビゲーションにのみ使用する。 補助デバイスがユーザーに説明できる一貫したユーザー体験を提供する。
オーバーレイやモーダルの解除に[閉じる]ボタンを使用できるようにする。 ユーザーが補助デバイスを使ってアクセスできるナビゲーション要素を提供する。
デフォルトで1つのコンテナだけをメインコンテンツエリアとしてマークする。 補助デバイスがフォームの主なワークエリアを特定できる機能を提供する。
回答が予測できるフィールド(一連の数字や色など)には、テキスト入力の代わりにドロップダウンリストの選択肢を使用する。 補助デバイスがユーザーに読み上げるオプションの表示リストを提供する。

アクセスできるアプリケーションの設計を構成するためのベストプラクティスに関する追加ガイダンスについては、Pega Communityのトピック「Best practices for accessibility」を参照してください。 個々のコントロールやアクションがどのようにアクセシビリティをサポートしているかの詳細情報については、Pega Communityのトピック「Supported accessible run-time behavior」を参照してください。

Accessibility Inspector

Accessibility Inspectorツールを使用すると、アプリケーション内のアクセシビリティに関する問題を特定し、修正できます。 Accessibility Inspectorは、App StudioとDev Studioの両方で利用できます。Dev Studioから起動した場合、ユーザーポータルでも利用できます。

注: Accessibility Inspectorは、アプリケーション内のPega固有の一般的なアクセシビリティに関する問題を特定しますが、正式な自動および手動のアクセシビリティテストの代わりにはなりません。 自動化されたテストツールはアクセシビリティの問題の30%程度しか検出できないため、axe-coreのような自動化されたテストツールと実際のユーザーで必ずテストを行う必要があります。

ベストプラクティスに対するコンプライアンスの監査

Accessibility Inspectorがアクティブになっている場合、アプリケーションのアクセシビリティに悪影響を及ぼす可能性がある設定を特定します。

Accessibility Inspector Expanded Crosshairs

Accessibility Inspectorは、見つかった問題を、以下の4つのカテゴリーに分類します。

  1. コンテンツ – コントロールの設定に関する問題。 アイコンにヘルパーテキストやラベルがない、などの問題が挙げられます。
  2. 構造 – ポータル内のコンテンツの構成に関する問題。 見出しレベルの階層が順番通りに並べられていないことが原因で、スクリーンリーダーが混乱する可能性がある、などの問題が挙げられます。
  3. 双方向性 – 補助デバイスがUIを操作する方法に影響を与える問題。 ポータルの設定に、コンテンツにスキップするナビゲーションがないため、ユーザーがEnterキーを使ってメインコンテンツに移動できない、などの問題が挙げられます。
  4. 互換性 – フォームで使用されるPegaのUI要素に関する問題。 フォームがレイアウトグループではなく、廃止されたタブグループレイアウトを使用している、などの問題が挙げられます。

アプリケーションのアクセシビリティを低下させるUI構成を検査するには、ContentStructuralInteractivityCompatibilityの見出しの左側にある矢印を展開してください。 展開すると、各問題の説明が表示されます。 問題を展開すると、影響を受けるUI要素が表示されます。 UI要素の上にマウスのカーソルを置き、十字線のアイコンをクリックすると、その要素がDev Studioで開き、問題が対処されます。

色覚異常に関するプレビュー

Disability previewオプションを使用すると、4種類の色覚異常を持つユーザーにアプリケーションがどのように表示されるかを確認できます。 Disability previewでは、色覚異常をシミュレーションするための以下の4つのモードが用意されています。 

  1. Achromatopsia(色覚異常、色が判別できない)
  2. Deuteranopia(D型色覚、赤緑色弱)
  3. Protanopia(P型色覚、赤緑色弱)
  4. Tritanopia(T型色覚、青黄色弱)

色覚異常があるユーザーに見えるアプリケーションの外観を模倣するには、「Disability preview」ラベルの右側にあるドロップダウンをクリックします。 デフォルトでは、Disability previewはNoneに設定されています。 プレビュー設定を変更すると、選択した色覚異常に合わせてカラーパレットが一時的に変更されます。 元のカラーパレットに戻すには、Noneを選択するか、Accessibility Inspectorを閉じます。

次の画像では、スライダーを動かすと、標準的なフォームの表示と、T型色覚を持つユーザーが見られる表示を比較できるようになっています。 

次の問題に答えて、理解度をチェックしましょう。

トレーニングを受講中に何か問題がありましたら、こちらをご覧ください: 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