If you’re running a restaurant, you may not have much time to think about web design. There’s a good chance that you rarely update your content — and if you spend most of your time in the kitchen, you might not even know how to change your homepage.
When your menu changes, you might be tempted to simply upload a PDF of the printed menu and cross-post it to your social media accounts. It’s easy enough, and your designer already provided you with a high-quality, printable document. Easy, right?
Not so fast. PDFs pose serious challenges for customers with disabilities — and under the Americans with Disabilities Act (ADA), every restaurant has a responsibility to consider those people.
Even if your PDF follows all of the best practices of digital accessibility, there are strong reasons to offer a menu with simple, responsive HTML. Below, we’ll explain how PDFs create accessibility barriers and provide tips for expanding your audience.
PDFs can be accessible, but they’re rarely the best option
PDF stands for Portable Document Format. Designers often prefer to use PDF to maintain document formatting and aspect ratios.
While PDF menus can be printed easily, they’re not ideal for most types of internet content. For starters, menu PDFs are often image-only — they don’t contain text, which makes them useless for people who can’t perceive content visually.
Many people with vision disabilities use screen readers, software that outputs text as audio or braille. Adobe’s optical character recognition (OCR) enables authors to automatically convert image-based PDFs to text PDFs, but OCR isn’t perfect.
Additionally, PDFs require accurate tags, which preserve the document’s semantic structure. The semantic structure allows different technologies to present the content in a way that makes sense. Without appropriate tags, your menu might be presented out of order — the reader might hear the name of entrée, followed by the description of a completely different menu item.
And even if your PDFs contain accurate tags and text, they’re less accessible than HTML. Some users may need to magnify the document to read it. Others may be unable to copy and paste text, which might make call-in orders more difficult.
Related: 7 Basic Steps to Making PDFs More Accessible
HTML menus provide numerous benefits over PDF menus
HTML is widely supported by screen readers and other types of assistive technology (AT). Crucially, HTML can be responsive, which means that the content remains readable regardless of the size of the user’s screen.
And from a business perspective, HTML menus are an obvious choice for various other reasons:
- HTML menus use less data and load more quickly. Customers may not wait for a large web document to finish downloading, particularly if they’re on slow or metered connections.
- HTML menus are better for search engine optimization (SEO). While search engines can read some PDFs, HTML is usually easier to crawl. Search engines will generally prioritize HTML over similar PDF content in search results.
- PDFs may not display well on smaller screens. According to a 2021 survey performed by the Restaurant Readiness Index, 14% of restaurant sales come through mobile orders.
PDFs are still useful for some customers
Of course, if you’ve already generated a PDF of your menu, you don’t need to get rid of it entirely.
Customers appreciate options. If you link to your PDF at the end of your HTML menu, some people may download the menu to share with friends — or print it out for future telephone orders.
But by putting an accessible HTML menu front-and-center, you provide a better experience for the vast majority of customers. Whether or not your restaurant offers take-out or delivery, simple HTML keeps the focus on your food (and limits frustration for your audience).
Related: 5 Must-Fix Accessibility Issues with Your PDFs
Avoid accessibility barriers when creating your restaurant’s online menu
An HTML menu can be much more accessible than a PDF-only menu. However, you’ll still need to consider the needs, preferences, and expectations of your audience when creating your content.
The Web Content Accessibility Guidelines (WCAG) is the international standard for accessibility. Following WCAG can improve compliance with the ADA and other laws — and help you provide a better ordering experience.
Here are four quick tips for avoiding common mistakes when designing your restaurant’s menu.
- Follow WCAG’s recommendations for color contrast
Low-contrast text may be difficult to read, especially for people with color vision deficiencies (also called color blindness) and other vision disabilities.
Color contrast ratio refers to the difference in luminosity (light) between text and its background. WCAG recommends a minimum color contrast of 4.5:1 for normal text.
Use free tools like the a11y® Color Contrast Accessibility Validator to test color-pairs against WCAG recommendations.
- If your menu supports online ordering, test for keyboard accessibility
Many people use a keyboard alone (no mouse) to browse the internet. Make sure your restaurant’s checkout system can be operated with just a keyboard — and provide appropriate form labels and instructions for all entry fields.
For more guidance, read: What is Keyboard Accessibility?
- Make PDF menus as accessible as possible
If you offer a PDF, make sure it’s properly tagged. PDF tags establish the language of your document, describe images, and enable screen readers to read text with an appropriate reading order.
- Provide accurate alternative text
Alternative text (also called alt text or alt tags) describes visual content. Include alt text for all images, including pictures of food — but don’t use alt text to try to make a sale.
Instead of writing, “order our delicious, mouth-watering gyro,” the alt text should read something like this: “Gyro with feta cheese.” Don’t include alt text for images that have captions or images that are purely decorative (such as dividers).
All important images must have text alternatives, including images in PDF menus. For more guidance, read: 5 Steps for Writing Alt Text for Accessibility.
An accessible website shows your restaurant’s commitment to its customers
By following the best practices of accessibility, you can provide a better experience for every user — including individuals who don’t live with disabilities. A responsive HTML menu can help people place orders quickly and easily, and when your website is easy to operate, your customers will notice.
If you’re ready to take the next steps, the Bureau of Internet Accessibility can help. Download our free eBook, Essential Guide to ADA Compliance for Websites, or test your content against WCAG Level AA checkpoints with our free, confidential website analysis.
