CaterZen has reviewed and updated the Online Ordering Interface your catering clients use to place their own catering orders to meet the Web Content Accessibility Guidelines (WCAG) 2.0. This covers a wide range of recommendations for making Web content more accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. 


NOTE: As guidelines constantly change, we do not certify or warranty these changes. Ultimately, it is your responsibility to test your interface for WCAG 2.0. If you discover any fixes, please let us know.    


To make sure that your account is complaint here is what you will need to do to:   


1 - If you have any menu pictures uploaded next to your menu items you will need to have the image description "Alt Text" listed in the upload. "Alt Text" is what a web reader relays to the person with a disability as what the image is. 


When determining appropriate alternative text for images, context is everything. The alternative text for one image may be vastly different based upon the context and surroundings of the image itself. Take, for instance, two images.


A. IMAGE ONE: If you sell a ham sandwich and upload a picture of just a ham sandwich to appear online next to the menu item, the "Alt Text" needs to describe the image. So you may use the alt text: Ham Sandwich, or Ham Sandwich on rye bread.


B. IMAGE TWO: If you sell a sandwich tray and upload a picture of a sandwich tray to appear online next to the menu item, the "Alt Text" may be "sandwich tray", "assorted sandwich tray", "tray of assorted sandwiches" and/or "assorted sandwiches on black disposable sandwich tray". 


The key is to make sure the description fits the context of the image.

 


Instructions on how to do this are below.  


2 - You will also need to do the same for the banner image, if you upload one yourself.  Instructions on how to do this are below.  


3 - If you create/change any text on the online ordering interface (your Call To Action Buttons, Text on banner image (like catering hotline phone number) and/or any images you create for use on the online ordering interface that has text incorporated, will need to pass a Contrast test:  WCAG AA requires a 4.5:1 color contrast ratio between foreground and background. This can be checked with a tool like https://webaim.org/resources/contrastchecker/


Our designers can create the image if you need to change or update any images.  For other designers creating graphics make sure they do step 3 listed above.  


Steps on how to add a description to a Menu Item image:


1 - Click on the Admin tab - click on Menu Manager bubble and link




2 - Click on the Item tab 




3 - Then locate the menu item that you want to upload an image to.  Click on the Item Images tab





4  - A pop up box will appear and you will see a section for ALT Text.   Here is where you will add the image description.




5 - Click on Upload Image when done to Save.  Note if you have already uploaded your image you will have to re-upload the image file.  To re-upload the image file you will select Choose File.




You have now added the requirements for uploading a text to image to become ADA Complaint


Steps on how to add a description to an image:


1 - Click on the Admin tab - then click on the Online Order Settings bubble - then click the The Graphic bellow highlight the different parts of the header you can control link




2 - You will then see a section for Image Alternate Text.   Here you can add a description.  




3 - Once you are done adding the text you can click on Save Background Settings.




You have now learned how to add the ALT text to make your banner ADA Complaint.