Creating accessible adaptive forms
CAUTIONIntroduction
An accessible form is a form that everyone can use, including users with special needs. Adobe Experience Manager (AEM) includes a number of features and capabilities that enhance the usability of adaptive forms for users with different abilities. The solution also assists form authors in creating accessible adaptive forms.
Building accessibility into adaptive forms not only allows the widest possible audience for content, but also it is a requirement when supplying documents in geographies where compliance with accessibility standards is mandated. AEM Forms help form developers comply with the accessibility standards.
While authoring an adaptive form, author should consider the following points to create accessible adaptive form:
- Provide proper labels for form controls
- Provide text equivalents for images
- Provide sufficient color contrast
- Ensure that form controls are keyboard accessible
Provide proper labels for form controls
The label or title of a component identifies what the form component represents. For example, the text “First name” tells users that they have to enter their first name in a text field. To be accessible by screen readers, the label is programmatically associated with a form component. Alternatively, the form control is configured with additional accessibility information.
The label that is perceived by screen readers need not necessarily be the same as the visual caption. In some cases, you may want to be more specific about the control’s purpose. For each field object in a form, the accessibility options can be used to specify what the screen reader announces to identify the specific form field.
To use the Accessibility option, follow these steps:
- Select a component and tap
- Click Accessibility in the sidebar to choose the desired accessibility option.
Accessibility options in form components
Custom Text Form authors provide the content in the accessibility option Custom text field. The assistive technology, such as screen readers, uses this custom text. Using the Title setting is the best option in a majority of the scenarios. Consider creating Custom Screen Reader Text only when using the Title or a short description is not possible.
Short description For a majority of the components, the short description appears at runtime when the user hovers the pointer over the component. You can set this option in the short description field, under help content option.
Title Use this option to let AEM Forms use the visual label associated with the form field as the screen reader text.
Name You can specify a value in the Name field of the Binding tab. The name cannot contain any spaces.
None Selecting None causes the form object to not have a name in the published form. None is not a recommended setting for form controls.
NOTENOTEProvide text equivalents for images
Images can help improve comprehension for some users. However, for users using screen readers, images decrease the accessibility of your form. If you choose to use images, provide text descriptions for all images.
Ensure that the text describes the object and its purpose in the form. A screen reader reads this alternative text when it encounters an image. An image must always have an alternative text specified.
Select an image component and tap
Provide sufficient color contrast
Accessibility design involves considering additional guidelines for color usage. Form authors can use colors to improve the appearance of forms, by highlighting various form components. However, an improper use of color may make a form difficult or impossible to read by people with different abilities.
Users with vision impairment rely on a high contrast between text and the background to read digital content. Without sufficient contrast, a form can become difficult, if not impossible, to read for some users.
It is recommended that you use the default font and background colors–content in black color on a white background. If you change the default colors, choose either a dark foreground color on a light background color, or vice versa.
See Creating custom themes for adaptive forms, for more information about changing the color contrast and theme for the adaptive forms.