トピックを検索
読み方で意味が変わるのにふりがなのない漢字
ショップが「生物」に読みを添えずに書いているため、なまもの(生鮮食品)のことか、せいぶつ(生き物)のことかが、読む人にも読み上げの音声にも分からない
<p>生物を含むご注文は…</p> 問題
文から漢字の読みを決められない人や、音声で聞く人には、ショップが配送について書いた注意書きが、何を指しているのか分からない
新鮮な魚介を冷蔵で届けるオンラインの鮮魚店で、購入手続きのページに配送についての短い案内が載っています。その中に「生物を含むご注文は、宅配ボックスにお届けできません。」という一文があります。魚は宅配ボックスに1日置かれると傷んでしまうため、店はこの「生物」を「なまもの」のつもりで書いています。
「生物」には、生き物を意味する「せいぶつ」という読みもあり、学校の教科の名前にもなっています。この文は、どちらの読みでも意味が通ります。生きた貝を売る店なら、生き物を宅配ボックスに入れないのも自然です。そう読んだ人は、刺身用のまぐろなら宅配ボックスでかまわないと判断します。どちらの言葉なのかは、ページのどこにも書かれていません。読み上げの音声エンジンは、自分でどちらかの読みを選び、聞く人には選ばれた読みしか届きません。
達成基準3.1.6(発音)はレベルAAAです。文脈において、発音が分からないと単語の意味が不明瞭になる場合に、その発音を特定する手段を求めています。解説書では、日本語が主な例の一つです。漢字には読みが複数あるものがあり、読みの情報がなければスクリーンリーダーが読み間違えることがある、読み間違えれば内容が通じなくなる、と説明しています。また、文脈から読みが決まる場合は何も必要ないとしています。ほとんどの漢字は、こちらに当てはまります。「生物の授業」を「なまもののじゅぎょう」と読む人はいません。
この注意書きは、もう一方の場合です。「生物」とだけ書くと、辞書では「なまもの」と「せいぶつ」をはじめ、意味の違う複数の言葉に当たり、この文、この店では、なまものともせいぶつとも取れます。本文に読みがないため、読む人が探せる読みも、ソフトウェアが使える読みもありません。HTMLは書かれた文字をそのまま伝えるだけで、ただの段落にはどう読むかを示すものがありません。ブラウザーにも、スクリーンリーダーにも、読み上げ機能にも、届くのは「生物」という文字だけです。
この注意書きは注文の届け先を左右するため、読み違えると、一瞬戸惑うだけでなく、届いた魚が傷むことになります。上手(じょうず、うわて、かみて)、最中(さいちゅう、もなか)、人気(にんき、ひとけ)のように、読みごとに別の言葉になる漢字では、文から読みが決まらない限り、どれも同じことが起きます。
10グループ中3グループに影響
- 全盲 (影響あり)
- 弱視 (影響あり)
- 色覚 (影響なし)
- ろう (影響なし)
- 難聴 (影響なし)
- 発話 (影響なし)
- 手の操作 (影響なし)
- 筋力・可動域 (影響なし)
- 認知 (影響あり)
- 光過敏 (影響なし)
- 言語・認知・学習の能力が限られる 読字障害のある人、子ども、日本語を学んでいる人は、漢字の読みを一つしか知らないことがよくあります。「生物」なら、教科の名前でもある「せいぶつ」かもしれません。注意書きを生き物の話だと受け取ってしまい、日本語に慣れた人なら文脈で判断できるところでも、判断がつきません。
- 視覚を使わない スクリーンリーダーの音声エンジンは、文字だけを手がかりに「生物」の読みを選ぶしかなく、利用者には選ばれた読みしか聞こえません。確かめるには、1文字ずつ読ませて、読みを自分で推し量る必要があります。
- 視覚が限られる 画面を拡大しながら読み上げも使う人にも、音声エンジンが推測した同じ読みが聞こえます。読みをルビで示すと、ブラウザーはルビを本文の半分の大きさで描くため、行の中で真っ先に小さすぎて読めなくなるのはルビです。
マークアップには何の誤りもないため、自動チェックでは見つかりません。axeをはじめ、診断に使われるルールセットには3.1.6のルールがなく、EaseWebの診断にもまだこの確認はありません。コードレビューでも、HTMLの確認を頼まれたAIアシスタントでも、見えるのは見出しと段落だけです。ある言葉が2通りに読めるかどうかは、その一文の日本語の問題で、別の読み方ができないかを一語ずつ確かめる人が必要です。音声エンジンで聞いても決着はつきません。エンジンはどちらかの読みで「生物」をなめらかに読むため、選んだ読みが正しいかどうかは、店の意図を知っている人にしか分かりません。ページ全体にふりがなを付けるツールも、音声エンジンと同じように文字から読みを判断するため、こうした言葉に付く読みは確認が必要です。
試してみる
「聞く」を押して、端末が注意書きをどう読むか聞いてみましょう
店が意図しているのは「なまもの」(生鮮食品)で、「せいぶつ」と読むと生き物の意味になります。「聞く」を押すと、端末に日本語の音声があればその音声で読み上げ、パネルには音声に渡される内容が表示されます。続けて、それぞれの修正を適用して聞き直してください。
問題あり 修正できますか?
お届けについて
生物を含むご注文は、宅配ボックスにお届けできません。
「聞く」を押すと注意書きを読み上げます。
修正方法
読み方を示すか、一通りにしか読めない書き方にする
<h2>お届けについて</h2><p> 生物を含むご注文は、宅配ボックスにお届けできません。</p>問題点2点
- 「生物」は「なまもの」(生鮮食品)とも「せいぶつ」(生き物)とも読め、どちらでも文の意味が通ります。
- ページのどこにも、読む人や音声エンジンに向けた読みがありません。
一通りにしか読めない書き方にする
<h2>お届けについて</h2><p> 生ものを含むご注文は、宅配ボックスにお届けできません。</p>修正の手順1ステップ
- 「生物」を、「物」をかなにした「生もの」に書き換えます。読みは「なまもの」の一つだけになり、どの読み手もどの音声エンジンも、店の意図した言葉で読みます。
これで修正前の例は直り、3.1.6を満たします。読みが一つになれば、不明瞭になるものが残らないからです。かなで「なまもの」と書いても同じです。ほかによく使われる書き方がある言葉ならどれにも使えますが、商品名や地名のように、書かれたとおりに残す必要がある言葉には使えません。
3つとも基準を満たします。「生もの」や「なまもの」のように、一通りにしか読めない書き方がある言葉なら、それで書いてください。手間がかからず、どの読み手もどの音声も、正しい言葉を1回で読みます。書かれたとおりに残す必要がある言葉で、ページが音声で聞かれることを考えるなら、括弧で読みを示します。言葉が2回読まれても、読みは必ず読み上げられます。ページがすでにルビを使っている場合や、括弧では行が詰まって見える場合はルビを使います。ただし、読みが聞こえないことがある点は承知しておいてください。
ルビがスクリーンリーダーでどう読まれるかは、まだ定まっていません。HTMLの要素をアクセシビリティAPIに対応付ける仕様(html-aam)には、この扱いを定めるよう求めるissue #352が2021年に立てられ、今も未解決のままです。このissueによると、ブラウザーとスクリーンリーダーの組み合わせの多くはベーステキストとルビの両方を読み、Chromeは代わりに rt をベーステキストの説明として渡します。上の修正後の例をChromeのアクセシビリティツリーで見ると、確かにルビの項目のテキストは「生物」で、「なまもの」はその説明になっています。日本語での報告も同じように分かれています。漢字とふりがなが続けて読まれ、文が途切れてしまうという報告もあれば、1文字ずつ読まない限り漢字しか読まれないという報告もあります。ルビが聞こえることを当てにする前に、利用者が使うスクリーンリーダーで聞いて確かめてください。
読みをスクリーンリーダーだけに渡す方法は使いません。言葉を囲む span に aria-label="なまもの" を付けることは認められていません。span のロールはgenericで、ARIA 1.2はgenericに名前を付けることを禁止しているからです。視覚的に隠した読みは、画面を目で読む人には届きません。3.1.6が対象とする、読むことに困難のある人も、その中にいます。言葉に付けた title のツールチップは、タッチ画面では表示されず、確実に読まれるわけでもありません。
ルビには ruby、rt、rp だけを使います。W3CのH62の例には、ベーステキストを囲む rb がまだ載っていますが、HTML標準は rb と rtc を廃止された要素としており、ベーステキストは ruby の中に直接書きます。rt は初期状態で本文の半分の大きさで描かれ、16pxの本文なら読みは8pxです。それ以上小さくせず、利用者が使う拡大率で読めるか確認してください。
こうした言葉が多い長い文書なら、各言葉の読みを載せた用語集や、各言葉から読みへのリンク(G62、G121)でも基準を満たします。注意書きの中の一語なら、読みは、読まれる場所である言葉のすぐそばに置きます。
修正の確認
4項目、マウス不要
確認方法: スクリーンリーダー、画面を見ずに視聴
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。例は1つの注意書きの中の1語です。3.1.6はレベルAAAで、多くの方針が求めるAAを超える基準ですが、修正は数文字で済み、このような注意書きが意図どおりの意味を伝えるようになります。人名と地名も、よくある場面です。同じ修正が使えますが、名前はたいてい漢字のまま残す必要があり、人の名前の読みは推測せず、本人に尋ねるのが確実です。上手を「かみて」と読み、客席から見た舞台の右側を指す場合のように、読みだけでなく意味も必要なときは、「意味の説明がない専門用語や見慣れない言葉」を参照してください。ほかの言語で書かれた一節は別の問題です。「言語の指定がなく、誤った発音で読まれる別の言語の箇所」を参照してください。音声エンジンやスクリーンリーダーはリリースごとに変わるため、ここでは特定の読み上げ結果を報告していません。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
参考資料
- WCAG Understanding: pronunciation(新しいタブで開きます)
- WCAG Technique G120(新しいタブで開きます)
- WCAG Technique G121(新しいタブで開きます)
- WCAG Technique H62(新しいタブで開きます)
- html.spec.whatwg.org: text-level-semantics(新しいタブで開きます)
- developer.mozilla.org: ruby(新しいタブで開きます)
- github.com: 352(新しいタブで開きます)
- w3.org: wai-aria-1.2(新しいタブで開きます)
- learningcrisis.net(新しいタブで開きます)
- kakuyomu.jp: 16817330656684026924(新しいタブで開きます)
- kotobank.jp: %E7%94%9F%E7%89%A9-542934(新しいタブで開きます)
EaseWebのサービス
修正した問題を、次のリリースで再発させない
このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。