Hospitality digital menu accessibility

An accessible digital menu is not a special version. It is the normal guest journey designed so more people can perceive, understand and operate it. The venue must also keep a dignified non-digital route.

Start with the complete journey

Test the scan, page load, menu navigation, item choice, modifiers, guest details, basket, confirmation and status. A readable menu that becomes inaccessible at the final button is not an accessible ordering journey.

Structure and language

• One descriptive page heading explains the current step.
• Menu sections use logical heading levels.
• Controls have visible, programmatic labels.
• Link and button text describes the action.
• Instructions do not depend only on colour, position or an icon.
• Language is concise and venue terminology is explained.
• Allergen information is reachable and understandable.

Text, images and contrast

• Text contrast is checked in every theme and state.
• Guests can zoom and reflow without horizontal navigation for the main journey.
• Informative images have useful text alternatives; decorative images use empty alternatives.
• Item information does not exist only inside an image.
• Focus, unavailable, selected and error states remain visually distinct.

WCAG 2.2's minimum text contrast criterion is 4.5:1 for normal text and 3:1 for large text. Treat that as a measurable floor rather than judging by eye.

Touch and keyboard controls

Controls should be large enough to activate and separated from neighbouring actions. WCAG 2.2 includes a 24 by 24 CSS pixel minimum target criterion with defined exceptions; a 44 by 44 target remains a useful enhanced aim for important mobile actions.

• The whole journey works with keyboard navigation.
• Focus follows a logical order and remains visible.
• Quantity, choice and remove controls have accessible names.
• Opening and closing dialogs returns focus predictably.
• Sticky bars do not obscure focused controls or messages.

Choices, validation and recovery

Required modifiers must be clear before submission. When something is missing or invalid, identify the field, explain the problem in text and let the guest correct it without losing the order.

• Do not use placeholder text as the only label.
• Associate help and error text with the relevant control.
• Preserve valid entries after an error.
• Confirm consequential actions such as removing a guest or clearing a basket.
• Keep a route to staff assistance visible.

Motion, timing and live status

Respect reduced-motion preferences, avoid unnecessary animation and make status changes available to assistive technology without repeatedly interrupting the guest. Do not impose a short timeout on reading or ordering without a clear need and recovery route.

Test with people and real devices

1. Use keyboard-only navigation.
2. Test with a common screen reader.
3. Zoom text and the whole page.
4. Check high contrast and light/dark themes.
5. Use a small phone on guest Wi-Fi.
6. Ask people with different access needs to complete a real order.
7. Retest after menu or interface changes.

Primary references: W3C WCAG 2.2 Quick Reference and WAI tutorials.