Best practices for designing more accessible forms
To make your application more accessible, take note of these recommendations.
- Make sure to always provide alternate text descriptions for static images and
image-based buttons. These alternate text descriptions provide text-based
descriptions for images/image-based buttons that users cannot view, whether because
of a bad connection, an error in the image source, or the user is visually impaired
and using a screen reader.
The <image alt=" "> tag in HTML is usually used to provide this alternate text. But, in Mongoose-based applications, we do not have the ability to automatically generate or use these HTML tags. Instead, we provide these other mechanisms to add alternate text descriptions for static image objects, image-based buttons, and, potentially, for other components:
- Add the descriptive text as the component's Caption property value.
If you do not want this caption to be visible, set the Data Source > Formatting > Image and Text property to ImageOnly.
- Add the descriptive text to the Help > ToolTip field.
Disabled image-based buttons automatically have the word "Disabled" inserted into the alternate text value. This text is removed when the button is enabled.
- Add the descriptive text as the component's Caption property value.
- As much as possible, ensure that all form components have clear, descriptive labels. In Design Mode under the component properties for a selected component, you can add a non-visible label using the caption property that will be read aloud by the screen reader (see the previous item). You can specify a caption in several ways, including linking the component with another component (usually a Static component), that serves as the component’s label.
- You can use Static components to provide document structure as headings by employing
the Is Web Heading property from the
Specific Attributes section of the
Component property sheet.
Setting this boolean value to True does not change anything visually. What it does is add an ARIA role="heading" attribute to the HTML for the static component.
- Hyperlink text should make sense on its own. Avoid using “click here” or similar text.
- Do not convey content with colors, graphics or animations alone. Make sure you provide an alternative that can be interpreted by a screen reader.
- Provide instructions on how to use the form where needed, if possible. The form may not be as self-explanatory to a user who cannot see it. If not possible, make sure the online help is easy to access.
- Include context menus where possible. provides to screen readers the same context menu as a mouse right-click, so visually impaired users can still make use of these menus.