Best Practices: ADA Accessibility

Custom Menu Icons

Learn how to add custom icons to menu items to denote food allergens, dietary callouts, or spice level indicators.

This article will also provide instruction on how to add descriptive text to custom menu icons for ADA accessibility. 



Alert
Custom Menu Icons are only available on our Pro planClick here to go Pro.
WarningCustom menu icons are not color customizable, and will only display in the color(s) in which they were uploaded.  

To add standard menu icons from the MustHaveMenus Icon Library, please see this article.  


Upload a Custom Menu Icon

From within the design editor, select a Menu Group text box, and then select +Icon.

Select the + beneath Uploaded Icons.

Locate and select the image for use.  When the graphic has been uploaded, a crop & scale option will show.  Resize the blue guides, zoom in, or zoom out as needed. Select Crop when finished.  

After cropping the custom Menu Icon, the Accessibility Text pop up will appear. 

Provide a description for the icon, and select Done.

To add the uploaded icon to a menu item,  click to select.

The icon will be applied to the selected menu item, and with the Accessibility Text added, the description will be identified by screen readers. 

The custom menu icon will show on the item, and be available for future use within the Icon Library, beneath Uploaded Icons
IdeaAccess the referenced menu and run it through a screen reader by clicking here.

For more visual guidance, please watch this short video demonstrating the process:





Read more about web content accessibility from the World Wide Web Consortium Web Accessibility Initiative.
Guideline 1.1 – Text Alternatives
Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.



Have a friendly expert give you a personal tour. Book a demo.

If you have any questions or concerns, please feel free to reach out to our Customer Success team by clicking here.

To visit our full Help Center, please click here

    • Related Articles

    • ADA Accessibility Text

      Learn how to add description text to graphics for ADA accessibility. In an effort to make menus shared on the web more accessible to people with disabilities, MustHaveMenus has added features to provide alternate text to graphics, images, and menu ...
    • Add Icons to your Design

      Learn how to add icons to menu items to denote food allergens, dietary callouts, or spice level indicators. All standard Menu Icons within the default MustHaveMenus Icon Library have generic ADA Accessibility Text descriptions for screen readers*. ...
    • Add or Delete Text

      Learn how to add and delete text boxes. Add a Plain Text Box From within the design editor, select Text from the left panel. Plain Text options are Add Header Text, Add Subheader Text and Add Body Text. Select any option to have a Plain Text box ...
    • Create Menu Text

      Menu Groups are a special type of text field for menu content that makes it easy to organize and customize menu items. Each Menu Group can include a section Name with Notes, and contain multiple menu Items, with each field of text having its own ...
    • Customizing the Appearance of Menu Text

      Learn how to customize the appearance of Menu Text, or Menu Groups. Menu Groups are a special type of text field for menu content that makes it easy to organize and customize menu items. Each Menu Group can include a section Name with Notes, and ...