アクセシビリティ
アクセシビリティを備え、あらゆるユーザーが使用できるアプリは、倫理上、実務上、そして時には法律上の理由で重要になります。OutSystemsのユーザーインターフェイス（UI）機能はアクセシビリティを考慮して設計されているため、Web Content Accessibility Guidelines（WCAG）に適合するアプリを作成することができます。UIやアプリのロジックをカスタマイズして、必要な条件に対応することもできます。
一般的に、開発の早い段階からアクセシビリティを考慮し始め、頻繁にテストし、問題を特定し、問題の修正や回避策の提供を行うことを推奨します。このドキュメントでは、必要なアクセシビリティのレベルを実現するための方法をいくつか示します。
以下のガイドラインを考慮してください。
-
アプリが基本的なアクセシビリティ要件を満たすようにします。詳細については、「ビルトインのアクセシビリティ機能を有効にする」をご覧ください。
-
開発の早い段階で、目標としているレベルのアクセシビリティの成功基準に対してアプリをテストし、問題を修正します。詳細については、「アクセシビリティに関する問題のテストと修正」をご覧ください。
-
複雑なインタラクションと動的なコンテンツを見落とさないようにします。クリティカルな問題をすぐに修正します。支援テクノロジーツールへの詳細な情報の提供やページの構造の改善が必要な場合があります。これを行うために、ARIAを使用することができます。詳細については、「ARIAロールおよびアトリビュート」をご覧ください。
-
ページで使用するパターンに関する特別な注記については、「UIパターンのアクセシビリティリファレンス」をご覧ください。
前提条件
このドキュメントの手順と推奨事項に従ってアクセシビリティを備えたアプリの開発を進めるには、以下がインストールされている必要があります。
-
OutSystems UIバージョン2.5.0以降
-
Service Studioの最新バージョン
アクセシビリティ機能のサポートを強化するため、OutSystems UIは頻繁に更新されます。詳細については、ForgeのOutSystems UIのリリースノートをご覧ください。
ビルトインのアクセシビリティ機能を有効にする
OutSystemsには、多くのアクセシビリティ機能が用意されており、適切なコントラスト比、フォーカス、コンテンツへのスキップ設定を備えたアプリケーションの作成などができます。アクセシビリティを備えたアプリの開発を開始するには、Service Studioでアクセシビリティ機能を有効にする必要があります。複雑なインタラクションや設計を使用するアプリでは、特定のカスタマイズや開発を行う必要がある場合があります。詳細については、「ARIAロールおよびアトリビュート」と「UIパターンのアクセシビリティリファレンス」をご覧ください。
Service Studioでビルトインのアクセシビリティ機能を有効にするには、以下の手順を実行します。
- UI Flowsに移動してLayoutsをクリックします。
- 使用するレイアウトを展開します。
- EnableAccessibilityFeatures入力パラメータを選択します。
-
パラメータのプロパティで、Default Valueを［True］に設定します。
EnableAccessibilityFeaturesを「True」に設定すると、このレイアウトを使用するすべての画面で以下の機能が有効になります。
-
フォーカスの状態 - フォーカスを現在の要素に設定し、強調表示できます。
-
コンテンツへのスキップ - ユーザーが画面のナビゲーション要素をスキップし、コンテンツにタブで直接移動することができます。
-
アクセス可能なリンク - リンクの色のコントラストを高くします。
-
コントラストの強化 - 視覚障がいを持つユーザーが認識できるコントラスト比を使用して、画面上のコンテンツを表示できます。
- 手順は完了です。
-
ページタイトル
ページタイトルは、現在表示しているページの名前をスクリーンリーダーがユーザーに伝えるときに使用されます。アクセシビリティに対応したページタイトルを定義するには、以下の手順を実行します。
- ［Interface］タブのUI Flowsに移動します。
- 画面のリストから、タイトルを追加する画面を選択します。
- ［Properties］の［Title］フィールドに、画面のタイトルを入力します（例: 「Main page」）。
- 手順は完了です。
ログインページのデフォルトのページタイトルは空白です。UI Flows > Common > Loginに移動してタイトルを入力します。
スクリーンリーダーのページ言語設定
スクリーンリーダーは、ページの言語に基づいて言語プロファイルを切り換え、適切なアクセントと発音を提供することができます。 ページ言語を定義するには、以下の手順を実行します。
- UI Flowsに移動してLayoutsをクリックします。
- 使用するレイアウトを展開します。
- OnReadyアクションをダブルクリックして開きます。
- ［Logic］タブで、Client Actions > OutSystemsUI > Accessibilityを展開します。
- 以下の図のように、ロジック内のSetLangアクションを選択してOnReadyアクションにドラッグします。
-
［Properties］の［Lang］フィールドに、ISO言語コードを入力します（例: 「en-EN］）。
使用する各レイアウトでこれらの手順を実行してモジュールをパブリッシュした後、ページ言語をテストできます。
ログインページの言語が定義されていないため、忘れずに設定します。説明に従い、UI Flows > Common > Loginに移動し、SetLangアクションを使用して言語識別子を指定してください。
画像の代替テキスト
画像の代替テキストは、altテキストや代替テキストとも呼ばれ、画像の内容を説明するテキスト文字列です。画像の代替テキストを追加することで、スクリーンリーダーで画像の説明を読み上げることができます。
画像の代替テキストを設定するには、以下の手順を実行します。
- 画像を選択して、［Properties］に移動します。
- ［Attributes］セクションで、altを作成します。
-
説明を入力します。装飾用の画像の場合は、alt=""と設定します。
使用する各画像でこれらの手順を実行してモジュールをパブリッシュした後、スクリーンリーダーを使用して画像の代替テキストをテストできます。
テキストヘッダー
テキストヘッダーは、ユーザーがページの構造を視覚的に理解するために役立ちます。通常のテキストより大きい異なるテキストサイズを設定すると、ページ上で視覚的なガイダンスを示すことができ、認知障がいを持つユーザーに対して非常に有用です。また、テキストリーダーがヘッダーを使用することで、ユーザーがページを移動するときにも役立ちます。
アプリのコンテンツを適切に構成するため、ヘッダー構造を設定します。ヘッダー要素（例: h1）を追加するには、HTMLウィジェットにテキストを含め、h1をタグとして指定します。
テキストヘッダーを設定するには、以下の手順を実行します。
- ツールボックスで、HTML Elementウィジェットを検索します（1）。
- それを画面にドラッグします（2）。
- 画面にh1要素を追加するため、HTML Elementウィジェットのプロパティに移動して、［Tag］フィールド（3）に「h1」と入力します。
- HTML Elementにテキストを入力します。
-
ウィジェットのストラクチャを確認し、h1要素内にテキストがあることを確かめます（4）。
各ヘッダーでこれらの手順を実行してモジュールをパブリッシュした後、スクリーンリーダーを使用してテストできます。
テキスト色のコントラスト
OutSystems UIは、デフォルトで色コントラストのアクセシビリティ要件に適合する適切なテキストコントラスト比が設定されています。ビルトインのアクセシビリティ機能をオンにすると、コントラストが改善されます。アプリの色を編集する場合は最低限のコントラスト基準を参照して、有効なコントラストが維持されていることを確認してください。
テキスト間のスペース
ユーザーがアプリケーションのテキスト間のスペースを増やせるようにして、テキストの読みやすさを改善します。これを有効にするには、以下の手順を実行して、ToggleTextSpacingアクセシビリティアクションを実行するアクションを作成します。
-
アプリの画面で、テキスト間のスペースの増加をトリガーするページ要素を選択します （例: ボタン）。
-
新しいクライアントアクションを作成するため、［Properties］の［Events］セクションで、OnClickイベントに移動して［(new client action)］を選択します。
-
アクション名を設定します（例: TextSpacing）。
-
［Logic］タブで、OutSystemsUIをクリックします。
- Accessibilityクライアントアクションフォルダをクリックします。
-
ToggleTextSpacingアクションをフローにドラッグします。
-
手順は完了です。
フォームラベル
ラベルは、ユーザーからリクエストされている情報を説明するキャプションを入力フィールドに提供します。各入力フィールドのキャプションをスクリーンリーダーで読み上げるには、Labelウィジェットをフォーム内の入力に紐付ける必要があります。
参照するフォームのフィールドにラベルを紐付けるには、以下の手順を実行します。
- プレビューでLabelウィジェットを選択します（1）。
- ［Properties］の［Input Widget］ドロップダウンに移動し、ラベルを関連付けるウィジェットを選択します（2）。
- フォームのデモを表示するために、Detail画面テンプレートに基づいて画面を作成します。
各入力フィールドでこれらの手順を実行してモジュールをパブリッシュした後、スクリーンリーダーを使用して入力のキャプションをテストできます。
スクリーンリーダーでのフォームの検証
フォームの入力フィールドを検証する方法の詳細については、「フォームのフィールドを検証する」をご覧ください。
フォームが有効ではないことをスクリーンリーダーやユーザーに通知する方法の詳細については、「ARIAを動的に設定する」の例をご覧ください。
選択した要素を強調表示する
ビルトインのアクセシビリティ機能をオンにすると、ページ上の選択可能なアイテムを視覚的に強調することができます。ユーザーがTABキーを使用して異なる選択可能なアイテム間を移動すると、選択された要素が強調表示されます。
SetFocusアクションを使用して要素を選択する
SetFocusアクションを使用して要素を明示的に選択することができます。たとえば、ユーザーがフォームを含むページを開いたときに入力フィールドを強調表示します。
画面上の要素を明示的に選択するには、以下の手順を実行します。
- ［Interface］タブで、強調表示するウィジェットが含まれる画面を選択して開きます。
- 画面の［Properties］で［Events］に移動し、ドロップダウンメニューからOnReadyアクションを選択します。OnReadyアクションのロジックが開きます。
- ［Logic］タブでOutSystemsUIをクリックし、Accessibilityクライアントアクションフォルダを開きます。
- 以下の図のように、SetFocusアクションを選択してロジックにドラッグします。
- ［Properties］の［WidgetId］に移動し、強調表示するウィジェットのIDを選択します。
これらの手順を実行してモジュールをパブリッシュした後、要素の強調表示をテストできます。
ページ上の特定のコンテンツにスキップする
デフォルトでは、テキストリーダーはヘッダーやメニューなどの繰り返し要素をスキップして、ページのメインコンテンツに進み読み上げます。テキストリーダーがページのメインコンテンツ以外の特定のセクションまでスキップする必要がある場合があります。これを行うには、以下の手順を実行します。
デフォルトのメインコンテナを変更するには、以下の手順を実行します。
- ［Interface］タブのUI Flowsに移動し、てLayoutsを展開します。
- 使用するレイアウトを選択して展開します。
- SkipToContentOnClickアクションをダブルクリックします。
- フローでSkipToContentノードを選択し、アクションのプロパティでTargetIdを編集します。
SkipToContentアクションでウィジェットを使用するには、事前にそのウィジェットのプロパティで名前を入力しておく必要があります。たとえば、要素にMainContentという名前を付けた場合、識別子はMainContent.Idになります。
デフォルトのコンテンツコンテナはMainContentWrapperです。これを見つけるには、UI Flows > Layoutsに移動してアプリで使用するレイアウトをクリックします。
SkipToContentアクションを見つけるには、［Logic］タブでOutSystemsUI > Accessibilityに移動します。
このセクションの記事
- アクセシビリティに関する問題のテストと修正
- OutSystemsリアクティブWebアプリケーションのアクセシビリティに関する問題をテストおよび修正する方法について説明しています。
- Accessible Rich Internet Applicationsロールおよびアトリビュート
- Accessible Rich Internet Applications（ARIA）ロールとアトリビュートの詳細と、アプリケーションに追加する方法について説明しています。
- UIパターンのアクセシビリティリファレンス
- 一部のOutSystems UIパターンに固有のアクセシビリティ設定を構成する方法について説明しています。
- アクテシビリティに関する追加リソースのリンク
- アクセシビリティに関する追加リソース（評価ツール、スクリーンリーダー、色およびコントラストチェッカー、プラクティス）のリンクを紹介しています。