Skip to content

Commit

Permalink
docs: add a11y guidelines for required fields (#861)
Browse files Browse the repository at this point in the history
* docs(PageHeader): add a11y guidelines for required fieldsd

* docs(TextArea): add guidelines for required fields
  • Loading branch information
francinelucca authored Sep 20, 2024
1 parent e86ed5d commit 0163f33
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 2 deletions.
4 changes: 4 additions & 0 deletions content/components/form-control.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>
Expand Down
3 changes: 1 addition & 2 deletions content/components/textarea.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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

Expand Down

0 comments on commit 0163f33

Please sign in to comment.