An accessible form is a form that everyone can use, including users with special needs. Adaptive Forms include a number of features and capabilities that enhance the usability for users with different abilities. 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:
You require an accessibility tool such as Accessible Name and Description Inspector (ANDI) and an Adaptive Form theme developed to fix accessibility related issues to create an accessible Adaptive Form.
Accessible Name and Description Inspector (ANDI) tool helps you identify and fix accessibility compliance related issues in web content. It is the recommended tool under Trusted Tester v5 guidelines of Department of Homeland Security. It is developed by the Social Security Administration department of United States to check Section 508 compliance of web content. The tool:
ANDI works with all major Internet browsers. See, ANDI’s documentation for detailed instructions to configure and use the tool.
The Ultramarine-Accessible theme is a reference theme. It helps demonstrate how to fix color contrast and other accessibility related issues in an Adaptive Form. Adobe recommends to create a custom theme for the production environment based on the styles approved by your organization. Perform the following steps to upload the theme to your AEM instance:
You should focus on four key aspects: keyboard navigation, color contrast, meaningful alternate text for images, and appropriate labels for forms controls to make an Adaptive Form accessible. Perform the following steps to make your existing Adaptive Forms accessible:
Apply the Ultramarine-Accessible theme to your existing Adaptive Form. To apply the theme:
After applying an accessible theme, perform the below listed additional fixes. The fixes are in addition to accessibility fixes covered in the accessible theme:
Add a meaningful alternate text for the logo image in the Adaptive Form.
Provide a meaningful alternate text for images in header and footer components of the Adaptive Form template. When you fix the template and use it to create an Adaptive Form, the Adaptive Forms inherit all the accessibility related fixes applied to header and footer of the template. For an existing Adaptive Form, make changes at Adaptive Form level. Changes made to an Adaptive Form template does not automatically flow to an existing Adaptive Form.
Add a heading component containing form name to the Adaptive Form. If your form design specifies a company name, add a separate heading component for the company name also.
Most accessibility tools inform users about the hierarchy of the content to help them understand structure of the web page. Set different heading levels for organization name and form name text on the Adaptive Form to provide a hierarchical structure to these text. In addition, use a Text component before each panel and section with an appropriate heading level to create a hierarchy.
Change footer background color to use appropriate contrast in accordance with the accessibility standards to improve visibility and readability of the text. You can use ANDI to find color contrast issues in your form. Also, do not use very small font. Small fonts are difficult to read.
Replace the switch and image choice components in your existing Adaptive Form with choice (radio) component.
Replace the numeric stepper component in your existing Adaptive Form with numeric box component.
Replace date input field with date picker field.
Set display, validation, and edit patterns for the date picker component. Also, set a custom validation error message. For example, You have specified an invalid date. The correct format of the date is YYYY-MM-DD.
Set custom accessibility text for the date picker component. For example, Enter your date of birth. Screen readers read these custom accessibility texts.
Use short description instead of long description for Adaptive Form components. A long description adds help button. Ensure the Adaptive Form does not have any help button.
Add custom accessibility text to all the read-only cells of tables. Also, disable all the read-only cells of tables.
Remove scribble signature fields, if any in the Adaptive Form. Configure the Adaptive Form to use Adobe Sign for a seamless digital signing experience.
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:
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.
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 . In the sidebar, under Properties, specify alternate text for an image.
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.
An accessible form can be filled completely using only the keyboard or an equivalent input device. Users with reduced mobility or impaired vision may have no choice but to use the keyboard and many users who can use a mouse, prefer keyboard input. By allowing for the various input methods, you not only create accessible forms, you also create forms that are better suited to the preferences of all users.
The following keyboard shortcuts are available in AEM Forms.
Action | Keyboard shortcut |
---|---|
Move the cursor forward through a form | Tab |
Move the cursor backward through a form | Shift+Tab |
Move to the next panel | Alt+Right Arrow |
Move to the previous panel | Alt+Left Arrow |
Reset the filled data in a form | Alt+R |
Submit a form | Alt+S |
In addition, there are various keyboard shortcut keys available for the Date Picker component in Adaptive Forms. To enable the shortcut keys, tap the Date Picker component and tap to open the properties. In the Patterns section, select a display pattern using the Type and Pattern dropdown lists. Save the properties to enable the use of shortcut keys for the Date Picker component.
The following keyboard shortcut keys are available for the Date Picker component in Adaptive Forms:
Action | Keyboard shortcut |
---|---|
|
Space or Enter |
Hide the Date Picker component options | Esc |
|
Tab |
Move the cursor backward through the options available in the Date Picker component | Shift+Tab |
|
Down Arrow |
Move the cursor upward in the calendar available in the Date Picker component | Up Arrow |
Move the cursor backward in the calendar available in the Date Picker component | Left Arrow |
Move the cursor forward in the calendar available in the Date Picker component | Right Arrow |
Perform the action for the caption available between right and left navigation arrows in the calendar | Shift + Up Arrow |
Perform the action for right navigation arrow icon |
Shift + Left Arrow |
Perform the action for left navigation arrow icon |
Shift + Right Arrow |
Accessible Name and Description Inspector (ANDI) helps you identify and fix accessibility compliance related issues in an Adaptive Form. To use the ANDI tool to find the accessibility issues in an Adaptive Form: