Accessible Rich Internet Applicationsロールおよびアトリビュート
Accessible Rich Internet Applications（ARIA）はアクセシビリティ規格です。ARIAでは、支援テクノロジーツールに追加情報を提供するためにHTMLやOutSystems UI上で使用する要素を定義しています。ARIAはページの外観は変更しません。ARIAには、ロール、状態、プロパティがあります。ARIAの状態とプロパティは、ARIAアトリビュートとも呼ばれます。
動的なコンテンツや複雑なページ構造を処理する必要があるときにARIAを使用します。たとえば、ページに複数のセクションがある場合は、role=mainを設定してスクリーンリーダーにメインコンテンツの場所を知らせます。読み込みに時間がかかるブロックがある場合は、aria-busy=trueを設定してスクリーンリーダーに知らせます。ポップアップウィンドウが開くボタンは、aria-haspopup=trueを使用してユーザーに警告することができます。
ARIAのアトリビュートやロールを追加するには、ARIAのコンセプトやHTMLでの処理をよく知っておく必要があります。OutSystems UIによって生成されるHTMLタグやページがデフォルトで提供する意味をARIAを使用して上書きしないよう留意することが重要です。ページをよく確認してから、ARIAのロールやアトリビュートの追加を決定してください。OutSystems UIには、メニューの表示/非表示を処理するアクションなど、デフォルトで追加されるARIAアトリビュートがいくつかあります。
OutSystemsアプリの開発時にARIAのロール、状態、プロパティを追加するには、ウィジェットのAttributeプロパティを編集します。SetAriaHiddenやSetAccessibilityRoleなど、ARIAの特定のプロパティを処理するアクションもいくつかあります。
ARIAを静的プロパティとして設定する
このARIAプロパティは、アプリの実行時に変化しません。ARIAのロールまたはアトリビュートを追加するには、ウィジェットを選択して［Properties］タブに移動し、［Attributes］セクションでロールまたはアトリビュートを追加します。
同じように、ARIAロールを設定できます。
ARIAを動的に設定する
このARIAプロパティは、アプリの実行時に条件に応じて変化します。ARIAのロールまたはアトリビュートを動的に設定するには、［Attribute］フィールドのExpressionでIfキーワードを使用します。たとえば、aria-invalid=If(Form1.Valid, "false", "true")というExpressionのaria-invalidの値は、Form1.Validがtrueであるかfalseであるかによって変化します。
いずれかの必須フィールドが不足してるまたはフィールドの値が正しくないためにフォームが無効である場合、フォームにはaria-invalid="true"というマークが付けられます。これに基づいてスクリーンリーダーがユーザーに警告します。
ARIAのビルトインアクション
ARIAアトリビュートの設定をサポートするビルトインアクションがあります。これらを使用して、ロジックフローのARIAプロパティを設定します。
SetAriaHiddenで要素を除外にする
要素とそこに含まれるすべてのコンテンツを支援テクノロジーツールから除外するには、SetAriaHiddenアクションを使用します。要素に対して明示的にaria-hidden="true"を設定した場合と同じ結果になります。
SetAriaHiddenアクションを見つけるには、［Logic］タブでOutSystemsUI > Accessibilityに移動します。
Alertパターンのロールを変更する
AlertパターンのARIAロールを変更するには、SetAccessibilityRoleアクションを使用します。 SetAccessibilityRoleアクションを見つけるには、［Logic］タブでOutSystemsUI > Accessibilityに移動します。 詳細については、このオンラインヘルプの「Alertパターン」セクションをご覧ください。
SetAccessibilityRoleアクションは、Alertパターンと連動するように設計されています。また、SetAccessibilityRoleを使用してウィジェットの子要素をテストすることもできます。
ARIAの例
このセクションでは、ARIAを使用してOutSystems UIの機能を拡張する方法の例をいくつか示します。
ステータスメッセージ
ステータスメッセージは、支援ツールが読み上げてユーザーに各アクションの状態について知らせるテキストです。これらのメッセージを有効にすることで、スクリーンリーダーを通じて現在のアクションの状態をユーザーに知らせることができます。
ステータスメッセージを有効にするには、以下の手順を実行します。
-
UIパターンを選択します。
-
［Properties］タブの［Attributes］セクションに移動します。
-
roleアトリビュートを作成します。
-
新しいroleアトリビュートの値フィールドにステータスメッセージを入力します。
-
手順は完了です。
以下の図は、ステータスメッセージの例を示しています。
読み上げ可能なラベルを作成する
このセクションでは、ボタンやリンクなどのUIパターンで読み上げ可能なラベルを作成する方法について説明します。
ラベルを作成するには、以下の手順を実行します。
-
画面のUI要素を選択します。
-
［Properties］タブの［Attributes］セクションに移動します。
-
新しいaria-labelアトリビュートを作成します。
-
新しいaria-labelアトリビュートの値フィールドに説明的なラベルを入力します。
-
ボタンのラベル用テキストを選択します（例: Cancel）。
-
［Properties］タブで、新しいaria-labelアトリビュートを作成します。
-
スクリーンリーダーで読み上げる説明的なテキストを指定します。
以下の図は、［Delete］ボタンの読み上げ可能なラベルの例を示しています。この例では、ユーザーがこのボタンを選択したときに、スクリーンリーダーが「Delete product」と読み上げます。
ボタンやリンクのテキストを除外する
このセクションでは、テキストをスクリーンリーダーから除外する方法について説明します。読み上げ可能なテキスト説明（例: 「View product in store」）を含むリンクがある場合、テキストの一部を除外することができます。除外に設定されたテキストはすべて画面に表示されなくなりますが、スクリーンリーダーでは完全な説明を読み上げることができます。
リンクのテキストを除外するには、以下の手順を実行します。
-
アプリケーション画面で、編集するリンクを選択します。
-
除外するリンクの部分を選択します（例: 「View product in store」の「product」）。
-
リンクのその部分を非表示にするCSSクラスを追加します。
-
手順は完了です。
短いラベルに詳細な説明を追加する
ボタンやリンクに付いているラベルが短い場合、スクリーンリーダーで読み上げる内容を定義することができます（例: ［Cancel］ボタン）。
ボタンやリンクの目的を説明するaria-labelを追加するには、以下の手順を実行します。これにより、スクリーンリーダーで詳細な説明を読み上げることができるようになります。
-
ボタンのラベル用テキストを選択します（例: Cancel）。
-
［Properties］タブで、新しいaria-labelアトリビュートを作成します。
-
スクリーンリーダーで読み上げる説明的なテキストを入力します。
-
手順は完了です。