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

Error Prevention editorial changes and addition to editor’s note #548

Merged
merged 5 commits into from Sep 3, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 4 additions & 1 deletion guidelines/index.html
Expand Up @@ -738,7 +738,10 @@ <h4>Input instructions provided</h4>

<div class="ednote">
<p>An additional outcome, Moderated form completion: Guides data entry, provides validation, and moderates form completion so users can avoid data entry errors, is under development. Details will be posted when available.</p>
</div>

<p>Critical errors and scoring for the Input instructions provided outcome are also under development. We are working to determine how to put the requirement into normative text. Details will be posted when available.</p>

</div>

<div class="ednote">
<p>The Error Prevention guideline is a combination of WCAG 2.2 success criteria and additional requirements to address a broader range of functional needs.</p>
Expand Down
4 changes: 2 additions & 2 deletions methods/instructions-available-at-input/description.html
Expand Up @@ -15,8 +15,8 @@ <h2>Outcome</h2>
<section id="details">
<h2>Detailed description</h2>
<ul>
<li><strong>Persistent instructions:</strong> Display instructions for as long as people need them, including while they are entering data. Instructions provided using the placeholder attribute are not persistent and therefore do not meet this requirement.</li>
<li><strong>Adjacent instructions:</strong> Display instructions near inputs so that people can follow the instructions as they are entering data</li>
<li><strong>Persistent instructions:</strong> Display instructions for as long as people need them, including while they are entering data. Necessary instructions provided using the placeholder attribute are not persistent and therefore do not meet this requirement.</li>
<li><strong>Proximate instructions:</strong> Display instructions near inputs so that people can follow the instructions as they are entering data</li>
<li><strong>Programmatically defined and associated instructions:</strong> Provide instructions programmatically so that they are available to assistive technology</li>
</ul>
</section>
Expand Down
8 changes: 4 additions & 4 deletions methods/instructions-available-at-input/examples.html
Expand Up @@ -11,14 +11,14 @@ <h1>Examples</h1>
<section class="example">
<p>The following examples illustrate some basic ways to provide data entry instructions at the source of input.</p>

<h3>Example 1: Providing instructions within labels</h3>
<p>For simple use cases, providing instructions within labels will be sufficient. This approach is reliable across different web browsers and assistive technologies.</p>
<h3>Example 1: Providing instructions within label element</h3>
<p>For simple use cases, providing instructions within label elements will be sufficient. This approach is reliable across different web browsers and assistive technologies.</p>
<p>In the example below, the required format for the "Date of Birth" is indicated by "MM/DD/YYYY" within the same label:</p>
<pre><code>&lt;label for="dob"&gt;Date of Birth (MM/DD/YYYY)&lt;/label&gt;</code></pre>
<pre><code>&lt;input type="text" id="dob"&gt;</code></pre>

<h3>Example 2: Providing instructions outside of labels</h3>
<p>Another approach to associate additional instructions with a form field is to use aria-describedby. Information referenced by this attribute is made available to the users after the label and other information is announced.</p>
<h3>Example 2: Providing instructions outside of label element</h3>
<p>Another approach is to provide instructions in another element and programatically associate them with a form field, for example, using the aria-describedby attribute. Information referenced by this attribute is made available to the users after the label and other information is announced.</p>
<pre><code>&lt;label for="date"&gt;Date&lt;/label&gt;&lt;span id="date-tip"&gt;MM/DD/YYYY&lt;/span&gt;</code></pre>
<pre><code>&lt;input type="text" id="date" aria-describedby="date-tip"&gt;</code></pre>
</section>
Expand Down
7 changes: 3 additions & 4 deletions methods/instructions-available-at-input/intro.html
Expand Up @@ -25,17 +25,16 @@ <h2>Technology</h2>
<section id="summary">
<h2>Summary</h2>
<ul>
<li>Data entry instructions that are persistent remain visible as users enter data.</li>
<li>Instructions that display at the source of input are visible as users enter data.</li>
<li>Data entry instructions that are persistent are available to users when they are entering data.</li>
<li>Instructions that display near inputs are visible to users as they enter data.</li>
<li>Instructions that are programmatically defined and associated with inputs can be conveyed by assistive technology as users enter data.</li>
<li>Instructions that are relevant to associated inputs enable users to understand how to enter data correctly.</li>
</ul>
</section>
<section id="user-need">
<h2>How it solves user need</h2>
<ul>
<li>People need data entry instructions that are available as they enter data in inputs.</li>
<li>People need instructions that display at the source of input so they can read and follow the instructions while entering data at input.</li>
<li>People need instructions that display near inputs so they can read and follow the instructions while entering data at input.</li>
<li>People who use screen magnification need data entry instructions that display next to inputs so they can see the instructions while focused on the input.</li>
<li>People who use assistive technology need data entry instructions that are programmatically defined and associated so thay can use their technology to access the instructions while focused on the input.</li>
</ul>
Expand Down
4 changes: 2 additions & 2 deletions methods/instructions-available-at-input/tests.html
Expand Up @@ -29,12 +29,12 @@ <h4>Expected Results</h4>
</section>
</section>
<section>
<h3>Test that instructions are adjacent to inputs</h3>
<h3>Test that instructions are near inputs</h3>
<section>
<h4>Test Procedure</h4>
<ol>
<li>Check that instructions for data entry requirements are available on the page or view.</li>
<li>Check that the instructions are adjacent to the input.</li>
<li>Check that the instructions are near the input.</li>
</ol>
</section>
<section>
Expand Down