Amazon Developer

Console

as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
AWS
ドキュメント
Support
Contact Us
My Cases

Console

as

開発
設計と開発
公開
リファレンス
サポート

ウェブアプリのアクセシビリティガイド

ウェブアプリのアクセシビリティガイド

Vegaウェブアプリでは、WCAG（最小AA、英語のみ）とWAI-ARIA（英語のみ）のガイドラインに従うことをお勧めします。WCAGは、アクセシビリティのあらゆる側面をカバーしています。

アクセシビリティの目標は、次のような種類の障がいのあるユーザーを支援するTVアプリを提供することです。

  • 視覚： 色覚異常から全盲まで。
  • 可動性： 細かい動きの制限から身ぶりが困難な状況まで。
  • 発音： 発音障害から言葉を話せない状況まで（音声入力を使用する場合）。
  • 認知： 学習障害、複雑な指示の理解が困難など。
  • 聴覚： 部分的な難聴から全失聴まで。

WebViewには、HTMLアプリ、ReactJSアプリ、Angularアプリのいずれかを使用できます。アクセシビリティ対応のWebViewには次の3つのレイヤーがあります。

  1. ウェブアプリ： 開発者は、アクセシビリティに対応するコードを記述して実装する必要があります。
  2. Vega WebViewラッパー： VegaチームはこのWebViewラッパーを提供しています。
  3. OS： OSは、必要なすべてのアクセシビリティサポートとAPIを提供します。

Vega WebViewラッパー

HTML/Angular/ReactアプリをVegaウェブアプリにするには、Vega WebViewラッパーでラップします。

フォーカスはアプリ内に配置する必要があります。要件は次のとおりです。

  1. 初期フォーカスをアプリコンテナーに設定します。
  2. TVリモコンイベント（D-Pad、選択）をキーボードイベントとして公開します。
  3. デバイス上でユーザー補助機能を使用してアプリをテストします。

ウェブアプリ

アプリをアクセシビリティ対応にするには、このレイヤーに注目します。VueJS、ReactJS、React Native（英語のみ）、Vega向けReact Native、AngularJS（英語のみ）などのフレームワークで、JSXまたはHTMLに似たテンプレートを使用してコードを記述します。

次のリソースを参照してください。

  1. ReactJSアクセシビリティガイド
  2. Angularアクセシビリティガイド

アクセシビリティガイドライン

アクセシビリティを実装するには、以下のガイドラインを使用してください。

セマンティックHTML構造

  • 意味のあるHTMLタグを使用します。たとえば、<header>、<footer>、<nav>などのセマンティックHTMLタグを使用します。ボタンには、<div>や<span>ではなく<button>要素を使用します。リンクには、非セマンティック要素ではなく<a>を使用します。プラットフォームでは、これらのセマンティックタグとVoiceView、拡大鏡、TextBannerなどのユーザー補助機能が認識されます。システムは、正しく使用すれば、ほとんどのアクセシビリティ機能を自動的に処理します。
  • 階層的な見出し構造を使用します。 <h1>から<h6>まで、アプリ内で見出しの順位を適切に維持します。階層的な見出しにより、スクリーンリーダーやその他のユーザー補助機能がコンテンツ階層を理解でき、全体的なナビゲーションが向上します。

Accessible Rich Internet Application（ARIA）タグ

  • 開発者は、タイル、カード、カルーセルのようなカスタムコンポーネントなど、非セマンティック要素を必要とする場合があります。このような場合は、要素の目的と動作をユーザー補助機能に伝えるために、ARIA属性を使用します。
  • 簡単に言うと、ARIA属性によって次の3種類の情報を提供できます。
    • その要素は何か（例：role="button"）
    • それは何をするか（例：aria-pressed、aria-expanded）
    • 追加のコンテキストやラベル（例：aria-label、aria-describedby）
  • 使用できるARIAタグ、プロパティ、メソッドの一覧については、ARIA Authoring Practices Guide（英語のみ）を参照してください。
  • 以下はARIAの使用例です。
<section aria-labelledby="features-title">
  <h2 id="features-title">アクセシビリティ機能</h2>
  <p>このセクションでは、コンテンツをアクセシビリティ対応にする方法について説明します。</p>
</section>

代替テキストまたは画像とアイコンの説明

VoiceViewでは画像やグラフィックは認識されません。そのため、代替テキストまたは意味のある説明を提供します。たとえば、設定アイコンには「設定」のような説明を使用し、「設定アイコンの画像」や「アイコン」という説明は避けます。 VoiceViewは、「画像…」や「リンク画像…」という言葉を追加します。「画像」や「アイコン」のようなテキストを追加するのはあいまいです。

<img src="" alt="設定">
  • 装飾画像： ユーザーにとって価値のない純粋に装飾目的の画像については、altタグを省略します。
  • 繰り返されるテキスト： 近くにあるテキストと同じ内容が画像に含まれている場合は、altタグやaria-labelでテキストを繰り返さないでください。

フォーカス管理

  • 要素に対するフォーカスを明確に表示する必要があります。WACGのガイドラインに従ってください。
  • セマンティックHTMLタグ（button、a）を使用している場合は、デフォルトでフォーカスリングが表示され、アプリのデザインに合わせたカスタマイズも可能です。VoiceViewは、これらのタグを識別して読み上げることができます。
  • 初期フォーカスには、React/AngularのautoFocusプロパティを使用します。
  • 非セマンティックタグを使用する場合は、フォーカスを適用するカスタムJavaScriptコードと、onFocusのカスタムスタイルを記述します。
  • 次の場合にのみtabindexを使用します。
    • フォーカス可能でない要素をフォーカス可能にしている場合。
    • フォーカスの順序を細かくカスタマイズする場合。モーダルとカスタムコンポーネントに影響します。
    tabindexを使用するフォーカス可能なdiv

    // tabindexは要素をフォーカス可能します

  • 文字間隔： 一貫性を保ち、間隔が狭すぎたり広すぎたりしないようにします。
  • すべて大文字にしない： 特に長い文章では、読みにくくなるため、すべて大文字にしないでください。
  • 行の高さ： 読みやすさを向上させるために、WCAG（英語のみ）に従って1.5（または150%）以上を使用します。
  • タイポグラフィの一貫性を保ちます。

プログラムによるアナウンス

タグのないソフトウェアを開発する開発者や、プログラムで情報をアナウンスしない開発者向けのオプションがあります。これらのオプションは特に、キャンバスを使用してグラフ、図、対話型ナビゲーション、3Dワールド要素を描画するウェブアプリで役立ちます。

オプション1： アナウンス用のdivを作成し、アナウンスに使用するテキストを更新します。

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

<!-- index.html -->
<div id="announcer" aria-live="assertive" aria-atomic="true"></div>

<script>
  const announcerDiv = document.getElementById("announcer");

  // 更新をシミュレートします。
  setTimeout(() => {
    announcerDiv.textContent = "新しいお知らせがあります。";
  }, 5000);
</script>

オプション2： postMessageを使用してVega WebViewコンテナーにメッセージを送信し、onMessageを使用してそのメッセージを処理します。onMessageで、AccessibilityInfo.announceForAccessibility();を呼び出します。これには多少の設定が必要ですが、最終的にSpeechSynthesisと同じように動作します。

以下の例では、JSON APIやソケットデータの業界標準と同様のtype-valueメッセージパターンが使用されています。メッセージの送受信時に、さまざまなデータ型のシリアル化と逆シリアル化を簡単に行うことができます。上のスクリプトはウェブアプリで、下のスクリプトはVegaウェブアプリのコードです。

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

<!-- index.html -->
<script>
  const message = JSON.Stringify({
    type: "announcement",
    value: "新しいお知らせがあります。"
  });
  
  // postMessageを使用して、Vegaウェブアプリにデータを送信します。
  window.ReactNativeWebView.postMessage(message);
</script>

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

// App.tsx
import { AccessibilityInfo } from "@amzn/react-native-kepler";

export const App = () => {

  // typeが"announcement"の場合に値を返すように実装します
  const getAnnouncement = (message: string) => {};

  return (
    <WebView
      source={{ uri: 'https://amazon.com' }}
      
      // onMessageを使用してpostMessageからデータを受信します。
      onMessage={(event: WebViewMessageEvent) => {
        const announcement = getAnnouncement(event.nativeEvent.data);
        
        // アナウンスを実行します。
        AccessibilityInfo.announceForAccessibility(announcement);
    }}
    </WebView>
  );
};

タイポグラフィと色

  1. フォントサイズは、読みやすさの基準を満たしている必要があります。
  2. 色のコントラスト比は、通常のテキストでは4.5:1以上、大きいテキストでは3:1以上にします。WCAGのチェッカー（https://webaim.org/resources/contrastchecker/）（英語のみ）を使用できます。
  3. 視覚的なフォーカスには、背景とは異なる色を使用する必要があります
  4. フォントファミリーには、わかりやすい書体を選択する必要があります。草書的すぎる書体や細すぎる書体は避けてください。
  5. コンテンツが読みやすくなるように行の高さを設定します。

ほかにも多数の考慮事項があります。

VoiceView

VoiceViewを使用してテストを行って、重複するアナウンスを防ぎ、正しい読み上げ順序を維持し、ライブ更新（aria-live）を有効にします。一般的な問題については、よくある質問（FAQ）を確認してください。

再生、Alexa、その他のオーディオの動作をテストします。

非対話型コンテンツをアクセシビリティAPIから隠蔽するには、aria-hidden="true"を使用します。詳細については、MDNのドキュメントを参照してください。以下はコンテンツの例です。

  • 純粋に装飾目的のコンテンツ（アイコンや画像など）
  • 重複するコンテンツ（繰り返されるテキストなど）
  • 画面外にあるコンテンツまたは折りたたまれているコンテンツ（メニューなど）

Vega WebViewのユーザー補助機能

  1. TVリモコン（D-Pad、戻る、選択）
  2. VoiceView（スクリーンリーダー）
  3. 拡大鏡（画面の拡大）
  4. キャプション／字幕

Fire TVメニューのユーザー補助機能オプション

WebViewでのアクセシビリティ要素の有効化

VoiceViewの有効化

  1. [ユーザー補助の設定] に移動します。
  2. [VoiceView] をオンに切り替えます。

Fire TVメニューでのVoiceViewの有効化

VoiceViewからの要素の隠蔽

VoiceViewから要素を隠蔽するには、次のコードを使用します。

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

aria-hidden="true"

デフォルトのアクセシブル名がない要素をVoiceViewに通知する方法

VoiceViewが要素を認識できるようにするには、次のコードを使用します。

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

<button aria-label="Close dialog">X</button>

動的な値のアナウンス

HTML、ReactJS、Angularではaria-liveを使用します。詳細については、ARIAのaria-live属性を参照してください。動的な値をアナウンスするには、次のコードを使用します。

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

<div aria-live="polite" id="status"> <!- ここに挿入されたテキストはアナウンスされます--></div>

テストケース

以下の最小限のテストケースをお勧めします。これらをアプリのアクセシビリティテストとして使用できます。

VoiceView

VoiceViewを有効または無効にする

  1. [ユーザー補助の設定] に移動します。
  2. VoiceViewのオン／オフを切り替えます。

VoiceViewを有効にしてアプリを使用する

  1. VoiceViewを有効にします。
  2. リモコンを使用してアプリのナビゲーションを行います。
  3. 各UI要素の音声プロンプトを確認します。

新しい画面のテキストの読み上げを確認する

新しい画面では、ヘッダー、説明、使用ヒント、案内テキスト、現在フォーカスのある項目が読み上げられます。

  1. アプリのさまざまなセクション（例：ホーム、設定、コンテンツ）に移動します。
  2. VoiceViewの出力を確認します。

ナビゲーションと要素の読み上げを確認する

ユーザーが（方向パッド／選択／ボタン上のクイック選択アクションを使用して）すべてのアクション可能な要素に移動できることを確認します。フォーカスのある要素は完全に読み上げられ、その要素に関連する静的テキストは通常モードで読み上げられる必要があります。

フォーカスのある要素で時間を置いた後の読み上げを確認する

少し時間を置くと（0.5秒前後）、使用ヒント、案内テキスト、説明、静的テキストが読み上げられます。

画像とアイコンに説明テキストが含まれていることを確認する

画像に説明がある場合は、VoiceViewで読み上げられるように、すべての説明を代替テキストで記述します。

VoiceViewをレビューモードで確認する

VoiceViewを有効にした状態で、メニューを2秒間長押しします。ユーザーは、すべてのテキストとコントロールに移動して（方向パッドの左／右）、情報のレベルを変更できます（方向パッドの上／下）。レビューモードでは、アクション可能でないテキストと項目も読み上げられる必要があります。

アクセシビリティジェスチャーを確認する

たとえば、項目をダブルクリックしてアクティブ化したり、長押ししたりします。

拡大鏡（画面のズーム）

拡大鏡を有効または無効にする

  1. ユーザー補助機能に移動します。
  2. 拡大鏡を有効にします。
  3. 拡大／縮小できることを確認します。

UI全体でズーム機能を確認する

  1. テキスト、ボタン、画像を拡大してみます。
  2. スケーリングと表示が正しく行われることを確認します。

ズームしても読みやすさが維持され、コンテンツが表示領域に収まる

  1. すべての画面で拡大／縮小を行います。
  2. レイアウトが変更されず、スクロールが機能していることを確認します。

1.5倍に拡大する（初回）

  1. 設定に移動します。
  2. ズームがオフになっていることを確認します。
  3. ズームを有効にします。
  4. ズームとアプリの動作を確認します。

初回の設定以降、ユーザーの選択に従ってズームが保持される

  1. 設定に移動します。
  2. ズームがオフになっていることを確認します。
  3. ズームを有効にします。
  4. ズームとアプリの動作を確認します。
  5. アプリを閉じます。
  6. アプリをもう一度開くか、デバイスの電源を入れ直します。
  7. 前回のズームレベルが保存されていることを確認します。

拡大鏡がフォーカスに従うことを確認する

ユーザーがアクション可能なコントロールに移動でき（方向パッド／選択を使用）、拡大鏡がフォーカスを追従することを確認します。

ユーザーがすべてのテキストとコントロールを参照できることを確認する（メニュー＋方向パッドを使用して移動）

字幕／キャプション

字幕を有効／無効にする

  1. ビデオを再生します。
  2. プレーヤー／設定で字幕を切り替えます。
  3. 表示を確認します。

ユーザーがクローズドキャプションのスタイルを設定できることを確認する

グローバル設定が適用されているときに、ローカルプレーヤーのCC設定を使用します。

  1. 字幕の設定を変更します。
  2. UIが適切に更新されることを確認します。

字幕の設定がセッションをまたいで保持される（該当する場合）

  1. 有効にする
  2. アプリを終了します。
  3. もう一度開きます。
  4. 設定が保持されるかどうかを確認します。

字幕が正確で音声と同期していることを確認する

  1. コンテンツを再生します。
  2. 字幕が同期されていて正確であることを確認します。

正確なクローズドキャプションがユーザーに表示されることを確認する

字幕の遅延は短くして、コンテンツに合わせて表示されるようにしてください。

フォント／テキストサイズ

テキストサイズを拡大／縮小する

  1. フォント設定にアクセスします。
  2. サイズを調整します。
  3. UI全体でテキストが正しく拡大／縮小されることを確認します。

フォントの変更がアプリ全体に適用される

  1. フォントサイズを変更します。
  2. 別の画面に移動します。
  3. 一貫性を確認します。

大きいフォントでレイアウトが崩れない

  1. フォントサイズを最大に設定します。
  2. UIが切り詰められたり、重なったりしないことを確認します。

フォーカス／視覚的なインジケーター

アクション可能なすべての要素にフォーカスリングが表示される

  1. リモコンを使用してすべてのUIに移動します。
  2. 各要素のフォーカスリングを確認します。

フォーカス順序に一貫性がある（論理的なナビゲーション／フロー）

  1. リモコンを使用してナビゲーション操作を行います。
  2. フォーカス順序が直感的（上から下、左から右）であることを確認します。

省略可能： フォーカス変更時の音声フィードバックを確認する

  1. オーディオキューを有効にします。
  2. ナビゲーション操作を行います。
  3. フォーカス変更時の音声通知を確認します。

モーダルを閉じた場合など、ユーザーアクションの後にフォーカスが失われない

  1. モーダルまたはダイアログを開いて閉じます。
  2. フォーカスが期待どおりの要素に戻ります。
  1. D-Pad、戻る、選択の各ボタンを使用します。
  2. タッチ入力なしですべての領域にアクセスできることを確認します。

キーボードナビゲーションがサポートされる（該当する場合）

  1. 外部キーボードまたはアクセシビリティ対応入力デバイスでテストします。
  2. 対話型のすべての領域を確認します。

トラップゾーンがない（すべての領域から別の要素に移動できる）

  1. モーダル、メニュー、カルーセルに移動したり、そこから別の要素に移動したりします。
  2. どこにも移動できなくなる場所がないことを確認します。

レイテンシ

アクセシビリティメタデータが標準ペイロードパッケージの一部として読み込まれることを確認する

コンテンツを画面に読み込み中であるという視覚的および聴覚的な通知をユーザーが受け取っていることを確認する

接続がタイムアウトしてもユーザーがブロックされていないことを確認する

オフラインでもユーザーがブロックされていないことを確認します。

設計へのアクセシビリティの組み込み

画像とアイコンに説明テキストが含まれていることを確認する

画像に指示が記載されている場合は、これらの指示を代替テキストに追加して、VoiceViewで読み上げられるようにします。

ステータスが複数の手段で伝達されることを確認する

伝達手段には、テキスト、色、サウンドなどがあります。

すべてのアイコンに説明が指定されていることを確認する

よく使用されるアイコンにもテキストの説明が必要です。

トラブルシューティング

VoiceViewが有効になっているのに項目が何も読み上げられない場合

アクセシビリティマークアップを確認してください。

UI要素がボタンとして読み上げられる

この動作は、UI要素にアクセシビリティラベルまたは説明が設定されていない一方で、アクセシビリティロールがボタンとして設定されている場合に発生します。

UI要素が視覚的な表示と一致しない

これは、アプリで、フォーカスのある要素がアクセシビリティに対応するように正しく設定されていないことが原因である可能性があります。

VoiceViewがタイトルまたはUI要素を複数回読み上げる場合

話されている項目が繰り返されるのは、アクセシビリティアナウンスが重複していることが原因である可能性があります。重複するアクセシビリティアナウンスをすべて削除します。

ビデオの再生で読み上げが続行される場合

読み上げの続行は、誤って使用されたラベルが原因である可能性があります。テキストが入っていないビデオプレーヤーコンポーネントではなく、コンテンツの詳細に焦点が当てられています。アプリでは、ビデオの再生中、画面に表示されている要素／ノードにのみフォーカスを設定する必要があります。

オーディオダッキングが機能しない

ビデオの再生中にVoiceViewが読み上げを開始した場合、VoiceViewの読み上げが優先され、ビデオ再生のオーディオの音量は下がる必要があります。

Last updated: 2026年2月4日

フォローする

サポート対象デバイス

amazon_developer_logo

© 2010-2026, Amazon.com, Inc. or its affiliates. All Rights Reserved. 無断複写·転載を禁じます。

利用規約

Amazon開発者ブログ

お問い合わせ