イスタンブール・カドゥキョイの 12 卓の茶店が、VoiceOver/TalkBack に対応した QR メニューに切り替えてトルコ視覚障害者協会で紹介され、月 240 人の新規来店を獲得しました。音声アクセシビリティは収益に直結します。
WCAG 2.2 AA の基本
スクリーンリーダーにはセマンティック HTML が必須です。商品名は h3、価格は aria-describedby で関連付け、アレルゲン絵文字には aria-label="グルテンを含む" を付与します。コントラスト 4.5:1、タップ領域 44×44 px、Tab 順序の整合性も必須です。
絵文字だけでは視覚障害者には伝わりません。ARIA ラベルなしの装飾は無音です。
カート用 ARIA Live
商品追加時、role="status" または aria-live="polite" 領域で「レンズ豆スープを追加、合計 3 点」とアナウンスします。エラーは role="alert" で即時割り込み。
thMenu の ToastProvider は既定で aria-live="polite"。アレルゲン空状態の「スタッフにお尋ねください」はフォールバックとして重要です。
公開前テスト
iPhone の VoiceOver または Android の TalkBack を有効にし、注文フロー全体を耳だけで操作してください。1 秒以上の無音はフォーカス問題のサインです。Axe DevTools / WAVE で大半の違反を 30 秒で検出できます。
必ず実際の視覚障害者にテストしてもらいましょう。自動ツールは文脈を把握できません。
FAQ
専用の音声バージョンリンクは必要? 不要です。正しい HTML が両方の利用者に対応します。
独自 TTS を組み込むべき? 不要、OS のスクリーンリーダーが行います。
WCAG 認証は取れる? 公的認証はなく、VPAT 報告書が標準です。
お役に立ちましたか?シェアしてください。
関連記事
QRコードメニューとは？レストラン向け完全ガイド
QRコードメニューは、お客様がスマートフォンで瞬時にメニューにアクセスできる仕組みです。アプリ不要、紙不要、印刷コストゼロ。始め方のすべてを解説します。…
紙メニューからQRデジタルメニューへの切り替え：ステップバイステップガイド
QRメニューを導入したいけれど、何から始めればいいかわからない？撮影・コンテンツ移行・QRコード印刷・スタッフ研修・ローンチ当日のチェックリストまで完全解説。…
地域ターゲティングQRメニュー:訪問者IPで言語を出し分け
アンタルヤ・ララの180席オールインクルーシブリゾートが、Cloudflare WorkersとCF-IPCountryで同じQRをトルコ語・ドイツ語・ロシア語…