Skip to content
This repository has been archived by the owner on Jul 11, 2024. It is now read-only.

Commit

Permalink
Merge pull request #777 from w3c/brianelton-patch-1
Browse files Browse the repository at this point in the history
Update instructions.md
  • Loading branch information
brianelton committed Apr 12, 2024
2 parents 680fa2d + ffd00e4 commit 2831247
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion content/forms/instructions.md
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ Placeholder text provides instructions or an example of the required data format

While placeholder text provides valuable guidance for many users, **placeholder text is not a replacement for labels**. Assistive technologies, such as screen readers, do not treat placeholder text as labels. Moreover, at the time of writing this tutorial, placeholder text is not broadly supported across assistive technologies and not displayed in older web browsers.

Note: The [Note on hiding elements](/tutorials/forms/labels/#note-on-hiding-elements) section of the Labeling Controls tutorial describes how to hide information visually but keep it available to assistive technology. This same approach can be used to avoid visual redundancy of displaying both labels and placeholder text. Be aware that this makes it very hard for users to review the form. To avoid this problem, JavaScript can be used to make labels appear visually (in the associated label element) above or beside the input that has focus.
Note: The [Note on hiding elements](/tutorials/forms/labels/#note-on-hiding-elements) section of the Labeling Controls page describes how to hide information visually but keep it available to assistive technology. This same approach can be used to avoid visual redundancy of displaying both labels and placeholder text. Be aware that this makes it very hard for users to review the form. To avoid this problem, JavaScript can be used to make labels appear visually (in the associated label element) above or beside the input that has focus.

{::nomarkdown}
{% include box.html type="start" title="Example" class="example" %}
Expand Down

0 comments on commit 2831247

Please sign in to comment.