スクリーンリーダーをサポートするAlexa Presentation Language視覚要素を作成する

Note: Sign in to the developer console to build or publish your skill.

画面付きのAlexaデバイスには、目の不自由なユーザーが画面上のコンテンツを操作できるようにするためのスクリーンリーダー機能を搭載することができます。たとえば、Echo Showデバイスには、VoiceViewスクリーンリーダーがあります。ユーザーは、画面をタップしたりスワイプしたりすることで、コンテンツの説明を聞くことができます。

Alexa Presentation Language（APL）はスクリーンリーダーをサポートしています。この機能を活用し、より多くのユーザーに対してスキルのアクセシビリティを確保するには、APLドキュメントでコンポーネントについての情報を提供します。スクリーンリーダーはこの情報を使って、ユーザーへの説明をレンダリングします。

Echo Showデバイスには、VoiceViewスクリーンリーダーが搭載されています。音声でVoiceViewを有効にするには、「アレクサ、ボイスビューをオンにして」と言います。

VoiceViewが有効な場合、Alexaは画面に表示された各コンポーネントを強調表示します。コンポーネントをタップすると、その項目の説明が聞こえます。スワイプして画面を調べることもできます。

VoiceViewでのインタラクティブコンポーネントのタッチ操作は、通常とは異なります。

ボタンやリンクをアクティブにする

コンポーネントをタップして選択します。
画面上の任意の場所をダブルタップしてアクティブにします。

コンポーネントにスライドをつけたり、スワイプで動作したりするようにする

コンポーネントをタップして選択します。
画面上の任意の場所をダブルタップして長押しし、左右にスライドします。

スクリーンリーダーの使い方の詳細な手順については、EchoデバイスのVoiceViewスクリーンリーダーガイドを参照してください。

スキルにアクセシビリティを組み込む場合、テストの段階でデバイスのVoiceViewを有効にします。

ユーザーが画面上のAPLコンポーネントをタップすると、スクリーンリーダーは次の文字列を作成して読み上げます。

${accessibilityLabel}. ${role}. ${usageHint}.

たとえば、ボタンをタップすると、次のような音声文字列がレンダリングされるとします。「項目を削除します。ボタンです。ダブルタップしてアクティブにします。」

この文字列は、次の各パートに対応します。

accessibilityLabel - 「項目を削除します」
role - 「ボタンです」
usageHint - 「ダブルタップしてアクティブにします」

APLドキュメントでは、基本コンポーネントのプロパティであるaccessibilityLabelとroleを使ってこの文字列の各パートを制御します。スクリーンリーダーは、コンポーネントに指定されたroleに基づいて、usageHintを生成します。

accessibilityLabelでコンポーネントを説明する

accessibilityLabelコンポーネントプロパティに、コンポーネントを説明する文字列を設定します。Textコンポーネントの場合、大抵はコンポーネントが表示するテキストと同じになります。Imageの場合、このプロパティには画像の説明を設定します。

スクリーンリーダーでは、accessibilityLabelプロパティに含まれるマークアップ文字やインライン書式設定文字がサポートされない場合があります。これらの文字はTextコンポーネントのtextプロパティではサポートされていますが、accessibilityLabelに渡す前に削除してください。Textコンポーネントで使用できるインライン書式設定用マークアップの一覧については、textを参照してください。

以下は、textプロパティとaccessibilityLabelプロパティに、データソースから提供された異なる文字列を設定したTextコンポーネントの例です。

クリップボードにコピーされました。

{
  "type": "Text",
  "text": "${accessibilityExampleData.mainTextContent}",
  "accessibilityLabel": "${accessibilityExampleData.sanitizedAccessibilityString}"
}

文字列を含むデータソース：

クリップボードにコピーされました。

{
  "accessibilityExampleData": {
    "mainTextContent": "これは、表示するテキスト文字列に<b>太字の書式</b>を使用した、情報を示すコンポーネントです。また、<code>コード書式</code>も使用しています。",
    "sanitizedAccessibilityString": "これは、表示するテキスト文字列に太字の書式を使用した、情報を示すコンポーネントです。また、コード書式も使用しています。"
  }
}

種類の異なるコンポーネントにラベル付けするタイミングのベストプラクティスについては、スクリーンリーダー対応のベストプラクティスを参照してください。

roleでコンポーネントの目的と使い方を説明する

roleコンポーネントには、指定できるロールの一覧にある値を設定します。roleは、コンポーネントの目的を表します。たとえば、buttonのroleは、そのコンポーネントがユーザーがアクティブにできるボタンであることを表します。roleに割り当て可能なすべての値の一覧については、roleを参照してください。

スクリーンリーダーは、roleを使って、アクセシビリティ文字列で読み上げるusageHintテキストを判断します。

roleがbuttonやlinkなどのインタラクティブコンポーネントを表している場合、usageHintではそのコンポーネントの操作方法を説明します。ほとんどのインタラクティブコンポーネントの場合、usageHintは「ダブルタップしてアクティブにします」となります。
roleがtextやimageなどの静的なコンポーネントを表している場合、usageHintは省略されます。このため、情報を示す静的なコンポーネントには、roleを設定する必要はありません。

accessibilityLabelとroleを設定しない場合

コンポーネントにaccessibilityLabelプロパティとroleプロパティを設定しない場合、スクリーンリーダーでコンポーネントを選択しても、コンポーネントに関する情報や操作方法がユーザーに提供されないことがあります。たとえば、一部のデバイスでaccessibilityLabelを設定していないTextコンポーネントをタップしても、コンポーネントの強調表示や説明の読み上げは行われません。roleを設定していないTouchWrapperでは、ダブルタップでアクティブにできるボタンであることがユーザーに説明されません。

スクリーンリーダーは、Textコンポーネントのtextプロパティなど、コンポーネントに割り当てられたテキストを使って、文字列をレンダリングすることができます。また、タッチ可能なコンポーネントの種類に基づいて、usageHintの提供を試みることもできます。ただし、この機能はデバイスや、デバイスにインストールされた支援ソフトウェアのバージョンによって異なります。ユーザーに最高のエクスペリエンスを提供するには、ドキュメントで直接アクセシビリティのプロパティを設定してください。スクリーンリーダーに依存すると、ドキュメントが正しく解釈されない場合があります。

例

たとえば、次の画像は、Textコンポーネント、テキスト文字列を含むTouchWrapper、境界線と背景のあるFrameを含むAPLドキュメントです。TouchWrapperをアクティブにすると、Frameの境界線の色が変わります。

ドキュメントでコンポーネントのアクセシビリティのプロパティを設定していない場合、VoiceViewを有効にしたデバイスでは次のようなエクスペリエンスが提供されます。

ユーザー： 「情報を提供するテキストコンポーネントです。」という項目をタップ

（項目は強調表示されません）
ユーザー： 「境界線の色が変わるTouchWrapperコンポーネントです。」という項目をタップ

（項目は強調表示されますが、Alexaが項目の説明を読み上げることはありません）
ユーザー： 画面をダブルタップ

コマンドが実行され、境界線の色が赤から青に変わります。

このフローを自分でテストするには、以下のコードをオーサリングツールにコピーし、送信をクリックしてVoiceViewを有効にしたデバイスにドキュメントを表示します。

クリップボードにコピーされました。

オーサリングツールでAPLサンプルをテストする方法については、オーサリングツールでAPLサンプルをテストするを参照してください。

{
  "type": "APL",
  "version": "2024.3",
  "license": "Copyright 2021 Amazon.com, Inc. or its affiliates.All Rights Reserved.\nSPDX-License-Identifier: LicenseRef-.amazon.com.-AmznSL-1.0\nLicensed under the Amazon Software License  http://aws.amazon.com/asl/",
  "settings": {},
  "theme": "dark",
  "import": [
    {
      "name": "alexa-styles",
      "version": "1.6.0"
    }
  ],
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": [
      {
        "type": "Container",
        "height": "100%",
        "width": "100%",
        "padding": "@spacingMedium",
        "justifyContent": "center",
        "bind": [
          {
            "name": "BoxBorderColor",
            "value": "red"
          }
        ],
        "items": [
          {
            "type": "Text",
            "text": "情報を提供するテキストコンポーネントです。"
          },
          {
            "type": "TouchWrapper",
            "checked": false,
            "onPress": [
              {
                "when": "${!event.source.checked}",
                "type": "SetValue",
                "property": "BoxBorderColor",
                "value": "blue"
              },
              {
                "when": "${event.source.checked}",
                "type": "SetValue",
                "property": "BoxBorderColor",
                "value": "red"
              },
              {
                "type": "SetValue",
                "property": "checked",
                "value": "${!event.source.checked}"
              }
            ],
            "item": [
              {
                "type": "Text",
                "text": "境界線の色が変わるTouchWrapperコンポーネントです。",
                "inheritParentState": true,
                "style": "textStylePressable"
              }
            ]
          },
          {
            "type": "Frame",
            "id": "box",
            "borderColor": "${BoxBorderColor}",
            "borderWidth": "10dp",
            "width": "300dp",
            "height": "300dp",
            "shrink": 1,
            "backgroundColor": "orange",
            "alignSelf": "center",
            "spacing": "@spacingMedium",
            "items": [
              {
                "type": "Text",
                "text": "境界線が${BoxBorderColor}のオレンジ色のボックスです。",
                "width": "100%",
                "height": "100%",
                "textAlign": "center",
                "textAlignVertical": "center"
              }
            ]
          }
        ]
      }
    ]
  },
  "styles": {
    "textStylePressable": {
      "values": [        
        {
          "when": "${state.hover}",
          "color": "green"
        },
        {
          "when": "${state.pressed}",
          "color": "green"
        }
      ]
    }
  }
}

一方、情報を提供するインタラクティブなプロパティすべてにaccessibilityLabelとroleを設定した場合、VoiceViewを有効にしたデバイスは次のようなエクスペリエンスを提供します。

ユーザー： 「情報を提供するテキストコンポーネントです。」という項目をタップ

VoiceView： 情報を提供するテキストコンポーネントです。（項目が強調表示されます）
ユーザー： 「境界線の色が変わるTouchWrapperコンポーネントです。」という項目をタップ

VoiceView： 境界線の色が変わるTouchWrapperコンポーネントです。ボタンです。ダブルタップしてアクティブにします。（項目が強調表示されます）
ユーザー： 画面をダブルタップ

コマンドが実行され、境界線の色が赤から青に変わります。

クリップボードにコピーされました。

オーサリングツールでAPLサンプルをテストする方法については、オーサリングツールでAPLサンプルをテストするを参照してください。

{
  "type": "APL",
  "version": "2024.3",
  "settings": {},
  "theme": "dark",
  "import": [
    {
      "name": "alexa-styles",
      "version": "1.6.0"
    }
  ],
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": [
      {
        "type": "Container",
        "height": "100%",
        "width": "100%",
        "padding": "@spacingMedium",
        "justifyContent": "center",
        "bind": [
          {
            "name": "BoxBorderColor",
            "value": "red"
          }
        ],
        "items": [
          {
            "type": "Text",
            "text": "情報を提供するテキストコンポーネントです。",
            "accessibilityLabel": "情報を提供するテキストコンポーネントです。"
          },
          {
            "type": "TouchWrapper",
            "checked": false,
            "onPress": [
              {
                "when": "${!event.source.checked}",
                "type": "SetValue",
                "property": "BoxBorderColor",
                "value": "blue"
              },
              {
                "when": "${event.source.checked}",
                "type": "SetValue",
                "property": "BoxBorderColor",
                "value": "red"
              },
              {
                "type": "SetValue",
                "property": "checked",
                "value": "${!event.source.checked}"
              }
            ],
            "item": [
              {
                "type": "Text",
                "text": "境界線の色が変わるTouchWrapperコンポーネントです。",
                "inheritParentState": true,
                "style": "textStylePressable",
                "accessibilityLabel": "境界線の色が変わるTouchWrapperコンポーネントです。",
                "role": "button"
              }
            ]
          },
          {
            "type": "Frame",
            "id": "box",
            "borderColor": "${BoxBorderColor}",
            "borderWidth": "10dp",
            "width": "300dp",
            "height": "300dp",
            "shrink": 1,
            "backgroundColor": "orange",
            "alignSelf": "center",
            "spacing": "@spacingMedium",
            "items": [
              {
                "type": "Text",
                "text": "境界線が${BoxBorderColor}のオレンジ色のボックスです。",
                "accessibilityLabel": "境界線が${BoxBorderColor}のオレンジ色のボックスです。",
                "width": "100%",
                "height": "100%",
                "textAlign": "center",
                "textAlignVertical": "center"
              }
            ]
          }
        ]
      }
    ]
  },
  "styles": {
    "textStylePressable": {
      "values": [
        {
          "when": "${state.hover}",
          "color": "green"
        },
        {
          "when": "${state.pressed}",
          "color": "green"
        }
      ]
    }
  }
}

表示とスクリーンリーダーの両方に同じ文字列を使用するには、重複を避けるためにデータバインディングを使用します。以下の例では、データソースとデータバインディングを使って、textプロパティとaccessibilityLabelのプロパティを設定しています。

クリップボードにコピーされました。

オーサリングツールでAPLサンプルをテストする方法については、オーサリングツールでAPLサンプルをテストするを参照してください。

{
  "type": "APL",
  "version": "2024.3",
  "theme": "dark",
  "import": [
    {
      "name": "alexa-styles",
      "version": "1.6.0"
    }
  ],
  "mainTemplate": {
    "parameters": [
      "accessibilityExampleData"
    ],
    "items": [
      {
        "type": "Container",
        "height": "100%",
        "width": "100%",
        "padding": "@spacingMedium",
        "justifyContent": "center",
        "bind": [
          {
            "name": "BoxBorderColor",
            "value": "red"
          },
          {
            "name": "BoxString",
            "value": "境界線が${BoxBorderColor}のオレンジ色のボックスです。"
          }
        ],
        "items": [
          {
            "type": "Text",
            "text": "${accessibilityExampleData.mainTextContent}",
            "accessibilityLabel": "${accessibilityExampleData.mainTextContent}"
          },
          {
            "type": "TouchWrapper",
            "checked": false,
            "onPress": [
              {
                "when": "${!event.source.checked}",
                "type": "SetValue",
                "property": "BoxBorderColor",
                "value": "blue"
              },
              {
                "when": "${event.source.checked}",
                "type": "SetValue",
                "property": "BoxBorderColor",
                "value": "red"
              },
              {
                "type": "SetValue",
                "property": "checked",
                "value": "${!event.source.checked}"
              }
            ],
            "item": [
              {
                "type": "Text",
                "text": "${accessibilityExampleData.buttonText}",
                "inheritParentState": true,
                "style": "textStylePressable",
                "accessibilityLabel": "${accessibilityExampleData.buttonText}",
                "role": "button"
              }
            ]
          },
          {
            "type": "Frame",
            "id": "box",
            "borderColor": "${BoxBorderColor}",
            "borderWidth": "10dp",
            "width": "300dp",
            "height": "300dp",
            "shrink": 1,
            "backgroundColor": "orange",
            "alignSelf": "center",
            "spacing": "@spacingMedium",
            "items": [
              {
                "type": "Text",
                "text": "${BoxString}",
                "accessibilityLabel": "${BoxString}",
                "width": "100%",
                "height": "100%",
                "textAlign": "center",
                "textAlignVertical": "center"
              }
            ]
          }
        ]
      }
    ]
  },
  "styles": {
    "textStylePressable": {
      "values": [
        {
          "when": "${state.hover}",
          "color": "green"
        },
        {
          "when": "${state.pressed}",
          "color": "green"
        }
      ]
    }
  }
}

データバインディングコンテキストのenvironment.screenReaderプロパティは、デバイスのスクリーンリーダーが有効な場合にtrueを返します。条件付きロジックでこのプロパティを使うと、スクリーンリーダーの使用状況に基づいてエクスペリエンスを変更できます。

たとえば、次のコードは、スクリーンリーダーが有効でない場合にAutoPageコマンドを実行します。

{
  "when": "${!environment.screenReader}",
  "type": "AutoPage",
  "componentId": "pagerId",
  "duration": 3000,
  "delay": 2000
}

このシナリオの例については、スクリーンリーダーが有効な場合にAutoPageコマンドを実行しないを参照してください。

重要： 支援技術が存在するかどうかに基づいてスキルの動作をカスタマイズすることは、拡張性に優れた解決方法とは言えません。この機能は慎重に使用してください。

このページは役に立ちましたか？

フィードバックを送信

最終更新日: 2025 年 12 月 12 日

スクリーンリーダーをサポートするAlexa Presentation Language視覚要素を作成する

スクリーンリーダーのユーザーエクスペリエンス

スクリーンリーダーでのAPLコンポーネントの処理方法

accessibilityLabelでコンポーネントを説明する

roleでコンポーネントの目的と使い方を説明する

accessibilityLabelとroleを設定しない場合

例

条件文でスクリーンリーダーのステータスを使用する

関連トピック