docs: add a11y guidelines for required fields (#861)

* docs(PageHeader): add a11y guidelines for required fieldsd

* docs(TextArea): add guidelines for required fields

Author: francinelucca

content/components/form-control.mdx

@@ -24,6 +24,10 @@ To learn more about anatomy, input methods, forms structure, validation, and mor
 
 ## Accessibility
 
+### Required Fields
+
+When using symbols -e.g., an asterisk (*)- to indicate particular fields are required within a form, consider adding a "Required fields are marked with an asterisk (\*)" message at the top of the form for extra clarity.
+
 ### Known accessibility issues (GitHub staff only)
 
  <AccessibilityLink label="FormControl"/>

content/components/textarea.mdx

@@ -39,8 +39,6 @@ Use a textarea to allow users to input a long string of free-form text.
 
 For more information about the "valid" and "invalid" states, see the [validation section](../ui-patterns/forms/overview#validation) of the form design pattern guidelines.
 
-### Best practices
-
 ## Anatomy
 
 <img
@@ -52,6 +50,7 @@ For more information about the "valid" and "invalid" states, see the [validation
 **Label (required):** The input's title. It should be as concise as possible and convey the purpose of the input. The label may be visually hidden in rare cases, but a label must be defined for assistive technologies such as a screen reader.
 
 **Required indicator:** Indicates that a value is required. Must be shown for any required field, even if all fields in the form are required.
+When using symbols -e.g., an asterisk (*)- to indicate particular fields are required within a form, consider adding a "Required fields are marked with an asterisk (\*)" message at the top of the form for extra clarity.
 
 **Input (required):** Accepts user free-form text input