How to make your restaurant website ADA-compliant?

Is your restaurant website ADA compliant? If you don’t know, you probably should.

If you have been following the news recently, the U.S. Supreme Court rejected an appeal by Domino’s about whether a blind man’s failure to be able to order a pizza from its website violated the Americans with Disabilities Act (ADA).

This has far-reaching implications for all restaurants because not only must their physical locations be ADA compliant, but their websites and mobile apps must be disabled friendly.

What does the law say about restaurant compliance?

The Americans with Disabilities Act (ADA), which was enacted in 1990 makes no mentions of websites (obviously). But since 2003, the U.S. Department of Justice has taken the stance that the websites of companies that accommodate the public—such as restaurants and hotels—must be accessible for the disabled.

Don’t think that means there is specific guidance that your restaurant can follow, however. Despite taking this stance, the DOJ has not issued a ruling on what constitutes compliance. It was expected that they would rule that companies must abide by the World Wide Web Consortium’s Web Content Accessibility Guidelines Level AA (WCAG 2.0 AA). But they withdrew this proposal at the end of 2017.

With no official guidelines, exactly what can restaurants do make sure they don’t fall foul of a lawsuit?

Restaurant website are vulnerable to ADA complaints

Unfortunately, restaurants are especially vulnerable to ADA lawsuits because of the nature of their business. For many restaurants, their website isn’t just a menu, it is a way of ordering food, too. Because the “goods and services” offered online are the same in store, the website will be held to the same standard as the restaurant’s physical location.

That means you have to cover all of your bases to make your restaurant website ADA compliant. That means making sure that you are compliant with WCAG 2.0 at a minimum. For most restaurant owners, that will mean consulting a professional. But if you want to do it yourself or have a better idea of what an agency might suggest, consider the following:

Incorporate disability technology into the build

When disabled users access the web, they typically use different forms of software such as screen readers to navigate websites. If your website doesn’t play friendly with this kind of technology, you could be in trouble. Whether your website is brand new or five years old, you should make sure that screen reader technology works on your site. If not, explore the actions that you can take to make your website compatible. Unfortunately, this may mean building a new website for your restaurant. But, in truth, if your website doesn’t work with this kind of technology, there are probably other elements wrong with it that mean you should definitely invest in a new website regardless.

Establish accessibility with WAVE

One of the easiest ways to judge how accessible your website is to use the online web accessibility evaluation tool, WAVE. Simply enter your restaurant’s URL into the tool and after a few seconds, WAVE will tell you what’s wrong with your website from an accessibility standpoint and what to do to fix it.

Leverage WordPress accessibility plugins

If your restaurant’s website is built using WordPress, there are a number of plugins that can help with accessibility. In particular, restaurant owners may want to install WP Accessibility, a multi-function plugin that can solve several issues; Accessibility Widget, which allows users to change text sizes; Accessibility Poetry, which creates a floating toolbar that viewers can use to change text size and contrast colors; and wA11y, a tool similar to WAVE that will highlight any issues with your site.

How to make Restaurant website ADA compliant?

Here are 10 ways to make your restaurant website disability-friendly that follow the Web Content Accessibility Guidelines (WCAG).

1. Underline or describe your links.

Instead of telling the user “click here”, you should describe the link. For example, instead of writing it out “To find out more about our new items on the menu, click here“, you can rephrase that to say “To find out more about newest recipes, check out our newest items on the menu“.

Another complementary option for this ADA upgrade would be to underline your links whenever it is possible. Make sure that there is a color contrast between the regular text and the hyperlinked text. This is extremely helpful for colorblind users to find any links on your website without having to cover over it.

2. Underline navigation links on top menu and footer

Another recommendation would be to underline the navigation link on the top menu and footer. In some cases, this might be too much and there are multiple ways to help a user know where they are located when they are trying to use navigation links. For example, when a user clicks on a navigational button or link, they should see a visual feedback. This can be achieved by highlighting and underlining the selected navigation button. This helps prevent any confusion for colorblind users or any other customers that have visual imparities.

3. Button color contrast

A good calibrated color button contrast helps the user read the button label with ease and receive a signal that they clicked on it. Applying a correct color contrast should be done on all buttons on your website. Buttons that do no have a background color (ghost buttons), make sure that the copy on the button meets the 1.4.3 contrast requirement. If you are unsure if your buttons have a high color contrast, you can use a contrast checker tool like Contrast Checker or WebAim.  You can check the contrast not only on your buttons but also for your overall website design.

4. Content Added in Color is Appropriately Contrasted

We mentioned the importance of informing the user that they are hovering over a button.  Another recommendation is to make sure that all content is visible. WCAG 2.1 AA standard defines a necessary 4.5:1 ratio of color contrast between foreground and background. If you are unsure, again you can rely on different tool to help you, such as a Color Contrast Analyzer. For example, a lot of websites go with a black background because the light colored letters and the logo of the company stand out.

5. All media needs subtitles / transcripts (audio and video).

Make sure you double check what kind of content you have on your website. If you use  embedded videos we recommend not setting them to auto-play. Make sure that the text is coded so that it can be converted into braille, speech, or enlarged text. Users that have sensitive hearing might be disrupted by auto-playing videos.

Besides making sure your videos are not set to auto-play, we suggest using captions. Users with hearing disabilities rely on clear and synchronized text captions.  The same principle applies to any audio content you have on your website. Make sure the subtitles and transcripts are correct and easily accessible.

6. Links Have Accurate and Unique Descriptions

We covered the importance of describing your links. Besides making sure that each link has a description, we suggest checking the accuracy and uniqueness of the link. Similar to image alternate text, link descriptions are a must of users that rely on screen-reading technology. Your links should be descriptive, unique and start with keywords that accurately describe the page. Poor link text hurts not only usability and accessibility, but also your SEO. Why should it be unique? Because a screen reader user will navigate the  links list by searching via the first letter.

7. Headings Are Correctly Structured

Besides helping users easily navigate through your content, headings helps keep your content flow in balance. This recommendation should be followed not only by restaurant websites that are looking to give the best user experience for blind and visually impaired customers, but by any website no matter the industry it targets. We suggest using 1x H1 heading for the primary title of the page, with correctly ordered heading levels below this (e.g. H2 under H1, H3 under H2 and so on). 

Correctly structured headings are also going to give you an SEO ranking boost.

8. Images Have Alternate Text

On your site, when using images or any similar content pieces, make sure there is a box where alternate text can be added. The meaning or message of an image can be conveyed via text instead of visual. Also, if the image fails to load, the alternate text will help the user understand what content information should exist there. In accessibility terms, screen reading technology will scan and read alternate text in place of any images. We suggest making sure that the message is correct and matches the image.  If you are unfamiliar with what alt text is, you can use Moz Alt-text learning center article, to get further details.

9. Consumers should be able to navigate the website using only a keyboard.

Do the following test on your current website:

1. Click in the browser address bar.
2. Without using your mouse, try to navigate the page with your keyboard.
3. Using the Tab button, navigate until you’ve reached the links in the footer. You can use Shift+Tab to navigate back one step.

You just tested your website keyboard accessibility. Were you able to follow along with where the keyboard focus was? Where you able to navigate to all the interactive elements on the page?

We recommend making sure that all interactive elements are keyboard accessible. This applies not only to your main navigation or in-line links. Make sure that form elements, buttons, drop-down menus or dialogue boxes can be access by a user who is tabbing through your interface.

10) Consider a Skip Navigation Link

Even though, according to the conventional webpage layout, navigation always comes first, you can consider using a skip navigation link. Adding this option at the beginning of the page helps keyboard-only users.  If you are not keen to adding this at the top of the page, we recommend taking into consideration other alternatives to bypass the navigation especially if you have many links. WebAim suggests some viable techniques you can use to help you assist sighted keyboard users. 

Re-establish compatibility every time new features are added

Making sure that your website is accessible is not a one-time deal. Every time you make a change to your website or add a new feature, you’ll need to re-establish that your website is still accessible. Yes, this is a pain but it’s a lot less painful than getting slapped with a lawsuit.

Making your restaurant website ADA compliant with The Digital Restaurant

If you need help making your restaurant’s website ADA compatible, The Digital Restaurant can help. Get in touch today for a free consultation.