免責事項：この文書は、WCAG 2.1 AAアクセシビリティの基準または類似の基準に対する適合を表明または提示するものではありません。Pendoのガイドのアクセシビリティ機能は、アクセシブルなガイドを作成できるように設計されていますが、コンテンツがいかなるアクセシビリティの基準を満たすことを保証するものではありません。Pendoがご紹介するあらゆる推奨項目は、現在の機能セットに基づく提案にすぎません。
この記事はビジュアルデザインスタジオ（Visual Design Studio）に関する内容です。ウェブコンテンツへのアクセシビリティは、すべてのユーザーが公平かつ平等にインターネットにアクセスできるために必要です。Pendoガイドは、ユーザーがアプリに関する情報を入手し、お客様とコミュニケーションをとるための重要な手段です。ガイドのアクセシビリティ機能は、スクリーンリーダーやその他のツールで使用され、障がいのあるユーザーがPendoガイドを見つけて操作できるようにする機能です。
一部の機能は自動的に適用され、すべてのガイドで利用できます。バッジとキーボードナビゲーションのフォーカスとHTML属性は、すべてのガイドで利用できます。他の機能はガイド作成時にアクティブ化または設定する必要があります。自動フォーカス、ARIAラベル、代替テキスト、タイトル、ARIAの役割は、ガイド作成時にビジュアルデザインスタジオで設定できます。
これらの機能は、アクセシブルなウェブコンテンツを作成する上で重要ですが、アクセシビリティガイドラインにはビジュアルデザインスタジオの機能では対応できない追加要件があります。色のコントラスト、埋め込み動画や音声の字幕、クリック可能な要素サイズといった要素は、個別に実装する必要があります。
ヒント：ウェブコンテンツのアクセシビリティは、単にガイドの構造や外観だけにとどまらず、考慮すべき点が多い複雑なトピックです。多くの企業では、専門家やコンサルタントを雇って、アクセシブルな体験を提供するために必要なさまざまな要件に対応しています。特定のアクセシビリティの基準やガイドラインを満たすためには、監査と評価が必要になることがあります。ウェブアクセシビリティおよびWeb Content Accessibility Guidelines（WCAG）の詳細については、World Wide Web Consortium（W3C）のウェブサイトをご覧ください。
要件
- エージェントバージョン2.126.0以降
- 管理者、ガイド作成者、またはコンテンツ編集者のユーザーの役割
- ビジュアルデザインスタジオ（Visual Design Studio）
- Pendoウェブ
新しいアクセシビリティ機能を使って最高の体験を提供するために、最新のアップデートを自動更新で速やかに適用するようにエージェントを設定することをお勧めします。エージェントバージョンを設定するには、以下の手順を実行してください。
- ［サブスクリプション設定（Subscription Settings）］]に移動し、［アプリケーション（Applications）］タブでアプリを選択します。
- ［エージェント設定（Agent Settings）］に移動します。
- ［ステージング環境（Staging Environment）］または［本番環境（Production Environment）］で、［設定（Settings）］を選択します。
- 必要なエージェントバージョンを選択し、［保存（Save）］を選択します。
推奨事項
ガイドのアクティベーション
バッジでアクティベーションされるガイドは、起動するかどうかをユーザーが選択できるため、自動ガイドやターゲット要素ガイドよりもアクセシブルです。
バッジの位置は常に［インライン右（inline right）］、または［インライン左（inline left）］に設定する必要があります。UIにおけるバッジの配置場所は制限されますが、キーボード操作でバッジを順にタブ移動できます。バッジがDOMの最後にロードされることはありません。
ガイドの作成
- 説明用の代替テキストまたはARIAラベルを可能な場所に追加します。これらを支援技術が読み上げます。
- ARIAの役割は、ガイドの種類および支援技術によるガイドの認識方法によって異なります。
- Pendoガイド用のARIAの役割である［ダイアログ（Dialog）］、［バナー（Banner）］、または［補完（Complementary）］を使用できます。
- 最高のガイド体験を提供するには、オートフォーカスを常に選択する必要があります。アプリケーション自体もフォーカスを取得しようとする場合（例：モーダル）、競合が発生する可能性があります。
- ガイド要素のカラーコントラスト比がガイドテーマのWCAG AA基準に適合していることを確認します。
ガイドのアクセシビリティ設定
アクセシビリティ機能の設定は、ビジュアルデザインスタジオでガイドのコンテナとビルディングブロックの設定を使って行います。要素に利用可能なアクセシビリティ設定がある場合は、［編集（Edit）］モーダルの［アクセシビリティ（Accessibility）］タブに表示されます。
カラーコントラストチェッカーは、ビジュアルデザインスタジオで［テーマ設定（Theme Settings）］からテーマを作成または編集するときに使用できます。
設定可能な属性
- Color contrast。テキストを含む要素の背景とフォントの色。
- alt（画像の代替テキスト）。画像のビルディングブロック。
- aria-label。コンテナ、閉じるボタン、ボタン、バッジ、テキストのビルディングブロック。
- aria-modal。背景が有効な場合のコンテナ。
- role。各ガイドステップのコンテナ。
- title。動画のビルディングブロック。
- Autofocus this step。各ガイドステップのコンテナ。
設定不可の属性（自動適用）
- h2、h3、p（セマンティックヘッダー）。タイトル、サブタイトルおよび段落のテキストブロックは、適切なヘッダーまたは段落要素に自動的に割り当てられます。
- aria-labelledby。2つの要素間の関係を作成します。この関係は、自由記入式、はい/いいえ、多項選択式、数字による選択肢、およびNPS調査で使用します。
- aria-describedby。2つの要素間の関係を作成します。この関係は、数字による選択肢の投票調査とNPS調査で使用され、スケールの最初と最後の数値をテキストの説明と結びつけます。
- aria-expanded。ガイドおよびリソースセンターのバッジに自動的に適用されます。
-
role。
role="group"は、投票調査ビルディングブロックのはい/いいえボタンと多項選択式ラジオボタンに自動的に適用されます。
テーマカラーのコントラストチェッカー
テーマ設定では、テキストを含むすべての要素にコントラストチェッカーが使用できます。これを使って、ガイドに適用されている色の選択肢が、WCAG AAの4.5:1またはWCAG AAAの7:1コントラスト比の要件に適合しているかを確認できます。
テーマ設定で要素を選択します。その要素のスタイル設定がページの右側に表示されます。コントラストチェッカーは、スタイル設定の一番下にあります。背景やフォントの色を変更すると、リアルタイムで更新されます。選択した項目に適切なコントラストがない場合はWCAGタグが赤色になり、コントラスト比の要件を満たしている場合は緑色になります。
コンテナのアクセシビリティ設定の編集
ガイドステップの端を選択して、コンテナの設定画面を開きます。各ガイドステップには、ステップの外観と動作を制御するための固有の設定があります。複数ステップのアクセシビリティガイドを作成する場合は、［アクセシビリティ（Accessibility）］タブの設定をガイドステップごとに行います。
コンテナのアクセシビリティ設定
- ARIAラベル - アクセシブルな名前（ARIA Label - Accessible Name）。ガイドコンテナ全体のARIAラベルを設定します。
- 役割（Role）。使用可能な役割のドロップダウンメニューからARIAの役割を選択します（役割の設定なし、記事、バナー、補完、コンテンツ情報、ダイアログ、フォーム、メイン、ナビゲーション、表示、地域）。
- このステップに自動フォーカスする（Autofocus this step）。ガイドへの支援技術のフォーカスをトラップします。
- ARIAラベル - 閉じるボタン（ARIA Label-Close Button）。コンテナ設定でも切り替えることができるデフォルトの閉じるボタンにARIAラベルを設定します。
-
ARIAモーダル（ARIA Modal）。モーダルの背景が有効になっている場合は、
aria-modal="true"に設定します。これは、モーダルの下にある背景コンテンツがインタラクティブに使用できないことを示します。
テキストまたはボタン設定の編集
ビルディングブロックを選択して、ビルディングブロックの設定画面を開きます。［ARIAラベル］は、テキストおよびボタンのビルディングブロック用に設定できます。
テキストのビルディングブロック用のセマンティックHTML
テキストのビルディングブロックは、テキストのビルディングブロック設定で選択したテーマスタイルに従って、HTMLのセマンティックヘッダーを自動的に割り当てます。
-
タイトルは
h2要素です。 -
サブタイトルは
h3要素です。 -
段落は
p要素です。 -
カスタムは最後に割り当てられたスタイルのセマンティックヘッダーを保持します（例：段落スタイルのテキストブロックがカスタムスタイルに変更された場合、
p要素のままです）。
画像設定の編集
画像のビルディングブロックを選択して、設定を開きます。［画像の代替テキスト（Image Alt Text）］は、画像のビルディングブロック用に設定できます。代替テキストは画像にアクセシブルなテキストを追加する場合に最適な方法です。ARIAラベルは通常、画像には使用しません。
ビデオ設定の編集
動画のビルディングブロックを選択して、設定を開きます。［タイトル（Title）］は、動画のビルディングブロック用に設定できます。タイトルは動画にアクセシブルなテキストを追加する場合に最適な方法です。
投票とアンケート調査設定の編集
さまざまな投票調査のビルディングブロックをアクセシブルにするために、設定可能な属性と設定不可の属性の組み合わせが可能です。
投票調査の回答フィールドを選択して、投票とアンケート調査の設定画面を開きます。投票とアンケート調査のテキストおよびボタン要素には、ARIAラベルフィールドがあります。
aria-describedby、aria-labelledby、およびグループの各役割は自動的に適用され、投票調査の回答をそれぞれの質問テキストに結びつけます。
リソースセンターのアクセシビリティ設定
アクセシビリティ設定は、ビジュアルデザインスタジオのリソースセンターページから［自分のアプリで管理（Manage in My App）］を選択して設定します。ARIAラベルは、ホームビューとバッジ上の要素に使用できます。リソースセンターがステージングされ公開されると、キーボードナビゲーションおよびフォーカス要素が自動的に適用されます。ホーム、ガイドリスト、およびオンボーディングモジュールは、キーボードナビゲーションおよびスクリーンリーダーツールをサポートしています。サンドボックスおよびインテグレーションモジュールは外部コードを使用しているため、アクセシビリティ機能は使用できません。
設定可能な属性
- Color contrast。テキストを含む要素の背景とフォントの色。
- aria-label。コンテナ、閉じるボタン、戻るボタン、バッジ。
設定不可の属性（自動的に適用）
- aria-expanded。ガイドおよびリソースセンターのバッジに自動的に適用されます。
- aria-hidden。リソースセンターのオンボーディングモジュール内の進行状況サークルは見た目だけのものであるため、支援技術では非表示にするために使います。
-
aria-modal。
aria-modal="false"はリソースセンターに自動的に適用されます。 -
role。
role="dialog"はリソースセンターに自動的に適用され、role="group"はガイドリストモジュールに自動的に適用されます。 - aria-labelledby。ガイドリストモジュールに自動的に適用されます。
ホームビュースタイリングの編集
［ホームビューを編集（Edit Home View）］モーダルの［スタイリング（Styling）］タブを選択し、［アクセシビリティ（Accessibility）］メニューを開きます。閉じるボタン、ダイアログヘッダー、戻るボタンのARIAラベルを設定します。
バッジのスタイリングの編集
バッジ設定は、ビジュアルデザインスタジオで、リソースセンターのアクティベーション設定から行います。リソースセンターバッジのARIAラベルを設定します。バッジは昇格および公開時に、アクセシブルなHTML要素とフォーカス状態を自動的に使用します。
これらのアクセシビリティ機能を使用するには、［アクティベーション設定（Activation Settings）］でバッジをオンにする必要があります。
画像のスケーリング
WCAGガイドラインでは、コンテンツは「情報や機能はそのままで、かつ2次元でスクロールする必要がないように表示される」べきとしています。ガイドコンテナは、この要件を満たすように画像のビルディングブロックの大きさを自動的に調整します。ユーザーがガイドを拡大すると、画像はコンテナの幅に比例して自動的に調整され、画像が切り落とされたり、水平スクロールバーが表示されたりすることはありません。
最大幅の画像に対するベストプラクティス
Pendoのガイドコンテナは、外側のパディングがデフォルトで40ピクセルになっているため、ガイドコンテンツをゆったり配置でき、ガイドを簡単に設計できます。塗りつぶしが100%に設定された画像は、デフォルト設定である40ピクセルのパディングのままです。マージンが負の値になると、画像をコンテナの幅まで最大限拡大できます。画像のスケーリングでは、ユーザーがズームインまたはズームアウトしたときにコンテナの幅に合わせて画像が自動的に調整されます。
最大幅の画像の設定
すべての数値は負の値です
- 左マージン：-40px
- 右マージン：-40px
- ガイドコンテナのパディング設定を変更した場合は、マージンの負の値をコンテナのパディング値に合わせます
注：カスタムのパディングとマージンを使用して画像のビルディングブロックを、デフォルト設定としてサポートされていない位置に配置した場合、画像をスケーリングすると、これらの画像の表示と配置が歪むことがあります。さまざまなズームレベルでガイドをチェックして、カスタム設定により画像の自動スケーリングに問題が発生しないかを確認します。
フォーカス
フォーカス状態は、障がいのあるユーザーがマウスやタッチパッドを使わずにアプリを使用するのに役立ちます。フォーカス状態は、CSSスタイル設定に応じて、要素の周囲にリング（輪）として表示されます。Chromeバージョン83以降では、アプリ内のフォーカス要素をスタイル設定できます。ブラウザでこれらの要素を選択したり、ページ内をタブで移動したりすると、要素の周囲にアウトラインのようなフォーカス状態が追加されます。
以下の画像は、Googleが提供するフォーカスリングの例です。
HTMLタグ - Button
バッジはHTMLでbuttonタグを使用します。アクセシビリティ機能を追加する前は、バッジではimgタグまたはinputタグを使用していました。ガイドとリソースセンターのバッジはどちらもbuttonタグを使用します。以下の画像は、ガイドバッジのHTMLの例を示しています。
自動フォーカス
このステップに自動フォーカスする（Autofocus this step）。ガイドを閉じるまでガイドステップの支援技術へのフォーカスをトラップします。この設定は、各ガイドステップのコンテナの設定画面で行います。
ヒント：［このステップに自動フォーカスする］は、複数ステップガイドの各ガイドステップで有効にすることで、ウォークスルー全体を通してガイドコンテンツでデバイスフォーカス支援を継続的に行うことができます。自動フォーカスがない場合、ガイドコンテンツがDOMの最下層で失われ、ユーザーはページ全体をタブで移動してガイドコンテンツにフォーカスする必要があります。
ARIAラベル、代替テキスト、タイトル
ARIAラベル、代替テキスト、タイトルは、UIに記述されていない要素をアクセシブルな方法で識別するために使用されます。アクセシビリティツールでは、これらのプロパティをさまざまな方法で使用します。たとえば、スクリーンリーダーはARIAラベルをユーザーに読み聞かせることができます。［ARIAラベル］はテキストとボタンのビルディングブロックおよびリソースセンター要素を参照し、［代替テキスト］は画像のビルディングブロックに適用され、［タイトル］は動画のビルディングブロックに使用されます。
ARIAラベル、代替テキスト、タイトルは、各ビルディングブロックに追加されます。
ARIAラベルは、リソースセンターのホームビューとバッジで使用できます。{UNSEEN_COUNT}を追加すると、リソースセンターのバッジに通知の数を表示できます。
その他の情報については、ARIAラベルおよび画像の代替テキストに関するW3Cの定義をご覧ください。
キーボードナビゲーション
障がいのあるユーザーや一部のデバイスを使用しているユーザーは、カーソルまたはタッチスクリーンでページを操作できない場合があります。キーボードナビゲーションは、コンテンツにアクセスするための重要な入力手段です。ユーザーは、キーボード入力で、ガイドのコンテンツやリソースセンターのほとんどの操作が可能です。なお、サンドボックスおよびインテグレーションモジュールは、キーボードナビゲーションでは使用できません。
- Escキーを押して、現在アクティブなガイドを閉じます。
- Tabキーを使用してガイドステップの要素を順に移動します。
- SpaceキーとEnterキーを使用してガイド内の要素を操作します。
ヒント：自動フォーカス設定により、ガイドステップでフォーカスがトラップされ、キーボードでの操作が容易になります。ガイドコンテンツは、ページのすべてのコンテンツよりも下のDOMの最下層に配置されます。ガイドで自動的にフォーカスがトラップされない場合は、ユーザーはページ上のすべての要素をタブで移動してガイドを操作できます。
ガイドARIAの役割
ARIAの役割は、支援技術の要素を識別し、ユーザーに適切な支援を提供します。役割はARIAの役割モデルで定義され、個別の目的があります。たとえば、ウィジェットには複数の役割があります。インタラクティブな要素を識別したり、ページ上のコンテンツを編成し、通常はインタラクティブではないドキュメント構造を識別したりします。
役割はガイドステップごとに設定されます。
利用可能な役割
- 役割の設定なし
- 記事
- バナー
- 補完
- コンテンツ情報
- ダイアログ
- フォーム
- メイン
- ナビゲーション
- 表示
- 地域
ヒント：W3Cでは、コンテンツをユーザーに公開した後は、ユーザーの行動や時間の経過によって役割を変更しないよう推奨しています。プラットフォームと支援デバイスには、通常、役割を段階的に更新できるAPIはありません。支援技術で最初に参照される役割は、一般的にキャッシュに保存され、更新はされません。公開されたガイドのARIAの役割を変更する必要がある場合は、ガイドを複製し、役割を変更した後で更新したガイドを公開します。それと同時に以前のバージョンは無効にします。ガイドを複製すると、新しいIDが生成され、新しいガイドコンテンツが支援デバイスのキャッシュに保存されます。
アクセシビリティ機能の制限
- サンドボックスおよびインテグレーションリソースセンターモジュールはアクセシブルではありません。
- URLリンクアクションがあるボタンは、リンクであることをユーザーに通知しませんが、ARIAラベルで説明テキストを追加できます。