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

Vegaウェブアプリに関するより広範なアクセシビリティガイドラインについては、WCAG（英語のみ）（最小AA）とWAI-ARIA（英語のみ）を参照してください。WCAGは、アクセシビリティのあらゆる側面をカバーしています。

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

• 視覚障がい：色覚異常から全盲まで。
• 可動性の制限：巧緻性低下から身振り障がいまで。
• 発話障がい：発音障がいから言葉によらないコミュニケーションまで。
• 認知上の課題：学習障がいから複雑な指示の理解が困難な状態まで。
• 聴覚障がい：部分的な難聴から全失聴まで。

開発者は、スクリーンリーダー、簡素化したコントロール、代替入力方法、わかりやすいインターフェイス、キャプションなど、インクルーシブデザインを通じてこれらの分野に対応することで、あらゆるユーザーが自分でコンテンツを操作して楽しめるTVエクスペリエンスを構築します。

Vega WebViewは、Vega OS APIを統合してHTML5標準のアクセシビリティ機能を提供します。これにより、さまざまな障がいを持つユーザーがTVアプリでサポートされます。基盤となるアクセシビリティインフラストラクチャはVega OSが提供します。アプリ開発者は、ウェブアプリ内に適切なフォーカス管理を実装して、リモコンやユーザー補助機能から各対話型要素にプログラムでアクセスして操作できるようにする必要があります。

コンテンツがスクリーンリーダーでわかりやすくアナウンスされ、ユーザーが各要素の目的を理解できるようにするために、開発者は、ウェブUIコンポーネントに適切な説明、ラベル、アクション属性を追加する必要があります。これには、ARIA属性の設定、論理的なタブ順序の維持、モーダルでのフォーカストラップの実装、対話操作後のフォーカスの復元、現在のナビゲーション位置を明確に示す視覚的なフォーカスインジケーターの提供が含まれます。VueJS、ReactJS、React Native（英語のみ）、Vega向けReact Native、AngularJS（英語のみ）などのフレームワークで、JSXまたはHTMLに似たテンプレートを使用してコードを記述します。

詳細については、Reactでのアクセシビリティまたは適切なユーザー補助機能が備わったAngularアプリを作成するを参照してください。

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

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

セマンティックHTML構造

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

システムは、これらのセマンティックタグとVoiceView、拡大鏡、TextBannerなどのユーザー補助機能を認識し、正しく使用されていればほとんどのユーザー補助機能を自動的に処理します。

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によって自動的に追加されます。

次の例は、設定のaltタグを示しています。

<img src="" alt="設定">

• 装飾画像： 純粋に装飾目的の画像では、ユーザーにとって価値がなければaltタグを省略します。
• 繰り返されるテキスト： 既にaltタグやaria-labelに記述されているテキストは繰り返さないようにします。

フォーカス管理

要素に対するフォーカスを明確に表示する必要があります。WCAGのガイドラインに従ってください。セマンティックHTMLタグ（<button>、<a>）を使用している場合は、デフォルトでフォーカスリングが表示され、アプリのデザインに合わせたカスタマイズも可能です。VoiceViewはこれらを識別して読み上げます。以下に、フォーカス管理に関するいくつかのガイドラインを示します。

• 初期フォーカス： React/AngularのautoFocusプロパティを使用します。
• 非セマンティックタグ： これらのタグを使用する場合は、フォーカスを適用するカスタムJavaScriptコードと、onFocusのカスタムスタイルを記述します。
• tabindex： 次のユースケースにのみ使用します。
  • フォーカス可能でない要素をフォーカス可能にしている場合。
  • フォーカス順序を細かくカスタマイズする場合。モーダルとカスタムコンポーネントに影響します。以下に例を示します。 ```html
  tabindexを使用するフォーカス可能なdiv

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

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

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

タグのないソフトウェアを作成する開発者や、プログラムで情報をアナウンスしない開発者は、以下に示す2つのオプションを使用できます。これらのオプションは特に、キャンバスを使用してグラフ、図、対話型ナビゲーション、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>

Vegaウェブアプリ：

// App.tsx
import { AccessibilityInfo } from "@amazon-devices/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>
  );
};

タイポグラフィと色

以下に、タイポグラフィと色に関するいくつかのガイドラインを示します。

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

これはリストの一部に過ぎません。ほかにも数多くのタイポグラフィと色に関するアクセシビリティガイドライン（英語のみ）があります。

VoiceView

VoiceViewを使用してテストを行って、重複するアナウンスを防ぎ、正しい読み上げ順序を維持し、ライブ更新（aria-live）を有効にします。

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

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

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

Vega WebViewのユーザー補助機能

• TVリモコン（D-Pad、戻る、選択）
• VoiceView（スクリーンリーダー）
• 拡大鏡（画面の拡大）

• キャプション／字幕

  

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

VoiceViewの有効化

1. [ユーザー補助の設定] に移動します。
2. [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で読み上げられるようにします。

ステータスが複数の手段で伝達される

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

すべてのアイコンに説明テキストがある

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

WebViewのアクセシビリティに関するトラブルシューティング

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

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

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

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

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

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

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

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

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

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

関連トピック

• Vegaウェブアプリの概要
• Vega WebViewコンポーネントリファレンス
• Vegaのユーザー補助機能
• アクセシビリティ

Last updated: 2026年4月24日