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