数字の読み上げ：スクリーンリーダーはゲームの文字をどの順で読むのか

見た目の順と読まれる順は別物

スクリーンリーダーが読むのは、ブラウザが画面の裏側に組み立てる文書の構造です。この構造は、HTMLの要素の並びをもとに作られます。CSSで位置を動かしても、並びそのものは基本的に変わりません。

次の三つは、見た目と読み上げで食い違いが起きやすい場面です。

• CSSで配置を入れ替えた場合：見た目では右上にある得点が、HTMLでは先頭に書かれていることがあります。読み上げは、その先頭から始まる可能性があります。
• canvasに文字を描いた場合：canvasの中に描かれた文字は、ふつうは読み上げの対象になりません。代わりになる文字情報を別に用意する必要があります。
• 文字を画像にした場合：作品名の飾り文字などが画像だと、代替テキストがなければ何も読まれないことがあります。

アソバースの13作品は、タイトルの文字組みがそれぞれ違います。縦組みの明朝、手描き文字、郵便ラベル、夜の標識、光の幾何学、メニュー風といった具合です。これは見た目の個性の話です。その文字が読み上げの世界でどう扱われているか（本物の文字なのか、画像なのか）は、設計から読み取れません。ページの要素を検査して確かめる部分です。

数字が崩れやすい三つの置き方

数字の読み上げが崩れる原因は、おおむね三つに分けられます。

桁や単位を別々の部品にする

「30点減」を見やすくするために、「3」「0」「点」「減」を別々の要素に分けて並べることがあります。見た目は同じでも、読み上げが一つずつ区切られ、「30」と聞こえない可能性があります。読み上げのつながりを確かめたいときは、一つの文字列としてまとまっているかを見ます。

数字と単位の間に別の要素が入る

「28」の次に装飾の要素が挟まり、その後に「秒」が来る場合です。耳で聞くと、数字と単位が離れて届きます。何の数字か分からないまま、次の情報へ進んでしまいます。

記号で意味を表す

「3×3」「3/5」「00:28」のような表記は、リーダーや音声によって読み方が変わります。たとえば「3/5」を「3分の5」と読むのか、日付のように読むのかは、環境しだいです。この点は断定せず、自分の環境で聞いて確かめます。

確かめ方：読み上げの点検を実験として組む

ここからは、読者が自分で行える形にした設計書です。結果はここには書きません。聞こえた内容をそのまま記録して判断します。

問い

作品の画面の文字は、意味の通る順番で、数字と単位がつながって読まれるでしょうか。

準備するもの

• スクリーンリーダー：WindowsならNVDA、MacならVoiceOver、スマートフォンならiOSのVoiceOverやAndroidのTalkBack。いずれも各OSやメーカーの公式案内で起動方法を確認できます。
• 点検する作品：まずは2〜3本で十分です。
• 記録用の表：作品名、画面、読み上げの文字起こし、気づきを書く欄を作ります。

手順

1. 作品のトップ画面を開き、スクリーンリーダーを起動します。
2. 画面の先頭から、一要素ずつ「次へ」の操作で読み進めます。聞こえた内容を、そのまま文字に起こします。
3. プレイ中の画面でも同じことを行います。得点、残り時間、ミスの回数に注目します。
4. 得点や時間が変わった瞬間に、自動で読み上げられるかを聞きます。
5. 日本語と英語の表示を切り替え、読み上げの言語が表示に合っているかを聞きます。サイトは日本語／英語の設定に合わせて表示を切り替えます。作者が入力した作品名や紹介文は書き換えられません。
6. 同じ操作を2回繰り返し、聞こえ方が同じかを見ます。

記録の単位

記録は「画面×要素」を単位にします。1行に次の項目を書きます。

• 画面、書くこと：トップ、プレイ中、結果など
• 要素、書くこと：残り時間、得点、ミス回数など
• 聞こえた内容、書くこと：文字起こしそのまま
• 順番、書くこと：何番目に読まれたか
• 気づき、書くこと：数字と単位が離れた、など

結果の読み方

• 数字と単位が一続きで聞こえるなら、その要素は読み上げに配慮されている可能性があります。
• 数字が一桁ずつ区切られるなら、桁ごとに要素が分かれている可能性があります。要素の検査で確かめます。
• 何も読まれない要素があれば、canvasや画像で描かれている可能性があります。
• 値が変わっても何も聞こえないなら、変化を知らせる仕組みがないか、まだ読み上げの対象になっていないかのどちらかです。

起こりやすい誤り

• 読み上げの速度が速すぎて、区切りを聞き逃すことがあります。最初は遅めに設定します。
• スクリーンリーダーは、ゲームの画面の中にフォーカスが入らないと、中の文字を読まないことがあります。ゲームの画面は、枠の中で動く独立した文書です。そのため、一度その中に移動する操作が必要になる場合があります。
• ブラウザとリーダーの組み合わせで結果が変わります。結論を出す前に、組み合わせを書き添えます。
• 音声の言語が、表示の言語と食い違っていないか確かめます。食い違うと、数字の読み方も変わります。

13作品の数字を、点検の題材にする

確認済みの仕様に出てくる数字は、そのまま点検の題材になります。作品がどう読み上げるかは書けませんが、「どの数字を、どの組み合わせで聞き分ける必要があるか」は仕様から分かります。

• 時計じかけの台所、数字の組み合わせ：1皿28秒、配膳6秒、ミス3回まで、100点評価、聞き分けたい点：秒数の二種類と、回数、点数の区別
• こだまの森、数字の組み合わせ：聴き直し15点減、間違い30点減、3回で終了、聞き分けたい点：減点の数値と、終了までの回数
• 紙ひこうき郵便、数字の組み合わせ：36秒で5通、40秒で8通、44秒で10通、最後の6秒、聞き分けたい点：秒数と通数が交互に並ぶ表記
• かたちのあいだ、数字の組み合わせ：3×3、4×4、聞き分けたい点：記号入りの盤面サイズ
• 余白の庭、数字の組み合わせ：最大80個、聞き分けたい点：数と助数詞のつながり
• WAVE / WAVE、数字の組み合わせ：16ステップ、聞き分けたい点：位置や番号の読み上げ
• 雨音のピアノ、数字の組み合わせ：30秒、128音、聞き分けたい点：録音の上限の伝わり方

たとえば紙ひこうき郵便の「36秒で5通」は、数字が二つ入った一文です。「秒」と「通」の取り違えは、耳だけだと起きやすくなります。画面上では色や位置で区別できても、読み上げでは文の中の語順だけが頼りです。こうした場所が、点検の優先度が高い箇所です。

雨音のピアノのキーボード操作は、A W S E D F T G Y H U J に割り当てられています。これを文字の並びとして聞いても、鍵盤との対応は伝わりにくいでしょう。この対応の見せ方、聞かせ方が作品にどう組み込まれているかは、作品を開いて確かめる部分です。

作る人へ：読み上げ順を意識した最小の置き方

自分でゲームを作る人は、次の三つを意識すると崩れにくくなります。

1. 数字と単位は一つの文字列にまとめ、間に別の要素を挟みません。
2. HTMLの並びを、読んでほしい順にします。見た目の位置はCSSで調整します。
3. 値の変化は、ふさわしい頻度で知らせます。毎フレーム知らせると、聞き取れなくなります。

次のコードは、単独で動く最小構成です。保存して .html として開き、スクリーンリーダーで聞き比べます。

<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<title>読み上げ順の最小例</title>
<style>
  body{font-family:sans-serif;padding:1em}
  .sr{position:absolute;left:-9999px}
  .hud{display:flex;flex-direction:column}
  .time{order:2}
</style>
<h1>得点の置き方を比べる</h1>

<h2>A：桁を分けた置き方</h2>
<p><span>3</span><span>0</span><span>点</span></p>

<h2>B：まとめた置き方</h2>
<p>30点</p>

<h2>C：見た目と読み上げを分けた置き方</h2>
<p><span aria-hidden="true">−30</span><span class="sr">30点減</span></p>

<h2>D：順番の確認</h2>
<div class="hud">
  <p class="time">残り28秒</p>
  <p class="score">得点100点</p>
</div>

<h2>E：変化の知らせ方</h2>
<p id="score">100点</p>
<p id="log" role="status"></p>
<button id="b">間違える</button>
<script>
  let s = 100;
  document.getElementById('b').onclick = () => {
    s -= 30;
    document.getElementById('score').textContent = s + '点';
    document.getElementById('log').textContent = '30点減。残り' + s + '点';
  };
</script>

AとBは、同じ見た目でも読み上げが変わる可能性を比べるものです。聞こえ方は環境で変わるため、結果は自分の耳で確かめます。Cは、画面には記号つきの「−30」を見せ、読み上げには「30点減」を渡す書き方です。Dは、CSSの order で見た目では時間を下に出しますが、HTML上は時間が先に書かれています。見た目と読み上げの順が食い違う例として、どう聞こえるかを確認します。Eは、押した瞬間だけ一文で知らせる書き方です。

次の行動

まず、気になる作品を1本選び、スクリーンリーダーで画面の先頭から順に聞いて、文字起こしを残してみてください。上の表の「画面×要素」で5行も書ければ、その作品の数字の置かれ方が見えてきます。作る側の人は、最小コードのAからEを聞き比べ、自分のゲームのHUDで同じ点検をしてみてください。

参考資料

• WCAG（Web Content Accessibility Guidelines）：W3C
• WAI-ARIA Authoring Practices：W3C
• 各スクリーンリーダー（NVDA、VoiceOver、TalkBack）の公式ドキュメント