Creating accessible adaptive forms creating-accessible-adaptive-forms

Adobe recommends using the modern and extensible data capture Core Componentsfor creating new Adaptive Formsor adding Adaptive Forms to AEM Sites pages. These components represent a significant advancement in Adaptive Forms creation, ensuring impressive user experiences. This article describes an older approach to authoring Adaptive Forms using foundation components.

Introduction introduction

An accessible form is a form that everyone can use, including users with special needs. Adaptive Forms include several 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 it is also 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:

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:

ANDI works with all major Internet browsers. See ANDI’s documentation for detailed instructions on how 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 that you 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:

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:

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

2. Provide proper labels for form controls 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 does not need to 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:

Accessibility options in form components 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 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 select . In the sidebar, under Properties, specify alternate text for an image.

4. Provide sufficient color contrast 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 conversely.

See Creating custom themes for adaptive forms, for more information about changing the color contrast and theme for the adaptive forms.

5. Ensure that form controls are keyboard accessible 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, select the Date Picker component and select 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:

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: