Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add note on visually hidden labels #863

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion content/components/textarea.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,9 @@ For more information about the "valid" and "invalid" states, see the [validation
src="https://user-images.githubusercontent.com/6905903/274239156-064abae9-6d16-4c1a-b673-ec8f96429ed9.png"
/>

**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.
**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. If the label is visually hidden, ensure there is an element nearby that serves as a visual label for the input. This guarantees that all users, including those not using assistive technologies, have access to a label.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is an example of a rare case? I worry that without defining that everyone will think their use case is the exception to the rule.

If a visual label is provided but not directly linked to the input, the visually hidden label should include the text of the visual label as part of its accessible name.


**Required indicator:** Indicates that a value is required. Must be shown for any required field, even if all fields in the form are required.

Expand Down
Loading