Creating accessible Adaptive Forms

Introduction

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:

• Check the form with Accessible Name and Description Inspector (ANDI) accessibility testing tool
• Provide proper labels for form controls
• Provide text equivalents for images
• Provide sufficient color contrast
• Ensure that form controls are keyboard accessible

Prerequisite

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.

Download and install accessibility testing tool

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:

• Helps detect accessibility issues​ on a webpage
• Provides suggestions to improve accessibility​
• Detects keyboard accessibility and color contrast issues
• Clearly identifies the screen reader content in compliance with the standards

ANDI works with all major Internet browsers. See, ANDI’s documentation for detailed instructions to configure and use the tool.

Download and install the Ultramarine-Accessible theme

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:

1. Download the theme package.
2. Navigate to Experience Manager > Navigation > Forms on your AEM instance.
3. Tap Create > File Upload. Select and upload the x Ultramarine-Accessible-Theme.zip file. It uploads the theme to your AEM instance.

Make an Adaptive Form accessible

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:

1. Apply an accessible theme and perform additional fixes

Apply the Ultramarine-Accessible theme to your existing Adaptive Form. To apply the theme:

1. Open the Adaptive Form for editing.
2. Select a component and tap the parent icon. In the context menu, tap Adaptive Form Container and then tap the configure icon.
3. Select the Ultramarine-Accessible theme in the properties browser and tap Save icon.
4. Refresh the browser window. The theme is applied to the Adaptive Form.

After applying an accessible theme, perform the below listed additional fixes. The fixes are in addition to accessibility fixes covered in the accessible theme:

1. 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.

2. 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.

   

3. 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.

4. Replace the switch and image choice components in your existing Adaptive Form with choice (radio) component.

5. Replace the numeric stepper component in your existing Adaptive Form with numeric box component.

6. Replace date input field with date picker field.

7. 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.

8. Set custom accessibility text for the date picker component. For example, Enter your date of birth. Screen readers read these custom accessibility texts.

9. 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.

10. Add custom accessibility text to all the read-only cells of tables. Also, disable all the read-only cells of tables.

11. Remove scribble signature fields, if any in the Adaptive Form. Configure the Adaptive Form to use Adobe Sign for a seamless digital signing experience.

2. 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:

1. Select a component and tap .
2. 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.

3. Provide 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 . In the sidebar, under Properties, specify alternate text for an image.

4. 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.

5. Ensure that form controls are keyboard accessible

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.

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
Display the Date Picker component options when the tab focus highlights the calendar icon Perform the click event when the tab focus highlights an option	Space or Enter
Hide the Date Picker component options	Esc
Move the cursor forward through the options available in the Date Picker component. Set tab focus on calendar icon when date input field is active	Tab
Move the cursor backward through the options available in the Date Picker component	Shift+Tab
Display the Date Picker component options when the tab focus highlights the date input field Move the cursor downward in the calendar available in the Date Picker component	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 available in the calendar	Shift + Left Arrow
Perform the action for left navigation arrow icon available in the calendar	Shift + Right Arrow

Use the accessibility tool to find remaining accessibility issues

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:

1. Open the Adaptive Form in preview mode.
2. Click the bookmarked ANDI tool icon. The ANDI tool analyzes the Adaptive Form and displays accessibility issues. For details on how to use the tool, see ANDI’s documentation.
3. Review and fix the issues reported by ANDI.

Business.Adobe.com resources