Expand my Community achievements bar.

SOLVED

accessibility test for adaptive form

Avatar

Level 1

Recently I have started working on W3 accessibility requirement, Is there any recommendation on how to validate and create accessible adaptive from?

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

@Aemcoder07 There is no single way to do it. Here is my suggestion:

 

Testing: 

 

Screen reader: JAWS, NVDA, VoiceOver on Mac OS X and iPad

 

For tags and UI aspect: axe DevTools

 

While authoring an adaptive form, the author should consider the following points to create an 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

 

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.

 

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.

View solution in original post

2 Replies

Avatar

Correct answer by
Employee Advisor

@Aemcoder07 There is no single way to do it. Here is my suggestion:

 

Testing: 

 

Screen reader: JAWS, NVDA, VoiceOver on Mac OS X and iPad

 

For tags and UI aspect: axe DevTools

 

While authoring an adaptive form, the author should consider the following points to create an 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

 

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.

 

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.