Outlined in this document are some of the most common ways a restaurant operator could edit/modify their BentoBox website that would result in becoming non-compliant according to WCAG 2.0 Level AA guidelines (the most commonly accepted guidelines for ADA accessible websites).
It is important to note that this list is not exhaustive. It only covers some of the most common mistakes. If you have any questions, please don’t hesitate to contact firstname.lastname@example.org
Adding images without proper text descriptions
As a best practice, any image uploaded to your site should have a short text description, commonly called “Alt-Text.” This text allows vision impaired users to know what is on your site.
If you do not add Alt-Text, websites default to the image name which is often something incomprehensible like “IMG-208A5B”. Since file names serve as alt text for certain images, ensure that you name all your images as you want them to appear before uploading them.
Alt-Text should be short and concise. Examples of good Alt-Text:
- Burgers & fries
- Backyard patio
- Executive Chef John Smith
Adding videos without captions
All videos with audio must have captions. Youtube has an automatic captioning solution that should work for most video content a restaurant would be posting.
Adding key information in images without supporting text
Many restaurants will promote a special event on their website by simply posting the flyer/brochure as an image without supporting text. This is most commonly done on BentoBox’s Pop-Up Alert feature.
The issue is that screen readers used by vision impaired visitors will only be able to read the file name (e.g. happy-hour-flyer.jpg) and will not have access to read any of the content.
Flyers/brochures can absolutely be posted, but should always be supported by text listing the relevant information contained in the flyer.
Leaving the play / pause button for the image carousel or video player DISABLED
ADA requires websites to provide users with play/pause control over auto-scrolling in the carousel and videos. Pausing auto-scrolling is essential for people who find movement distracting or who need more time to read.
The button is disabled by default, but if you have auto-scrolling galleries or animation on your site, it is recommended to ENABLE this function. You can do this by going to Settings > General and checking the checkbox under "Accessibility Controls".
Linking out to non-compliant 3rd party sites that provide essential restaurant services
All 3rd party sites linked from your site, especially those that are transactional in nature like reservations, gift cards, online ordering, etc. should also be ADA compliant.
Adding hyperlinks that do not make sense.
For example, adding a link that says "click here" is not enough information. A better way would be to add a link over the text "click here to view our menus"
Uploading to Instagram without captions
If you are using the Instagram integration on your website, you'll need to ensure that all Instagram images and videos have captions. BentoBox pulls the caption into the restaurant website to be used as accessible text for vision impaired users.
Adding PDFs that don’t have searchable text (or not providing text alternatives to non-accessible PDFs)
BentoBox strongly recommends using text whenever possible (instead of PDFs). Besides being ADA compliant, text is also better for mobile visitors and for search engine optimization. If you need to use PDFs on your website, they still need to be readable by screen readers.
You should ensure that all PDF files have searchable text. For an overview, please see: Making a PDF text-searchable (Note: Your version of Adobe Acrobat may be slightly different than the screenshots/examples shown on this site).
Not having an Accessibility Statement on your website
(Not required, but strongly encouraged)
Accessibility Statements are short statements (usually a paragraph or two) that is linked from the homepage of your website (usually in the footer under “Accessibility”).
This statement encompases your restaurant’s commitment to providing an accessible website as well as contact information for anyone that has questions or is having trouble accessing certain content due to accessibility.
You can find many examples of Accessibility Statements online through a simple Google search. We strongly encourage you to speak with your legal counsel to draft an effective statement to include on your website.