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

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

​

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

​

セマンティックHTML構造

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

​

Accessible Rich Internet Application（ARIA）タグ

• その要素は何か（例：role=“button”）
• それは何をするか（例：aria-pressed、aria-expanded）
• 追加のコンテキストやラベル（例：aria-label、aria-describedby）

<section aria-labelledby="features-title">
  <h2 id="features-title">アクセシビリティ機能</h2>
  <p>このセクションでは、コンテンツをアクセシビリティ対応にする方法について説明します。</p>
</section>

​

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

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

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

​

フォーカス管理

• 初期フォーカス：React/AngularのautoFocusプロパティを使用します。
• 非セマンティックタグ：これらのタグを使用する場合は、フォーカスを適用するカスタムJavaScriptコードと、onFocusのカスタムスタイルを記述します。
• tabindex：次のユースケースにのみ使用します。
  • フォーカス可能でない要素をフォーカス可能にしている場合。
  • フォーカス順序を細かくカスタマイズする場合。モーダルとカスタムコンポーネントに影響します。以下に例を示します。
    <div tabindex="0">Focusable div using tabindex</div> // // tabindexは要素をフォーカス可能します
    
• 文字間隔：一貫性を保ち、間隔が狭すぎたり広すぎたりしないようにします。
• すべて大文字：すべて大文字にすることは避けます。特に長い文章の場合に読みにくくなります。
• 行の高さ：読みやすさを向上させるために、WCAG（英語のみ）に従って1.5（または150%）以上を使用します。
• タイポグラフィ：タイポグラフィの一貫性を保ちます。

​

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

​

オプション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を使用してそのメッセージを処理する

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

// 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

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

​

Vega WebViewのユーザー補助機能

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

​

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

​

VoiceViewの有効化

​

画面上のナビゲーション

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

​

Fire TVリモコンを使用する

• [戻る] キーと [メニュー] キーを 2 秒間押し続けます。

​

コマンドラインを使用する場合

vega device shell

vdcm set "com.amazon.devconf/system/accessibility/VoiceViewEnabled" "ENABLED"

​

VoiceViewの無効化

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

​

VoiceViewからの要素の隠蔽

aria-hidden="true"

​

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

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

​

動的な値のアナウンス

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

​

テストケース

​

VoiceView

​

VoiceViewを有効／無効にすることができる

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

​

VoiceViewを有効にした状態でアプリが動作する

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

​

新しい画面でテキストが読み上げられる

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

​

ナビゲーションと要素の読み上げが機能する

​

フォーカスを受け取った要素が一瞬間を置いて読み上げられる

​

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

​

VoiceViewがレビューモードで機能する

​

アクセシビリティジェスチャーが機能する

​

拡大（画面のズーム）

​

拡大を有効／無効にすることができる

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

​

UI全体でズームが機能する

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

​

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

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

​

初回は1.5倍にズームする

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

​

初回の後のズームではユーザーの設定が維持される

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

​

拡大鏡がフォーカスに対応する

​

すべてのテキストとコントロールにアクセスできる（メニューと方向パッドを使用して移動）

​

字幕／キャプション

​

字幕を有効／無効にすることができる

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

​

クローズドキャプションのスタイルが機能する

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. どこにも移動できなくなる場所がないことを確認します。

​

レイテンシ

​

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

​

コンテンツを画面に読み込み中であることが視覚的および聴覚的にユーザーに通知される

​

接続がタイムアウトしてもユーザーがブロックされない

​

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

​

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

​

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

​

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

​

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

​

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

​

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

​

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

​

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

​

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

​

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

​

関連トピック

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