生物を含むご注文は、宅配ボックスにお届けできません。
``` - 「生物」は「なまもの」（生鮮食品）とも「せいぶつ」（生き物）とも読め、どちらでも文の意味が通ります。 - ページのどこにも、読む人や音声エンジンに向けた読みがありません。 ## 修正後：一通りにしか読めない書き方にする ```html生ものを含むご注文は、宅配ボックスにお届けできません。
``` 1. 「生物」を、「物」をかなにした「生もの」に書き換えます。読みは「なまもの」の一つだけになり、どの読み手もどの音声エンジンも、店の意図した言葉で読みます。 これで修正前の例は直り、3.1.6を満たします。読みが一つになれば、不明瞭になるものが残らないからです。かなで「なまもの」と書いても同じです。ほかによく使われる書き方がある言葉ならどれにも使えますが、商品名や地名のように、書かれたとおりに残す必要がある言葉には使えません。 ## 修正後：言葉の直後に括弧で読みを示す ```html生物（なまもの）を含むご注文は、宅配ボックスにお届けできません。
``` 1. W3CのテクニックG120のとおり、言葉の直後に、全角の括弧に入れて読みをかなで書きます。文を読めば、誰にでもどの言葉なのかが分かります。 2. 少なくともページで最初に出てくる箇所に付け、カートや注文確認のように注意書きが単独で表示される場所にも付けます。 これで修正前の例は直り、3.1.6を満たします。読みが本文の一部になるため、どのブラウザー、スクリーンリーダー、読み上げ機能にも届き、文をコピーしても一緒に付いていきます。その代わり、スクリーンリーダーは言葉を2回読みます。W3Cの解説書にあるとおり、まず漢字がエンジンの選んだ読みで読まれ、そのあとで正しい読みのかなが読まれます。 ## 修正後：言葉にルビを振る ```html生物を含むご注文は、宅配ボックスにお届けできません。
``` 1. W3CのテクニックH62のとおり、言葉を `ruby` で囲み、ベーステキストを先に、その読みを後ろの `rt` に入れます。ブラウザーは読みを小さく、言葉の上に描きます。 2. `rt` の前後に、全角の括弧を入れた `rp` を置きます。ルビに対応したブラウザーはこれを隠し、対応していないブラウザーは「生物（なまもの）」と表示します。 3. この例のように、`ruby` 要素全体を1行に書きます。中に改行があると、言葉の横にスペースとして描かれます。 これで修正前の例は直り、読みが見える人には3.1.6を満たします。文は店が書いたままの見た目で、読みが上に添えられます。ただし、音声で聞く人にはこれだけでは足りません。スクリーンリーダーがルビをどう扱うかはブラウザーとスクリーンリーダーによって異なり、Chromeでは、読みは行の一部ではなく、言葉の説明として渡されます。 ## どの方法を選ぶか 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）でも基準を満たします。注意書きの中の一語なら、読みは、読まれる場所である言葉のすぐそばに置きます。 ## 修正の確認 1. その言葉を知らない人のつもりで各ページを読む。読みごとに別の言葉になり、文からどちらか決まらない漢字の言葉を、すべて書き出す。 2. 書き出した言葉ごとに、画面上のすぐそばに括弧かルビで読みがあるか、一通りにしか読めない書き方になっていることを確認する。 3. それぞれの文を、利用者が使うブラウザーとスクリーンリーダーで、またスマートフォンやブラウザーの読み上げ機能で聞く。読みが1回読まれるか、2回読まれるか、読まれないかを記録する。 4. ページ全体にふりがなを付けるボタンがサイトにある場合は、オンにして、書き出した言葉に付く読みを確認する。 OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。文面を変えた際は、再度確認します。 ## 制限 このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。例は1つの注意書きの中の1語です。3.1.6はレベルAAAで、多くの方針が求めるAAを超える基準ですが、修正は数文字で済み、このような注意書きが意図どおりの意味を伝えるようになります。人名と地名も、よくある場面です。同じ修正が使えますが、名前はたいてい漢字のまま残す必要があり、人の名前の読みは推測せず、本人に尋ねるのが確実です。上手を「かみて」と読み、客席から見た舞台の右側を指す場合のように、読みだけでなく意味も必要なときは、「[意味の説明がない専門用語や見慣れない言葉](/ja/learn/jargon)」を参照してください。ほかの言語で書かれた一節は別の問題です。「[言語の指定がなく、誤った発音で読まれる別の言語の箇所](/ja/learn/language-of-parts)」を参照してください。音声エンジンやスクリーンリーダーはリリースごとに変わるため、ここでは特定の読み上げ結果を報告していません。 ## スクリーンリーダーでの動き（EaseWebが実機で確認） `,