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

ひらがなを受け付けず、理由も示さないフリガナ欄

購入手続きのフリガナ欄が全角カタカナしか受け付けないため、IMEで入力したままのひらがなの読みが、何を直せばよいか示されないまま「正しくない」とはじかれてしまう

WCAG 2.2
SC 3.3.1ASC 3.3.3AA
必須とする規格
JIS X 8341-3 · Section 508 · EN 301 549(EU)
問題あり /^[ァ-ヶー]+$/.test(field.value)
アクセシビリティの問題を示した図: 認知:読みは合っているのに、どこを直せばいいの?
01

問題

名前の読みをIMEで入力したとおりのひらがなで入れると、カタカナで入力すべきことを示されないまま、はじかれる

02

試してみる

フォームの上の日本語入力でフリガナを入力してから、「次へ」を押してみましょう

IMEは、読みをひらがなのまま確定します。音はカタカナと同じです。ページはその読みを受け付けますか?受け付けない場合、何を直せばよいかを伝えますか?続けて、「モーガン」や「モーガン」を欄に貼り付けて比べてください。日本語入力を使える場合は、欄に実際に入力しても試せます。

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

問題読みが正しくないとだけ伝える確認
日本語入力(再現):
日本語入力(再現):
フリガナ

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

03

修正方法

読みをカタカナに変換するか、カタカナで入力するよう伝える

修正前
問題読みが正しくないとだけ伝える確認
<form>  <fieldset>    <legend>フリガナ</legend>    <label for="kana-family">セイ</label>    <input id="kana-family" name="kana-family" aria-describedby="kana-error">    <label for="kana-given">メイ</label>    <input id="kana-given" name="kana-given" aria-describedby="kana-error">  </fieldset>  <p id="kana-error"></p>  <button type="submit">次へ</button></form>
問題点2点
  • 確認は全角カタカナしか受け付けないため、ひらがなの「もーがん」も、半角カタカナの「モーガン」も通りません。
  • メッセージはフリガナが正しくないと言うだけで、カタカナなら通ることを伝えていません。
修正後

ひらがなと半角カタカナを変換してから確認する

<form>  <fieldset>    <legend>フリガナ</legend>    <label for="kana-family">セイ</label>    <input id="kana-family" name="kana-family" aria-describedby="kana-error">    <label for="kana-given">メイ</label>    <input id="kana-given" name="kana-given" aria-describedby="kana-error">  </fieldset>  <p id="kana-error"></p>  <button type="submit">次へ</button></form>
修正の手順6ステップ
  1. Unicodeの互換正規化 normalize('NFKC') で値を変換します。半角カタカナが全角になり、半角の「゙」「゚」は前の文字とまとまって1文字になるので、「モーガン」は「モーガン」になります。
  2. 続く置換で、ひらがなをカタカナにします。Unicodeでは、「ぁ」から「ゖ」までのひらがなに対応するカタカナが、それぞれコードポイントで0x60後ろにあるため、「もーがん」は「モーガン」になります。長音符「ー」は、ひらがなでもカタカナでも同じ文字です。
  3. 読みの前後に入力されたスペースを取り除きます。
  4. その後で読みを確認します。ひらがなでも、カタカナでも、半角カタカナでも通ります。
  5. 各欄には変換した読みを入れます。フォームはその読みを送信します。
  6. アルファベットで入力した読みのように、それでもはじかれる値には、何を入力すればよいかを、例と一緒にメッセージで伝えます。

これで修正前の例は直り、3.3.3を満たします。リクエストはこのスクリプトを通らずにサーバーに届くこともあるため、サーバーでも同じように変換してください。

04

修正の確認

6項目、マウス不要

確認方法: 日本語入力(IME)、キーボード、スクリーンリーダー

6件中0件を確認済み

OS、ブラウザー、IME、支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。共通のフォームの欄やその入力チェックを変更した際は、再度確認します。

制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。この例では、読みを2つの欄で受け取り、全角カタカナで保存しています。読みをひらがなや半角カタカナで保存するシステムでは、逆向きの変換が必要です。変換が変えるのは文字の種類だけで、読みが名前と合っているかまでは分かりません。アルファベットで入力した読みには、メッセージが出ます。電話番号や郵便番号の欄で全角数字をはじくのも同じ問題で、「全角数字を受け付けず、理由も示さない入力欄」で扱っています。送信に失敗した後、フォーカスの移動やエラーの一覧でメッセージをどう届けるかは、「直し方がわからないフォームエラー」で扱っています。

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

EaseWebのサービス

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

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

サービス内容を見る