An official website of the United States government
Image Share Widget
Best Practices
Overview
The image share widget is an image with a collapsible/expandable menu that allows visitors to embed the image, along with links to related information:
- a (required) “508” link to an HTML page that describes the image content
- an optional PDF link to supporting information (such as data sources).
- Building in the WCMSSee key tips and guidelines for working with the image share widget in the WCMS.
- TP4 UX Best Practices [PPT - 14 MB]For general guidance on colors, layouts, and overall presentation, see this overview of TP4 best practices.
Any image uploaded to the WCMS can be inserted as an image share widget, but typically this content element is used for infographics and other content-heavy visuals. You can set the menu to display on the top left, center, or right of the image. The example above has the menu on the top left, represented by the ellipsis mark (three white dots on black rectangle). Click to expand the menu. (Note that the ellipsis mark and menu overlay the image. The example image has extra white space at the top so that the menu doesn’t get obscured by details in the image.)
Usage
- Use the image share widget to allow visitors to embed an image in their own content.
- If you are interesting in creating interactive data presentations, see the WCMS options for data presentation.
Accessibility
- Avoid low-contrast images. For more information, see the Color Contrast Analyzer.
- If text is embedded in the image, test on the smallest viewport to ensure that the text is legible.
- Prepare a plain HTML page (that is, a non-template page) that explains the details of the image.
Other Guidelines
- Include in the image a clear title, but make certain it scales well in the smallest viewport. If the information in the image is specific to a time frame, make certain the time frame is clear.
- Note that the WCMS supports two options for handling the image size: fully responsive and max width. The max width option is provided in the case of super-size images that you need to contain.
- Include a 508-compliant PDF with supporting information that needs to be kept with the shared image — such as data sources, analysis methods, etc.
- Ensure that there is adequate white space at the top of the image so that the share menu doesn’t get obscured by the image details.