[a11y]: Form examples need to include instruction

[thefirstartist]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

v11

React version

v1.30

Automated testing tool and ruleset

n/a

Assistive technology

No response

Description

in Components > Form > Accessibility page, there's a guideline for indicating required or optional fields under Identify requirements at the start of the form:

"Especially where only optional fields are indicated, an instruction should precede a form, providing the context for whether required or optional fields are indicated. "

However, throughout the entire Carbon site, none of the UI examples that include a form shows the so-called "instruction" on top of the form.

For example, in this form example, the instruction is missing:

The guideline also provides a link to IBM Accessibility guidance for "Required fields":

If both the carbon and IBM Accessibility guidelines require instructions to be placed on top of the forms, UI examples should include the instructions to avoid confusion.

WCAG 2.1 Violation

3.3.2: Labels or Instructions

Reproduction/example

https://carbondesignsystem.com/components/form/usage#live-demo

Steps to reproduce

Another form example needs to include instruction:
https://carbondesignsystem.com/components/form/usage#live-demo

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems