Form Detail
The Form Detail components allow you to add numbered buttons to an image, allowing you to highlight sections and describe them in detail. This can be useful for documenting a paper form or user interface.
There is no technical limit to the number of bullets, but from a learning perspective four to eight should be the rough number a learner can absorb in a single interaction (according to research).
On mobile devices with screens under 720px, the dialog are listed beneath the image and the buttons are deactivated but remain visible to allow a sighted user to associate the sections.
If the content of the form — that is, the image — is required for the learner to understand the content, this component may not meet minimum accessibility guidelines. If you have a form that the learner must read, alternative content must be provided. Contact CPM Accessibility staff for options for resolving the issue.
The Form Detail inherits all the settings common to the Presentation Components.
How to align the image in the course content. This allows you to provide a margin where the feedback dialogs can “break out” of the form.
The alternative text for the image. This should be a bit more comprehensive than normal alt-text as it needs to describe the form in some detail.
The image containing the form or user interface.
This is a list of the items (both the buttons and dialogs) in the component. When you click the Add button, a dialog will slide out from the right side of the screen allowing you to populate the item’s details. The fields in this dialog are:
The title of the element you’re highlighting. This text is used as the title of the dialog as well as the accessible description on the button itself.
The number to appear on the button.
This number must be unique in the form — that is, do not repeat numbers.
The top (y) position of the button’s top edge in percent. Do not include the percent (%) sign.
The left (x) position of the button’s left edge in percent. Do not include the percent (%) sign.
The content of the dialog that is displayed when the button is clicked.
The top (y) position of the dialog’s top edge in percent. Do not include the percent (%) sign.
The left (x) position of the dialog’s left edge in percent. Do not include the percent (%) sign.
The width of the dialog’s in percent. Do not include the percent (%) sign.
The dialog’s height is calculated based on the content of the dialog.
The graphic used for the form has no specific size requirements. However, we recommend that the image be slightly smaller than the width of the content area (usually around 860px, depending on the theme). This allows you some breathing room to allow your dialogs to “hang” off of the right or left side of the graphic.