Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Form templates: Updated Disabled States guidance #2775

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.

Sign up for GitHub

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

Closed
wants to merge 1 commit into from
Closed

Form templates: Updated Disabled States guidance #2775

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 9 additions & 1 deletion _includes/forms-guidance.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,14 @@ <h2 id="general-accessibility-guidance-for-forms">Accessibility guidance</h2>
<li><strong>Use simple vertical layouts.</strong> Keep your form blocks in a vertical pattern. This approach is
ideal, from an accessibility standpoint, because of limited vision that makes it hard to scan from right to left.
</li>
<li><strong>Keep form elements enabled and offer feedback.</strong> Don’t use disabled or unavailable states.
These states often don’t interact well with assistive technology, and they can confuse users. Instead, keep
elements enabled and use contextual helper text, tooltips,
<a href="https://www.w3.org/WAI/WCAG22/Understanding/error-suggestion.html">helpful error messages</a>,
and inline validation. These approaches can show what caused a problem and guide people to a solution.
For more detail, you can read
<a href="https://github.com/uswds/uswds/wiki/Disabled-States-Research-Findings-2023">USWDS’s 2023 literature review on disabled states</a>.
</li>
</ul>
<h2 id="identifying-required-fields">Identifying required fields</h2>
<ul class="usa-content-list">
Expand Down Expand Up @@ -56,4 +64,4 @@ <h2 id="known-issues-with-screen-readers">Known issues with screen readers</h2>
</ul>
<div class="site-note"><strong>Note:</strong> These components have been designed to support a wide range of screen
readers, but they may not work with all versions.</div>
</section>
</section>