本文へ移動
easeweb
ご相談
トピックを検索

読み方で意味が変わるのにふりがなのない漢字

ショップが「生物」に読みを添えずに書いているため、なまもの(生鮮食品)のことか、せいぶつ(生き物)のことかが、読む人にも読み上げの音声にも分からない

WCAG 2.2
SC 3.1.6AAA
必須とする規格
Section 508、EN 301 549、JIS X 8341-3 では必須ではない
問題あり <p>生物を含むご注文は…</p>
アクセシビリティの問題を示した図: 認知:これは、なんて読むの?
01

問題

文から漢字の読みを決められない人や、音声で聞く人には、ショップが配送について書いた注意書きが、何を指しているのか分からない

02

試してみる

「聞く」を押して、端末が注意書きをどう読むか聞いてみましょう

店が意図しているのは「なまもの」(生鮮食品)で、「せいぶつ」と読むと生き物の意味になります。「聞く」を押すと、端末に日本語の音声があればその音声で読み上げ、パネルには音声に渡される内容が表示されます。続けて、それぞれの修正を適用して聞き直してください。

問題あり 修正できますか?

問題読みのない漢字の言葉

お届けについて

生物を含むご注文は、宅配ボックスにお届けできません。

「聞く」を押すと注意書きを読み上げます。

再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。

03

修正方法

読み方を示すか、一通りにしか読めない書き方にする

修正前
問題読みのない漢字の言葉
<h2>お届けについて</h2><p>  生物を含むご注文は、宅配ボックスにお届けできません。</p>
問題点2点
  • 「生物」は「なまもの」(生鮮食品)とも「せいぶつ」(生き物)とも読め、どちらでも文の意味が通ります。
  • ページのどこにも、読む人や音声エンジンに向けた読みがありません。
修正後

一通りにしか読めない書き方にする

<h2>お届けについて</h2><p>  生ものを含むご注文は、宅配ボックスにお届けできません。</p>
修正の手順1ステップ
  1. 「生物」を、「物」をかなにした「生もの」に書き換えます。読みは「なまもの」の一つだけになり、どの読み手もどの音声エンジンも、店の意図した言葉で読みます。

これで修正前の例は直り、3.1.6を満たします。読みが一つになれば、不明瞭になるものが残らないからです。かなで「なまもの」と書いても同じです。ほかによく使われる書き方がある言葉ならどれにも使えますが、商品名や地名のように、書かれたとおりに残す必要がある言葉には使えません。

04

修正の確認

4項目、マウス不要

確認方法: スクリーンリーダー、画面を見ずに視聴

4件中0件を確認済み

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。文面を変えた際は、再度確認します。

スクリーンリーダーでの <ruby>, <rt>の読まれ方

制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。例は1つの注意書きの中の1語です。3.1.6はレベルAAAで、多くの方針が求めるAAを超える基準ですが、修正は数文字で済み、このような注意書きが意図どおりの意味を伝えるようになります。人名と地名も、よくある場面です。同じ修正が使えますが、名前はたいてい漢字のまま残す必要があり、人の名前の読みは推測せず、本人に尋ねるのが確実です。上手を「かみて」と読み、客席から見た舞台の右側を指す場合のように、読みだけでなく意味も必要なときは、「意味の説明がない専門用語や見慣れない言葉」を参照してください。ほかの言語で書かれた一節は別の問題です。「言語の指定がなく、誤った発音で読まれる別の言語の箇所」を参照してください。音声エンジンやスクリーンリーダーはリリースごとに変わるため、ここでは特定の読み上げ結果を報告していません。

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

EaseWebのサービス

修正した問題を、次のリリースで再発させない

このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。

サービス内容を見る