Best Practices: ADA Accessibility

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 icons.
The ADA Text will be available for Embed Code, Share links and PDF files.

Notes
Images uploaded on or after September 27, 2024 will display the Accessibility Text automatically prompted on initial upload.
Images uploaded prior to September 27, 2024 can retroactively have descriptions added by Adding Accessibility Text.

The Accessibility Text Auto Prompt
From within the design editor Upload an image.
After an image is uploaded, a pop up will appear. 

Provide a description for the image, and select Done

When uploading a new image, there is also the option to Skip for now

Accessibility Text can be added in two (2) ways for uploaded graphics, if not entered upon initial upload.
The following process can be used to retroactively add Accessibility Text to graphics uploaded prior to the launch of this feature.

Adding Accessibility Text from My Uploads
Select Graphics > My Uploads.

Hover over any image.  In the upper right corner, an icon with a ••• (ellipsis) will appear.  Select the ••• (ellipsis).  

Several options will appear.  Select ADA Text.

Add the image description and select Done.


Adding Accessibility Text from the Toolbar
Alert
If using graphics from stock image libraries, the Toolbar access will be the only way to add ADA Text.
Select any graphic on the canvas.
On the top toolbar, select the ADA icon.


Add the image description and select Done.

The images on the design will now have ADA Accessibility Text which will allow for a screen reader to pick up on the descriptions. 
The Accessibility Text will be present through Embed Codes, Share links and PDF files.

IdeaAccess the referenced menu and run it through a screen reader by clicking here.

For more visual guidance, please watch this short videos 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

    • 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. Custom Menu Icons ...
    • Edit Text on the Canvas

      Learn how to update and replace text that is already in a text box. Edit Text on the Canvas From within the design editor, select the text box on the template. Ensure the text box is selected before typing or pasting, then type in the desired text. ...
    • Text Alignment

      Learn how to align text within a text box. Text can be adjusted for left, center or right alignment within a Plain Text box. Align Text From within the design editor, select a text box on the template. On the top toolbar, select the Align button ...
    • Resize Text

      Learn how to increase or decrease the size of the text on your template. Resize Text From within the design editor, select a text box on the template. Open the font size dropdown from the top toolbar above the template. Choose the desired size by ...
    • Change Text Color

      There are several ways to change text color. Learn how to choose a different color for the text on a design. Change Text Color From within the editor, select a text box on the design. Select the color square in the top toolbar above the design. This ...