This past April, the Department of Justice issued a set of final standards for Title II of the ADA (Americans with Disabilities Act), cementing accessibility requirements for state and federal government web content. Commercial business web content, such as website menus, falls under Title III, yet this regulatory expansion signifies that now’s the time for businesses to make their content accessible to all.
While Title III does not outline specific accessibility standards, the DOJ has referred to WCAG (Web Content Accessibility Guidelines) as the model to follow. These are the three tiers of measurable WCAG compliance, from lowest to highest: A, AA, and AAA, ranging from foundational accessibility practices to intensive measures that businesses should strive for. This article will focus on Levels A and AA.
Accommodating Customers Who Use Screen Readers
For people with severe eyesight impairment, the crucial information conveyed by menus can be completely unperceivable. Many rely on Screen Readers, accessibility tools that scan HTML to verbalize web page content.
Tagged PDFs
Many website menus are PDFs, which are unintelligible to screen readers. Tagged PDFs utilize unseen code to create tags that outline the structure of a document, enabling screen readers to move through content in a logical order. For example, tags could read the restaurant name first, then the appetizer section header, then the first appetizer, and so on.
Semantic HTML and ARIA Attributes
If your menu is part of a web page, you can accommodate screen readers by using semantic HTML or ARIA (Accessible Rich Internet Applications). Semantic HTML works like a tagged PDF, assigning set labels like “header” to the code to communicate meaning. ARIA constitutes a set of attributes that enrich HTML labels when they insufficiently describe content.
It’s common practice to prioritize semantic HTML and use ARIA only when necessary. An example where ARIA would help is a multi-page menu with an arrow button for clicking through the menu, which semantic HTML might label just as a “button” while ARIA could say “next page.”
Text Captions
All images, graphics, and important symbols, such as dietary labels, should have hidden text captions that the screen reader can understand. Text color used to provide meaning, such as green text for vegetarian menu items, needs to be tagged with a text description that explains the coloring.
Navigation
Tagged PDFs, semantic HTML, and ARIA labeling are nothing without keyboard accessibility—ensure users can key through all menu sections, items, and buttons, and that there’s a visible indicator symbol to show where the user is in the menu. A common example of this is a bright yellow box that highlights text.
Moreover, since screen readers have to follow a sequence, users who only care about one menu section could read through 90% of the menu before reaching their desired destination. Insert menu section links at the top of each page to prevent this.
General Accommodations
Even for people who don’t need screen readers, menus can be daunting to browse.
Combatting Small Font
Small fonts are often used in menus, as they need to convey vast amounts of information efficiently. WCAG guidelines recommend that a site’s text “can be resized without assistive technology up to 200 percent without loss of content or functionality.”
In other words, your menu text should be able to be enlarged to twice its size by default without breaking the page’s format. (Note: this does not correspond to image captions and text graphics).
Color Contrast
A certain level of color contrast is integral for readability. When coloring your menu, aim for these minimum contrast ratios between text (including text graphics) and the background:
- 4.5:1 for ≤18pt normal text, ≤14 point bold
- 3:1 for greater font sizes
- 3:1 between the graphics and adjacent colors for graphics that are essential for understanding the menu.
Logo or brand name text, purely decorative text, images with significantly more visual content than text, and text that is part of an “inactive UI component” have no contrast requirement.
Coolors offers a helpful tool that shows the contrast value between two colors and whether they meet WCAG guidelines. If changing color contrast goes against your branding, allow users to toggle to an appropriately contrasted version of your menu.
Achieving Accessibility Benefits All
Apply these design principles to your website or QR menus, enjoy the boost in customer satisfaction, and know that you helped improve the internet for everyone.
Zach Williams is a freelance writer for MustHaveMenus. MustHaveMenus offers menu, marketing, and digital signage management services for restaurants. He has written published articles for QSR, FSR, PMQ, BarBizMag, Bar & Restaurant News, Shamrock Kitchentelligence and Restobiz.
Plan to Attend or Participate in Our Events:
- 2025 Bar & Restaurant Expo, March 24-26, 2025, Las Vegas, Nevada. Register Now!
- 2025 Bar & Restaurant Expo Denver, October 26-28, 2025, Denver, Colorado
To learn about the latest trends, issues and hot topics, and to experience and taste the best products within the bar, restaurant and hospitality industry, plan to attend Bar & Restaurant Expo 2025 in Las Vegas. Visit BarandRestaurantExpo.com.
To book your sponsorship or exhibit space at our events, fill out our form.
Also, be sure to follow Bar & Restaurant on Facebook and Instagram for all the latest industry news and trends.