スクリーンリーダー対応のベストプラクティス

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

これらのベストプラクティスを使うことで、目の不自由なユーザー向けのスクリーンリーダーで効果的に機能するAlexa Presentation Language（APL）視覚要素を作成できます。

レスポンシブ対応のコンポーネントとテンプレートにaccessibilityLabelを設定する

レスポンシブ対応のコンポーネントとテンプレートには、インタラクティブオブジェクトのaccessibilityLabelプロパティを設定します。これらのコンポーネントには、複数のプロパティ設定が必要なものもあります。たとえば、AlexaDetailテンプレートは複数のボタンを表示できます。このテンプレートには、次のアクセシビリティ関連プロパティがあります。

button1AccessibilityLabel
button2AccessibilityLabel
headerBackButtonAccessibilityLabel

テンプレートで使用する各ボタンに、プロパティを設定します。テンプレートやコンポーネントにaccessibilityLabelのデフォルト値がある場合、変更せずにその値を使用できます。たとえば、AlexaRatingレスポンシブ対応コンポーネントのデフォルト値は、コンポーネントに指定したratingNumberプロパティとratingTextプロパティから作成した文字列です。たとえば、ユーザーが次のコードでレンダリングされたコンポーネントをタップすると、スクリーンリーダーは「五百九件の評価で五点中三点五の星を獲得しています。」と読み上げます。

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

{
  "type": "AlexaRating",
  "ratingSlotPadding": "4dp",
  "ratingSlotMode": "multiple",
  "ratingNumber": 3.5,
  "ratingText": "509件の評価"
}

accessibilityLabelのデフォルト値については、コンポーネントとテンプレートのドキュメントを参照してください。デフォルト値を持たないレスポンシブ対応のコンポーネントとテンプレートについては、利用可能なaccessibilityLabelプロパティを設定するようにしてください。

accessibilityLabelとroleを使ってインタラクティブコンポーネントにラベル付けする

すべてのインタラクティブコンポーネントに、accessibilityLabelとroleを使ってラベル付けします。インタラクティブコンポーネントには、すべてのタッチ可能なコンポーネントとアクション可能なコンポーネントが含まれます。

これらのコンポーネントにラベル付けする場合、以下のガイドラインに従ってください。

ボタンとリンク

ボタンとして機能するタッチ可能なコンポーネントには、button、linkのいずれかを使います。これらのロールの使い方には一貫性を持たせてください。たとえば、現在のドキュメントでアクションを発生させるコンポーネントにはbuttonを使用し、別のドキュメントにユーザーを案内するコンポーネントにはlinkを使用します。

onPressなど、タッチ可能なコンポーネントハンドラーのいずれかを使用するVectorGraphicには、imagebuttonを使用します。また、TouchWrapperにラップされるImageコンポーネントにもimagebuttonを使用します。

チェックボックス、スイッチ、ラジオボタンのカスタムユーザーインターフェースコントロール

チェックボックス、スイッチ、ラジオボタンなどのカスタムUIコントロールを作成する場合、次のように適切なロールをラベル付けします。

ロールをcheckbox、switch、radiobuttonに設定します。
カスタムコントロールのロジックで、checkedコンポーネントプロパティを使ってコントロールの状態をトラッキングします。スクリーンリーダーは、このプロパティを使って、項目が「オン」（チェック済み）か「オフ」（チェックなし）かをユーザーに伝えます。

checkedプロパティを使わない場合、スクリーンリーダーはコントロールの状態をユーザーに伝えられません。

以下の例では、ひし形のような形をしたVectorGraphicを表示しています。グラフィックはチェックボックスとして機能し、ユーザーがグラフィックを選択するとcheckedプロパティを更新します。このグラフィックを選択すると、スクリーンリーダーは、「これはカスタムコントロールです。チェックボックスです。オフです。ダブルタップしてアクティブにします。」という文字列を読み上げます。ダブルタップしてチェックボックスを選択（チェック）すると、スクリーンリーダーは、「オンです。」という文字列を読み上げます。

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

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

{
  "type": "APL",
  "version": "2024.3",
  "theme": "dark",
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": [
      {
        "type": "Container",
        "height": "100%",
        "width": "100%",
        "bind": [
          {
            "name": "CheckboxState",
            "value": false,
            "type": "boolean"
          }
        ],
        "items": [
          {
            "type": "VectorGraphic",
            "source": "diamond",
            "role": "checkbox",
            "accessibilityLabel": "これはカスタムコントロールです。",
            "checked": "${CheckboxState}",
            "onPress": [
              {
                "type": "SetValue",
                "property": "checked",
                "value": "${!event.source.checked}"
              },
              {
                "type": "SetValue",
                "property": "CheckboxState",
                "value": "${event.source.checked}"
              }
            ]
          },
          {
            "type": "Text",
            "id": "textResult",
            "text": "チェックボックスの状態：${CheckboxState}",
            "accessibilityLabel": "チェックボックスの状態：${CheckboxState}"
          }
        ]
      }
    ]
  },
  "graphics": {
    "diamond": {
      "type": "AVG",
      "version": "1.2",
      "width": "120dp",
      "height": "120dp",
      "items": {
        "type": "path",
        "pathData": "M 60 10 L 110 60 L 60 110 L 10 60 z",
        "style": "CustomCheckBox"
      },
      "styles": {
        "CustomCheckBox": {
          "values": [
            {
              "strokeWidth": 2,
              "stroke": "blue"
            },
            {
              "when": "${state.checked}",
              "fill": "red",
              "strokeWidth": 10
            },
            {
              "when": "${state.pressed}",
              "stroke": "blue"
            }
          ]
        }
      }
    }
  }
}

カスタムコントロールを作成する別の方法として、APL向けAlexaデザインシステムのプリビルドレスポンシブ対応コンポーネントを使用できます。

これらのコンポーネントはroleを設定し、checkedプロパティを使用することで、スクリーンリーダーをフルサポートします。accessibilityLabelプロパティにチェックボックス、ラジオボタン、スイッチの説明を設定します。テキストの横にコンポーネントを配置する場合、TextコンポーネントのaccessibilityLabelも指定します。

以下の例は、さまざまな色やサイズのAlexaCheckboxです。

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

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

{
  "type": "APL",
  "version": "2024.3",
  "import": [
    {
      "name": "alexa-layouts",
      "version": "1.7.0"
    }
  ],
  "layouts": {
    "CheckboxRow": {
      "parameters": [
        "checkboxText",
        "checkboxId",
        "checked",
        "disabled",
        "isIndeterminate",
        "checkboxHeight",
        "checkboxWidth",
        "selectedColor"
      ],
      "item": {
        "type": "Container",
        "direction": "row",
        "width": "100%",
        "paddingLeft": "@marginHorizontal",
        "items": [
          {
            "type": "Text",
            "text": "${checkboxText}",
            "accessibilityLabel": "${checkboxText}",
            "textAlignVertical": "center",
            "width": "75%"
          },
          {
            "type": "AlexaCheckbox",
            "id": "${checkboxId}",
            "accessibilityLabel": "${checkboxText}, ${theme}",
            "checkboxHeight": "${checkboxHeight}",
            "checkboxWidth": "${checkboxWidth}",
            "selectedColor": "${selectedColor}",
            "checked": "${checked}",
            "disabled": "${disabled}",
            "isIndeterminate": "${isIndeterminate}",
            "primaryAction": [
              {
                "type": "ShowCheckBoxResult"
              }
            ]
          },
          {
            "type": "AlexaCheckbox",
            "id": "${checkboxId}_light",
            "accessibilityLabel": "${checkboxText}, ${theme}",
            "checkboxHeight": "${checkboxHeight}",
            "checkboxWidth": "${checkboxWidth}",
            "selectedColor": "${selectedColor}",
            "checked": "${checked}",
            "disabled": "${disabled}",
            "isIndeterminate": "${isIndeterminate}",
            "theme": "light",
            "primaryAction": [
              {
                "type": "ShowCheckBoxResult"
              }
            ]
          }
        ]
      }
    }
  },
  "mainTemplate": {
    "parameters": [
      "checkboxExampleData"
    ],
    "item": {
      "type": "Container",
      "width": "100%",
      "height": "100%",
      "items": [
        {
          "type": "AlexaHeader",
          "id": "headerId",
          "headerTitle": "チェックボックスの例",
          "headerSubtitle": "チェックボックスを選択すると、ここにchecked状態が表示されます。"
        },
        {
          "type": "Sequence",
          "height": "80%",
          "data": "${checkboxExampleData.arrayOfCheckboxes}",
          "paddingBottom": "@spacing3XLarge",
          "items": [
            {
              "type": "CheckboxRow",
              "checkboxId": "${data.checkboxId}",
              "checkboxText": "${data.checkboxText}",
              "checkboxHeight": "${data.checkboxHeight}",
              "checkboxWidth": "${data.checkboxWidth}",
              "selectedColor": "${data.selectedColor}",
              "checked": "${data.checked}",
              "disabled": "${data.disabled}",
              "isIndeterminate": "${data.isIndeterminate}"
            }
          ]
        }
      ]
    }
  },
  "commands": {
    "ShowCheckBoxResult": {
      "commands": [
        {
          "type": "SetValue",
          "componentId": "headerId",
          "property": "headerSubtitle",
          "value": "${event.source.id}を${event.source.checked}に変更しました"
        }
      ]
    }
  }
}

accessibilityLabelを使って情報を示すすべてのコンポーネントにラベル付けする

accessibilityLabelプロパティを使って、情報を示すすべてのコンポーネントにラベル付けします。情報を示すコンポーネントとは、ユーザーが視覚要素を使うのに必要な情報を表示するコンポーネントのことです。ただし、インタラクティブではありません。Textコンポーネントは、関連コンテンツを表示するので、情報を示すコンポーネントです。Imageコンポーネントは、視覚コンテンツを理解するのに不可欠な場合、情報を示すコンポーネントになり得ます。装飾のみを目的とし、視覚要素の意味に寄与しない画像は、情報を示すコンポーネントとはみなされません。

リスト項目にラベル付けする

APLドキュメントが項目リストを表示する場合、ユーザーはリストをスワイプし、タップして各項目の説明を聞くことができます。

Sequence、GridSequence、Pagerのいずれかのコンポーネントを使って、カスタムリストを作成できます。これらのコンポーネントを使って表示する各リスト項目に、accessibilityLabelを設定します。

以下は、動物の番号付きリストを表示するSequenceの例です。各項目のaccessibilityLabelは、項目のテキストと一致します。Sequence全体にも、リスト自体を説明するaccessibilityLabelがあります。リストの最初の項目を選択すると、スクリーンリーダーは、「一つ目。犬。」と読み上げます。

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

{
  "type": "APL",
  "version": "2024.3",
  "theme": "dark",
  "import": [
    {
      "name": "alexa-styles",
      "version": "1.6.0"
    }
  ],
  "mainTemplate": {
    "items": [
      {
        "type": "Sequence",
        "height": "100%",
        "width": "100%",
        "padding": "@marginHorizontal",
        "accessibilityLabel": "これは、動物のリストです。ペットに最適な動物もいるかもしれません。",
        "numbered": true,
        "data": ["犬", "猫", "鳥", "魚", "ヘビ", "カメ", "ウサギ"],
        "item": [
          {
            "type": "Text",
            "text": "${ordinal}. ${data}",
            "accessibilityLabel": "${ordinal}. ${data}"
          }
        ]
      }
    ]
  }
}

リスト内の項目は、インタラクティブにもできます。ユーザーがリスト項目を選択したときに何らかのアクションが発生する場合、項目のroleも設定します。

リストのレスポンシブ対応テンプレート

カスタムリストを作成する方法以外に、プリビルドのレスポンシブ対応テンプレートを使用することもできます。

これらのテンプレートは、リスト項目のプロパティに基づいて、各項目のaccessibilityLabelを自動的に設定します。以下の例では、primaryText、secondaryText、ratingを持つ項目で構成されるAlexaTextListを表示します。リストの最初の項目を選択すると、スクリーンリーダーは次の文字列を読み上げます。「項目一。犬。ペットに最適ですが、たくさん散歩させる必要があります。五つ中五つ星の評価です。ダブルタップしてアクティブにします。」

スクリーンリーダーが有効な場合にAutoPageコマンドを実行しないようにする

AutoPageコマンドは、すべてのページへの移動を自動的に開始するようPagerに指示します。このコマンドは、ユーザーが手動でページを進めなくてもすべてのページを見ることができるスライドショーを作成するのに便利です。ただし、スクリーンリーダーが有効になっていると、スクリーンリーダーがページのコンテンツを読み終える前にAutoPageがページ移動をトリガーしてしまう可能性があります。このシナリオでは、スクリーンリーダーがコンポーネント間を「飛び越え」、混乱を招いてしまいます。

たとえば、以下のドキュメントとデータソースでは、Pagerが各ページのテキストブロックを表示します。ドキュメントが読み込まれると、onMountハンドラーがAutoPageコマンドを実行します。スクリーンリーダーが有効なデバイスでこのドキュメントを表示すると、ユーザーエクスペリエンスは次のようになります。

Pagerの最初のページが表示されます。
VoiceView： これは、ページに表示するテキストブロックです。AutoPage...（スクリーンリーダーがページのメインテキストを読み上げ始めます）
AutoPageコマンドによりページが自動で移動し、スクリーンリーダーが中断します。
VoiceView： 二ページ目のテキストブロックです…（VoiceViewが2ページ目のテキストを読み上げ始めます）
VoiceViewが特定のページを読み終えたかどうかにかかわらず、Pagerはページを移動し続けます。

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

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

{
  "type": "APL",
  "version": "2024.3",
  "theme": "dark",
  "import": [
    {
      "name": "alexa-layouts",
      "version": "1.7.0"
    }
  ],
  "onMount": [
    {
      "type": "AutoPage",
      "componentId": "pagerId",
      "duration": 3000,
      "delay": 2000
    }
  ],
  "mainTemplate": {
    "parameters": [
      "pagerData"
    ],
    "items": [
      {
        "type": "Container",
        "height": "100%",
        "width": "100%",
        "justifyContent": "center",
        "alignItems": "center",
        "items": [
          {
            "type": "Pager",
            "id": "pagerId",
            "height": "80%",
            "width": "80%",
            "data": "${pagerData.pages}",
            "item": [
              {
                "type": "Frame",
                "height": "100%",
                "width": "100%",
                "backgroundColor": "${data.pageColor}",
                "borderColor": "blue",
                "borderWidth": 5,
                "items": [
                  {
                    "type": "Container",
                    "height": "100%",
                    "width": "100%",
                    "padding": "@spacingSmall",
                    "alignItems": "center",
                    "items": [
                      {
                        "type": "ScrollView",
                        "id": "bodyTextScrollViewId",
                        "height": "100%",
                        "shrink": 1,
                        "spacing": "@spacingMedium",
                        "item": {
                          "type": "Text",
                          "text": "${data.pageBodyText}",
                          "accessibilityLabel": "${data.pageBodyText}",
                          "style": "textStyleBody"
                        }
                      },
                      {
                        "type": "AlexaButton",
                        "buttonText": "Next Page",
                        "alignSelf": "end",
                        "accessibilityLabel": "次のページに移動します",
                        "primaryAction": [
                          {
                            "type": "SetPage",
                            "componentId": "pagerId",
                            "position": "relative",
                            "value": 1
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

この問題を回避するには、AutoPageコマンドで条件付きロジックを使用します。スクリーンリーダーを使用していない場合にコマンドを実行します。前の例のonMountを、この更新したバージョンで置き換えます。

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

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

フィードバックを送信

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

スクリーンリーダー対応のベストプラクティス

レスポンシブ対応のコンポーネントとテンプレートにaccessibilityLabelを設定する

accessibilityLabelとroleを使ってインタラクティブコンポーネントにラベル付けする

ボタンとリンク

チェックボックス、スイッチ、ラジオボタンのカスタムユーザーインターフェースコントロール

accessibilityLabelを使って情報を示すすべてのコンポーネントにラベル付けする

リスト項目にラベル付けする

カスタムリスト（Sequence、GridSequence、Pager）

リストのレスポンシブ対応テンプレート

スクリーンリーダーが有効な場合にAutoPageコマンドを実行しないようにする

関連トピック