デジタルメニューのアクセシビリティ対応ガイド

車いすのお客様がレストランに入ってこられたとします。店内はバリアフリー基準を満たし、スロープも設置され、テーブルも対応済みです。しかし、QRコードを読み取ってメニューを確認しようとしたとき、スクリーンリーダーでは読み取れないPDFが表示されてしまいます。アクセシビリティの取り組みが、最後の一歩——デジタルメニュー——で途切れてしまうのです。

デジタルメニューのアクセシビリティは、大手チェーンやECサイトだけの課題ではありません。オンラインメニューやテーブルに設置したQRコード、スマートフォンで閲覧できるメニューを提供しているすべての飲食店経営者に関わるテーマです。日本でも、視覚・運動機能・聴覚・認知に何らかの障がいを持つ方は数多くいらっしゃいます。さらに、腕を骨折している、加齢で視力が低下している、画面が読みにくいほど明るい屋外にいるなど、一時的に同様の困難を抱える場面もあります。デジタルメニューは、こうしたあらゆるケースに対応できるものでなければなりません。

これは単なる善意の問題ではありません。フランスおよびEUの法規制では、デジタルアクセシビリティに関する具体的な義務が課されています。日本においても、障害者差別解消法の改正により合理的配慮の提供が義務化されるなど、同様の流れが加速しています。対応を怠れば制裁のリスクがあるだけでなく、何より貴重な顧客を失うことになります。

本ガイドでは、専門用語を極力使わず、今週から実践できるアクションとともに、デジタルメニューを誰もが使えるものにするための具体的なポイントをお伝えします。

デジタルメニューのアクセシビリティに関するフランスの法規制

2005年2月11日法とRGAA

フランスでは、2005年2月11日法（障がい者の権利・機会の平等、参加および市民権に関する法律）が、アクセシビリティの基盤を築きました。当初は建物や公共サービスを対象としていましたが、その適用範囲は段階的にデジタル分野にも拡大されています。

RGAA（Référentiel Général d'Amélioration de l'Accessibilité：フランスのアクセシビリティ向上に関する一般基準）のバージョン4.1は、この義務を具体的な技術基準に落とし込んだものです。RGAAは、W3Cが策定した国際標準であるWCAG（Web Content Accessibility Guidelines）2.1に基づいています。適合レベルはA（最低限）、AA（推奨目標）、AAA（最適）の3段階で定義されています。

個人経営の飲食店にとっては、行政機関とは事情が異なります。店舗のウェブサイトやデジタルメニューは、公的機関に適用されるRGAAの義務対象に必ずしも含まれるわけではありません。しかし、状況を変える2つの要素があります。

EU アクセシビリティ指令（2019/882）

EU指令2019/882（通称「European Accessibility Act」）は、2025年6月28日から適用されています。この指令は、消費者向けに提供されるデジタル製品・サービス（電子商取引サービスを含む）にアクセシビリティ要件を課すものです。

デジタルメニューでオンライン注文、テイクアウト予約、テーブル決済が可能な場合、この指令の適用対象となる可能性があります。従業員10名未満かつ年間売上高200万ユーロ（約3億2,000万円）以下の零細企業にはサービスに関する免除規定がありますが、すべてのケースをカバーするものではなく、規制の方向性は明らかに適用範囲の拡大に向かっています。

ERP（公衆受入施設）の義務とデジタルへの拡張

フランスでは、レストランはERP（Établissement Recevant du Public：公衆受入施設）に分類されます。そのため、すでに身体障がい者向けの物理的なアクセシビリティ基準への適合が求められています。規制の論理は一貫しており、物理的なアクセスが保証されるべきであれば、メニューを含む情報へのアクセスも同様に保証されるべきだという考え方です。

具体的には、ERP適合検査において、利用可能なメニューがアクセシブルでないQRコードのみである場合、不適合と判断される可能性があります。紙のメニューは代替手段として有効ですが、完全デジタル化を選択されている場合——そしてそうした飲食店は増加の一途をたどっています——、そのメニューのアクセシビリティは事実上の義務となります。

デジタルメニューで考慮すべき4つの障がいの種類

飲食店で「障がい」と聞くと、車いすを思い浮かべる方が多いかもしれません。しかし、デジタルアクセシビリティが対象とする範囲はそれよりもはるかに広いものです。バリアフリー対応のデジタルメニューは、4つのカテゴリーのニーズに応える必要があります。

視覚障がい

デジタルメニューにおいて最も影響が大きい分野です。全盲、弱視、色覚異常、加齢に伴う視力低下が含まれます。視覚障がいのある方は、スクリーンリーダー（iPhoneのVoiceOver、AndroidのTalkBack）を使用して画面の内容を音声で読み上げます。メニューがスキャンしたPDFや画像の場合、スクリーンリーダーは内容を認識できず、「画像」とだけ読み上げるか、何も反応しません。

弱視の方は、レイアウトが崩れることなくテキストを拡大でき、文字と背景に十分なコントラストがあることを必要とします。色覚異常の方は、「辛い」を示す赤色が唯一の目印であれば、それを判別することができません。

運動機能障がい

運動機能に障がいのある方は、タッチスクリーンを正確に操作することが困難な場合があります。小さすぎるボタン、指の精密なスワイプを要求するドロップダウンメニュー、間隔が狭すぎるタップ領域——こうした要素は、健常者には見えない障壁ですが、当事者にとっては操作を阻む大きな問題です。

キーボードのみ、あるいはスイッチコントロールや音声認識などの支援技術で操作する方もいらっしゃいます。デジタルメニューは、タッチスクリーンなしでも使えるものでなければなりません。

聴覚障がい

デジタルメニューにシェフの紹介や料理の調理動画など、音声・映像コンテンツが含まれている場合、字幕やテキスト書き起こしがなければ、聴覚に障がいのある方はその内容にアクセスできません。

認知障がい

認知障がい（ディスレクシア、注意欠陥、知的障がいなど）は、多くの方に影響しています。情報が詰め込まれ、ナビゲーションが複雑で、難解な用語や一貫性のないレイアウトのメニューは障壁となります。シンプルさとわかりやすさは、障がいのある方だけでなく、すべてのお客様にとってもプラスに働きます。

アクセシブルなデジタルメニューの技術基準

ここからは具体的な内容に入ります。アクセシブルと認められるために、デジタルメニューが満たすべき技術基準をご紹介します。

セマンティック構造と論理的なナビゲーション

デジタルメニューには、明確で階層化された構造が必要です。技術的には、適切なHTMLタグの使用を意味します。カテゴリーやサブカテゴリーには見出し（h1、h2、h3）、料理の一覧にはリスト、説明文には段落タグを使用します。

なぜこれが重要なのでしょうか。スクリーンリーダーはこの構造を基に、ユーザーがページ内を移動できるようにしています。「前菜」「メイン」「デザート」などのカテゴリーが見出しタグなしの単なる太字テキストであれば、視覚障がいのあるユーザーはデザートに直接ジャンプできません。メニュー全体を一品ずつ最初から聞かなければならないのです。

ナビゲーションは論理的な順序に従う必要があります：

カテゴリーが明確に識別・区分されている
各料理が独立したブロック（名前、説明、価格、アレルゲン情報）で表示されている
最初に戻ることなくカテゴリー間を移動できる
キーボードフォーカスが視覚的な読み順（上から下、左から右）に従っている

コントラストと可読性

RGAAおよびWCAGでは、テキストと背景の間に以下の最低コントラスト比が求められています：

4.5:1 — 通常サイズのテキスト（レベルAA）
3:1 — 大きなテキスト（太字18pxまたは通常24px）
3:1 — 情報を伝えるグラフィック要素（アイコン、ボタン）

実際のところ、メニューデザインでよく見られるトレンドである、白い背景に薄いグレーのテキストは基準を満たしていないケースが多くあります。料理の写真を背景にした白いテキストも同様の問題があり、画像の領域によってコントラストが変動します。

コントラストを確認できる無料ツールがあります。WebAIMのColor Contrast Checkerやブラウザ拡張機能のWAVEなどです。デジタルメニューのデザインに取り組む際は、すべての色の組み合わせをこれらのツールでテストすることをお勧めします。

インタラクティブ要素のサイズ

メニュー内のボタンやリンクは、最低44×44ピクセルのサイズが必要です（WCAG 2.1、基準2.5.5の推奨）。これにより、運動機能に困難を抱える方でも誤操作なくタップできるようになります。

具体的に言えば、「カートに追加」ボタンの高さが30ピクセルであれば小さすぎます。2つのボタンが間隔なく並んでいれば、手が震える方は誤って隣のボタンを押してしまいます。

スクリーンリーダーとの互換性

デジタルメニューは、スクリーンリーダーで完全に読み上げられる必要があります。具体的には以下の対応が求められます：

装飾画像には空のalt属性（alt=""）を設定し、読み上げをスキップさせる
情報を伝える画像には説明的な代替テキストを設定する（例：alt="キャラメルりんごのタルトタタン"）
価格が正しく読み上げられる形式にする（「1400円」を空白なしで詰めるのではなく、「1,400円」のように明確な書式にする）
アイコンにアクセシブルなラベルを付ける（「ベジタリアン」を示す葉のアイコンには、スクリーンリーダーのみに表示される場合でも「ベジタリアン」のテキストを添える）
アレルゲン情報を色分けやテキストのないアイコンだけに頼らない

画面サイズとズームへの対応

デジタルメニューは、ユーザーが200%までズームしても読みやすく操作できる状態を維持する必要があります（WCAG基準1.4.4）。具体的には：

200%ズーム時に横スクロールバーが表示されない
テキストが途切れるのではなく、リフロー（折り返し）で対応する
画面拡大時に画像がテキストを覆い隠さない
ナビゲーションが引き続き使用できる

レスポンシブデザインで作成されたメニューは、通常この基準を満たします。一方、スキャンしたPDFや固定画像では決して満たされません。

実践ガイド：10のステップでデジタルメニューを適合させる

以下は、既存のデジタルメニューのアクセシビリティを確認・改善するための手順です。各ステップは高度な技術スキルがなくても実施できます。

ステップ1：PDFや画像形式をやめる

オンラインメニューがスキャンしたPDF、紙のメニューを撮影した写真、または固定画像であれば、まずそこから改善する必要があります。これらの形式は本質的にアクセシブルではありません。スクリーンリーダーが内容を読み取れず、ズームすると画質が劣化し、ナビゲーションも不可能です。

選択可能なテキストで構造化された、HTMLネイティブ形式のデジタルメニューに切り替えてください。QRコードメニューの導入ガイドを参考にされた場合は、選択したソリューションが単なるPDFホスティングではなく、HTMLコンテンツを生成しているかを確認してください。

ステップ2：見出し構造を確認する

スマートフォンでデジタルメニューを開いてください。スクリーンリーダーを有効にします（iPhoneのVoiceOver：設定＞アクセシビリティ＞ VoiceOver、AndroidのTalkBack：設定＞ユーザー補助＞ TalkBack）。スワイプ操作でメニュー内を移動してみてください。

以下の点を確認してください：

カテゴリーが見出しとして読み上げられるか
カテゴリー間をスキップして移動できるか
読み上げ順序が表示順序と一致しているか
各料理が次の料理と明確に区切られているか

ステップ3：コントラストをテストする

WebAIM Contrast Checkerをオンラインで使用してください。テキストの色と背景色を入力すると、コントラスト比が基準を満たしているかが即座に表示されます。

飲食店でよく見られるエラー：

パステルカラーの背景に白やクリーム色のテキスト
不透明フィルターなしの背景写真上のテキスト
料理名と視覚的に区別するために薄いグレーにした価格表示
弱い色の装飾テキスト

ステップ4：タップ領域を拡大する

メニューにカテゴリーフィルター、カートへの追加、ページ間のナビゲーション機能がある場合、各ボタンやリンクが最低44×44ピクセルであることを確認してください。また、インタラクティブ要素間の間隔も重要です。最低8ピクセルの間隔があれば、誤タップを防ぐことができます。

ステップ5：代替テキストを追加する

情報を伝えるすべての画像に代替テキストを設定してください。対象となるのは：

料理の写真（料理の見た目を確認する唯一の手段である場合）
アレルゲンのアイコン
ラベル（ベジタリアン、自家製、オーガニック）
認証や品質表示のロゴ

ステップ6：キーボードナビゲーションを確認する

タブレットにBluetoothキーボードを接続するか、パソコンからテストしてください。Tabキー（進む）、Shift+Tab（戻る）、Enterキー（実行）のみでメニューを操作します。すべてのインタラクティブ要素にアクセスでき、フォーカスインジケーター（現在位置を示す枠線）が視認できることを確認してください。

ステップ7：わかりやすい表現にする

メニューの料理説明を新鮮な目で読み直してください。調理の専門用語（「軽く炙った」「バリエーション仕立て」「自家製コンディマン」など）は、すべての方に伝わるでしょうか。一般的でない用語には、短い説明を添えるようにしてください。

これは多言語メニューの課題とも共通しています。わかりやすい表現は、認知障がいのある方にとっても、日本語に不慣れな外国人のお客様にとっても同様に有益です。

ステップ8：色だけで情報を伝えない

辛い料理（赤）、ベジタリアン（緑）、グルテンフリー（黄）などを色分けで示している場合は、必ずテキストまたはラベル付きのアイコンを併記してください。色分けだけでは、色覚異常の方やスクリーンリーダーを使用している方には情報が伝わりません。

ステップ9：フォームのアクセシビリティを確保する

デジタルメニューに注文フォーム、予約フォーム、またはコメント欄がある場合、各入力欄に明示的なラベルを関連付けてください。入力を始めると消えてしまうプレースホルダーではなく、常時表示されるラベルが必要です。エラーメッセージは明確で、該当する入力欄の近くに表示されるようにしてください。

ステップ10：代替手段を用意する

デジタルメニューのアクセシビリティが万全であっても、特別なケースに備えて代替手段を確保しておくことが大切です。常連の視覚障がいのあるお客様向けの点字メニュー、大活字の印刷メニュー、あるいはスタッフがメニューを読み上げるサービスなどが考えられます。アクセシビリティとは、人の柔軟な対応も含めたものです。

メニューをアクセシブルでなくするよくある間違い

個人経営の飲食店のデジタルメニューで最もよく見られる問題点をご紹介します。

「手軽な」PDF

最も多いのは、紙のメニューをスキャンしてそのままオンラインに掲載するケースです。手軽ではありますが、アクセシビリティの観点からは最も不適切な形式です。テキストの選択ができず、ズームすると画質が劣化し、スクリーンリーダーは内容を読み取れず、レイアウトが画面サイズに合わせて変わることもありません。

画像だけのメニュー

PDFの変形版として、メニューの各セクションを画像にし、テキストを画像内に埋め込んでいるケースがあります。見た目は美しくても、技術的にはアクセシブルではありません。画像内のテキストは、スクリーンリーダーにとって存在しないのと同じです。

料理のカルーセルやスライダー

自動スクロールするカルーセルには、アクセシビリティ上の多くの問題があります。キーボードでの操作が困難、読み終わる前にコンテンツが切り替わる、アニメーションが光過敏性てんかんや認知障がいのある方にとって負担になるなどです。静的でスクロール可能なリスト形式を推奨します。

過剰なアニメーション

パララックス効果、ページ遷移アニメーション、料理のフェードイン表示——こうした装飾的な効果は、動きに敏感な方（前庭障がいのある方）に吐き気やめまいを引き起こす可能性があります。WCAGでは、アニメーションを抑制するオプション（システム設定のprefers-reduced-motion）への対応を推奨しています。

音声・動画の自動再生

メニューページでBGMや紹介動画が自動的に再生される場合、スクリーンリーダーのユーザーは支援ツールの音声案内を聞き取れなくなります。音声・動画コンテンツは、必ずユーザーの操作によって再生が開始されるようにしてください。

セッションのタイムアウト

オンライン注文機能を持つメニューの中には、数分間操作がないとセッションが切れてしまうものがあります。スクリーンリーダーを使用している方は、メニューの閲覧に通常よりも時間がかかります。タイムアウトが短すぎると、最初からやり直すことになります。十分な時間を確保するか、切断前に警告を表示するようにしてください。

デジタルメニューのアクセシビリティをテストする方法

セルフテストは専門的な監査の代わりにはなりませんが、主要な問題を発見することができます。以下に、3段階のテスト方法をご紹介します。

レベル1：自動テスト

自動ツールで検出できるアクセシビリティの問題は、全体の約30〜40%です。最初のフィルターとしては有効です。

WAVE（wave.webaim.org）：無料のブラウザ拡張機能です。メニューページをスキャンし、赤で示されたエラーを修正してください
Lighthouse（Chrome DevToolsに内蔵）：「アクセシビリティ」タブを確認し、スコア90以上を目指してください
axe DevTools：各エラーの詳細と修正方法を提示するブラウザ拡張機能です

これらのツールは、パフォーマンスの他の側面を測定するのにも役立ちます。デジタルメニューのアナリティクスと合わせてご活用ください。

レベル2：手動テスト

残りの60〜70%は、人の目による確認が必要です。

キーボードテスト：マウスを外し、キーボードだけで操作します。すべてのインタラクティブ要素にアクセスできますか？フォーカスは視認できますか？
スクリーンリーダーテスト：VoiceOverまたはTalkBackを有効にし、目を閉じてメニューを閲覧します。読み上げられる内容は理解できますか？料理を注文できますか？
ズームテスト：ブラウザで200%にズームします。コンテンツは読みやすく、操作可能な状態を保っていますか？
コントラストテスト：テキストと背景のすべての色の組み合わせをコントラストツールで確認します
理解度テスト：メニューを知らない方に閲覧してもらいます。各項目の内容は伝わりますか？

レベル3：専門家による監査

認定された適合性を得るには、デジタルアクセシビリティの専門家に依頼してください。フランスではRGAAの完全監査費用はシンプルなサイトで通常2,000〜5,000ユーロ（約32万〜80万円）程度です。投資にはなりますが、法的な保護を得ると同時に、明確な改善ロードマップを手にすることができます。

フランスでは一部の地域や商工会議所（CCI）が、地域商業のデジタルアクセシビリティに関する助成金を提供しています。日本でも、自治体や業界団体による同様の支援制度がないか確認されることをお勧めします。

デジタルメニューと障がい：法令遵守を超えた顧客体験

デジタルメニューのアクセシビリティ対応は、単なる法的義務やリスク回避策ではありません。すべてのお客様の体験を向上させる取り組みです。

アクセシビリティはすべての方に恩恵をもたらす

アクセシビリティの原則——高いコントラスト、読みやすいテキスト、明確なナビゲーション、論理的な構造——は、すべてのユーザーにとって有益です：

メガネを忘れてしまった65歳のお客様
テラス席で直射日光を浴びながらメニューを見ている観光客の方
片手でお子様を抱え、もう一方の手の親指だけで操作している保護者の方
グルテンフリーの料理をすぐに見つけたいお急ぎのお客様
一時的な腱鞘炎で画面操作が困難な方

アクセシビリティに取り組むことで、すべてのお客様にとってメニューの可読性、操作性、閲覧のしやすさが向上します。これは非接触メニューの見過ごされがちなメリットの一つです。

実質的なビジネス上の利点

障がいのある方は、一人で食事をされるわけではありません。車いすのお客様は、ご家族やご友人、同僚と一緒にいらっしゃいます。レストランが物理的にもデジタル的にもアクセシブルであれば、グループ全体のお客様を獲得できます。デジタルメニューが使えなければ、グループ全員が別の店を選ぶことになります。

同様に、企業や団体が団体食事会を企画する際は、アクセシブルな施設を優先的に選定します。多くの法人案件の選定基準に、アクセシビリティが明確に含まれています。

ポジティブなコミュニケーション

アクセシビリティへの取り組みを——派手なマーケティングにすることなく——さりげなく発信することは、お店のイメージ向上につながります。店頭の小さなピクトグラム、ウェブサイトへの記載、研修を受けたスタッフ。こうしたさりげないサインが、すべてのお客様に配慮していることを伝えます。

💡 豆知識： ALaCarte.Directでは、QRコード形式のデジタルメニューを無料で作成いただけます。生成されるメニューはHTMLネイティブ形式で、スクリーンリーダーとの互換性や多様な画面サイズへの対応を容易にするセマンティック構造を備えており、アクセシビリティ対応の確かな出発点となります。

デジタルメニューアクセシビリティチェックリスト

最後に、印刷してオフィスに掲示できるチェックリストをまとめました。現在のメニューについて、各項目を確認してください。

構造とコンテンツ：

メニューがHTML形式である（PDFや画像ではない）
カテゴリーに階層化された見出し（h2、h3）を使用している
各料理に選択可能なテキストで名前、説明、価格が記載されている
アレルゲン情報がアイコンや色だけでなくテキストでも表示されている
表現がわかりやすく、専門用語には説明が添えられている

ビジュアルとコントラスト：

テキストと背景のコントラスト比が4.5:1以上である
200%ズームでもメニューが読みやすい
色だけで情報を伝えていない
アニメーションを無効化できる、またはprefers-reduced-motionに対応している

ナビゲーションとインタラクション：

すべてのインタラクティブ要素が最低44×44ピクセルである
キーボードナビゲーション（Tab、Shift+Tab、Enter）が機能する
キーボードフォーカスが視認できる
音声・動画の自動再生がない
セッションのタイムアウトが十分に長い

画像とメディア：

情報を伝える画像に適切な代替テキストが設定されている
装飾画像が装飾として適切にマークされている
動画に字幕が付いている
音声コンテンツにテキスト書き起こしがある

フォーム（オンライン注文がある場合）：

各入力欄に明示的で常時表示されるラベルがある
エラーがテキストで説明され、該当する入力欄の近くに表示される
フォームがキーボードで操作できる

まとめ：今週から行動を起こしましょう

デジタルメニューのアクセシビリティ対応は、数か月の開発期間を要する大規模プロジェクトではありません。今すぐ始められる一連の確認と改善の積み重ねです。

今週、この3つを実行してください：

スクリーンリーダーでメニューをテストする（5分）。スマートフォンでVoiceOverまたはTalkBackを有効にし、メニューを閲覧してみてください。内容が理解できなければ、早急に対処すべき問題があることがわかります。
コントラストを確認する（10分）。WAVEツールでメニューページをスキャンしてください。赤で示されたコントラストエラーを修正します——多くの場合、色の変更だけで解決できます。
アクセシブルでない形式を廃止する（所要時間は状況による）。メニューがPDFや画像であれば、それが最優先の課題です。QRコードによるHTML形式のデジタルメニューに切り替えて、アクセシブルなメニューの基盤を整えてください。

今月中に：

上記のチェックリストを確認し、基準を満たしていない項目に対処する
デジタルメニューの操作に困っているお客様がいた場合に代替手段を提供できるよう、スタッフを教育する
ERP（公衆受入施設）のバリアフリー基準を確認し、物理的なアクセシビリティとデジタルのアクセシビリティの整合性を検証する

アクセシビリティは、新たな負担ではありません。日々実践されていること——すべてのお客様をお迎えし、最高の体験を提供する——の自然な延長線上にあるものです。デジタルメニューにも、同じ姿勢が求められます。