Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

リアクティブWebアプリにのみ適用されます

 

 

OutSystems

UIパターンのアクセシビリティリファレンス

OutSystems UIは、WCAG 2.1を考慮して設計されています。しかし、UIパターンを使用して複雑なUIインタラクションをアプリに導入することができます。これらのインタラクションは、アシスティブテクノロジーのユーザーにとってはわかりづらい場合があります。使用するUIパターンのアクセシビリティの詳細については、このセクションを参照してください。

Alertパターン

Alert UIパターンは、重要な情報を画面に表示してユーザーに注意を促すために使用します。Alertパターンには、アラートのタイプに応じて異なるビルトインのARIAロールがあります。

  • AlertTypeプロパティをEntities.Alert.ErrorまたはEntities.Alert.Warningに設定した場合のARIAロールは、alertです。

  • AlertTypeプロパティをEntities.Alert.SuccessまたはEntities.Alert.Infoに設定した場合のARIAロールは、statusです。

    Alertパターン

Alertパターンでは、SetAccessibilityRoleアクションを使用してARIAロールを変更することもできます。ARIAロールを「status」に設定する方法の例を以下に示します。

  1. Alertパターンを選択して、[Properties]タブの[Name]フィールドに「myAlert」と入力します。これが要素の識別子になります。

  2. 画面に表示するAlertに関連するロジックフローを開きます。

  3. Logic]タブでOutSystemsUI > Accessibility > SetAccessibilityRoleを探します。SetAccessibilityRoleアクションをフローにドラッグします。

  4. SetAccessibilityRoleアクションのプロパティで、[WidgetId]を「myAlert.Id」に設定し、[Role]フィールドに「"status"」と入力します。

Alertの表示/非表示を切り替える場合、アラートがアクセシビリティガイドラインに準拠していることを保証するために、aria-hiddenアトリビュートを更新する必要があります。これを行うには、SetAriaHiddenクライアントアクションを使用します。

Alertパターンのロールの設定

MasterDetailパターン

Master Detail UIパターンは、画面を左右に分割して2つのパネルにします。リストペインで項目をクリックすると詳細ペインが開きます。

適切なキーボードインタラクションを構成する

Master Detail UIパターンでは、ページ上でのTABキーの動作に注意する必要があります。tabindex="0"をパターンのリストセクションに設定し、ページ上のどこかでフォーカスが失われないようにする必要があります。リストの項目にテキストが含まれない(画像を使用している)場合や、テキストの内容がわかりづらい(短いテキストを使用している)場合は、aria-labelを使用してスクリーンリーダー向けに詳細を提供します。

適切なフォーカスの切り替えを構成する

フォーカスがパターンの詳細ペインに切り替わるようにします。[Logic]タブのOutSystemsUI > AccessibilityにあるMasterDetailSetContentFocusアクションを使用してフォーカスを切り替えます。できる限り、詳細ペインにデータが読み込まれた後に切り替わるようにします。

構成手順

アクセシビリティに対応したMater Detailパターンを構成するには、以下の手順を実行します。

  1. 使用するListItemパターンを開きます。

  2. ListItemをクリックしたときのアクションを作成します。ここでは、次の2つの入力パラメータを持つListItemOnClickを作成します。

    CurrentRecordId - 現在のレコードを特定します。

    ClickedItemId - クリックされたListItemのIDを特定します。

    マスター詳細でリストアイテムをクリックしたときのアクションの設定

  3. Properties]タブで、tabindexアトリビュートを追加して「0」に設定します。

  4. aria-labelアトリビュートを作成して、アクションに関する説明のテキストをAggregateの後に追加します。たとえば、「YourAggregate + " list item, click to open the detail"」を追加します。また、リストアイテムでキーボードナビゲーションを可能にするため、onkeypressイベントも追加する必要があります。

    マスター詳細のAggregateのarialabel

  5. ListItemOnClickアクションで、MasterDetailSetContentFocusアクションを追加します。これはアクセシビリティのガイドラインに準拠するために必要です。これによって、ListItemOnClickからマッピングされたパラメータを使用して、詳細と次のリストアイテムの間でフォーカスを変更できるようになります。

    1. ContentID(text)- フォーカスするコンテンツのID。

    2. TriggerItem(text)- クリックされたアイテムのID。

    マスター詳細のコンテンツフォーカスアクションの設定

  6. 手順は完了です。