How to keep your BentoBox website content accessible

Outlined in this section are action items for you to implement that will improve your website’s accessibility. Although this list does not guarantee complete protection from lawsuits, these are the most common accessibility related issues on restaurant websites.

A. Add alternative text when you upload images

Alternative text, or alt-text, is wording that can be added to images that describes them for visually impaired users employing screen readers to access 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. Good examples of these include, “Burgers & fries” or “backyard patio”.

After April 9th 2019 all images uploaded to BentoBox will automatically have alternative text added but we recommend double checking the text in case you want to add more detail.  All images uploaded to BentoBox before April 9th 2019 will require you to manually add alt-text.

There are two different ways to add alt-text to an image depending on how the image is added to your website.

If you add images in an image field:

1. Add or update images in the image field  
2. Hover over the image and a bracket icon that looks like <> will  appear. Click on this icon and the alt-text field will appear below.
3. Enter alt-text in the field below the image. The alt-text needs to be descriptive of what the image depicts, for example, “pasta with basil”.
4. Once you enter the text scroll up and click save on the upper right hand corner.

If you add an image to text editor:

1. Within any text editor, you're able to add images directly into those boxes.
2. In order to add alternative text, upload your image directly into the text editor.
3. Select the image that you wish to add alternative text to and select the i from the toolbar.
4. Enter descriptive text for example, “red wine in wine glasses” and then press update.
5. Scroll up to the right hand corner and click save.

B. Third party websites and widgets

The vast majority of website-related ADA lawsuits target services and functionality that are transactional in nature like online ordering, gift cards, and eCommerce. These services often appear on third party websites linked from the main website or as embedded widgets within the main website.

Despite the content appearing on third party services, lawsuits have still held the restaurant itself liable. We recommend contacting your third party vendors to understand what they are doing in terms of accessibility.

C. Add closed captioning for videos that you upload

According to the WCAG 2.1 guidelines, all video with audio must include captions. We recommend uploading all videos on Youtube since they have a free automatic captioning solution.  You also have the option to use Vimeo on our platform however, Vimeo does not offer a captioning solution. You can click here for third parties that provide captioning services on Vimeo’s platform for a fee.

D. Enable the play / pause button for the image carousel or video player

WCAG 2.1 guidelines require 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.

Beginning April 11th 2019, all BentoBox websites built after this date will have the play/pause control automatically enabled. However, if your website was built prior to April 11th 2019 and you have auto-scrolling galleries or animation, then you must enable this function. You can do this by scrolling to SETTINGS > General and checking the checkbox under "Accessibility Controls".

E. Add an accessibility statement to your site

We strongly encourage you to create an Accessibility Statement to be placed on your website. Although an Accessibility Statement does not guarantee complete protection against accessibility-related lawsuits, it can help signal to visitors that you take the issue of digital accessibility seriously.

You should work with your own legal counsel to craft this statement, but a simple Google search for “Accessibility Statement” returns many example formats. You can also see some live examples here and here.

F. Overlay Alerts are the best way to create pop up alerts on special events or promotions

Many restaurants will promote a special event on their website by simply posting the flyer/brochure as an image without supporting text. However, screen readers used by vision impaired visitors will only be able to read the file name (e.g. happy-hour-flyer.jpg) if you add an image with the text embedded within it.

The correct and accessible way to add a special event or promotion alert is to use the Overlay Alert feature. Go to Pages> Homepage> Alerts> Toggle ‘On’ in the box that reads Overlay Enabled to turn on this feature> Overlay Alert description features should now display on the screen. In the Overlay Alert feature add the title, text and any relevant links of the event or promotion. To add a picture to your Overlay Aert, upload the image in the image uploader below the text editor. When uploading an image automatic alternative text (alt-text) will be added however, we recommend double checking the text to ensure you are satisfied with it. Save the change in the upper right hand corner.

G. All hyperlinks must be concise and describe the destination clearly

Adding a link that says "click here" is not enough information. A better way would be to add a link that reads, “view our menus” which is both descriptive and concise.

H. When uploading to Instagram you must use captions

If your BentoBox website displays your Instagram feed in any way,  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.

I.  Try not to use PDFs

BentoBox strongly recommends using text whenever possible instead of PDFs. Using text not only adheres to WCAG 2.1 guidelines but 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. Click here for an overview on how to make a PDF accessible.  

Please contact your BentoBox customer success representative if you need assistance implementing these changes to your website or email support@getbento.com

Want more information on ADA and website accessibility? Get more tips here: