Skip to content

Commit

Permalink
Optimal Content Examples Fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
Jeff Gordon committed Aug 23, 2012
1 parent 2afeea3 commit 5c1c24d
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 47 deletions.
5 changes: 4 additions & 1 deletion demos/opt-cont/clr-eng.html
View file
Expand Up @@ -168,7 +168,10 @@ <h3 id="us">2. Use Of Colour</h3>
<tr>
<td>Charts and Graphs</td>
<td>Multiple series or values identified by colour.</td>
<td>Use pattern shading, provide a supplementary data table, or use text labels on the chart or graph.</td>
<td><p>Provide a supplementary data table<br>
<strong>OR</strong><br>
Use pattern shading or text labels on the chart or graph with a <a href="img-eng.html#ds">text description</a>.<br>
</p></td>
</tr>
<tr>
<td>Forms and User Controls</td>
Expand Down
66 changes: 21 additions & 45 deletions demos/opt-cont/frm-eng.html
View file
Expand Up @@ -99,7 +99,6 @@
<!-- MainContentStart -->
<h1 id="wb-cont">Forms - Optimal Content Examples</h1>


<div class="span-4 module-table-contents">
<p>Table Of Contents</p>
<ul>
Expand All @@ -117,7 +116,7 @@ <h2 class="margin-top-none" id="intro">Introduction</h2>
<p>A form contains a set of form elements, which are a type <a href="kb-cv-eng.html">user control</a> that accepts user input. Form elements are the foundation for nearly all web applications.</p>


<h2 id="req" class="wet-boew-prettify all-pre">Coding Requirements</h2>
<h2 id="req">Coding Requirements</h2>
<p>The following summarizes selected techniques from the <a href="http://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines (WCAG) 2.0</a> for satisfying the most common applicable success criteria related to this topic. Additional WCAG 2.0 success criteria, techniques, and failures not listed here may also be applicable depending on the content.</p>

<h3>1. Labels</h3>
Expand All @@ -132,7 +131,7 @@ <h4 id="lb">Associate Labels</h4>
<li><em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">4.1.2 Name, Role, Value</a></em></li>
</ul>
</div>
<p>Every form element (<code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, <code>&lt;select&gt;</code>) must be labeled using one of these techniques:</p>
<p>Every form element (<code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, <code>&lt;select&gt;</code>) must be labeled using <strong>one</strong> of these techniques:</p>
<ul>
<li><p>Set the form element's <code>id</code> attribute and associate a <code>&lt;label&gt;</code> element by setting its <code>for</code> attribute to the same value. (e.g. <code>&lt;label for=&quot;mylabel&quot;&gt;Name:&lt;/label&gt; &lt;input type=&quot;text&quot; id=&quot;myname&quot;&gt;</code>)</p></li>
<li><p>Set the form element's <code>title</code> attribute and add a supplementary visual label, instruction, or adjacent button to explain the form element's purpose.</p></li>
Expand Down Expand Up @@ -166,7 +165,7 @@ <h4 id="is">Instructions</h4>
<li><em><a href="http://www.w3.org/TR/2012/NOTE-UNDERSTANDING-WCAG20-20120103/minimize-error-cues.html">3.3.2 Labels or Instructions</a></em></li>
</ul>
</div>
<p>Some form controls require user input data that is mandatory, provided in a specific format, or selected from a set of values. These instructions must be provided to the user on the form through explanation, expected data formats, or examples.</p>
<p>Some form controls require user input data that is mandatory, provided in a specific format, or selected from a set of values. These instructions must be provided to the user through explanation, expected data formats, or examples before the form control.</p>
<p><em>Source: <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html#minimize-error-cues-techniques-head">WCAG 2.0, Success Criterion 3.3.2, Sufficient Techniques #1</a></em></p>


Expand Down Expand Up @@ -228,7 +227,7 @@ <h2 id="ex">Content Examples</h2>

<div class="span-6 border-span-6">
<h3 class="background-light">1. Form Field Examples</h3>
<ol>
<ol class="list-lower-alpha">
<li>
<label for="homeaddress">Home Address:</label> <input type="text" name="homeaddress" id="homeaddress" size="60" />
<details>
Expand Down Expand Up @@ -261,37 +260,26 @@ <h3 class="background-light">1. Form Field Examples</h3>
<li class="margin-top-large">
<fieldset>
<legend>Provinces Lived:</legend>
<input type="checkbox" name="livedprovince" id="pl_n1" value="pl_nl" /> <label for="pl_n1">Newfoundland</label><br />
<input type="checkbox" name="livedprovince" id="pl_ns" value="pl_ns" /> <label for="pl_ns">Nova Scotia</label><br />
<input type="checkbox" name="livedprovince" id="pl_pe" value="pl_pe" /> <label for="pl_pe">Prince Edward Island</label><br />
<input type="checkbox" name="livedprovince" id="pl_nb" value="pl_nb" /> <label for="pl_nb">New Brunswick</label><br />
<input type="checkbox" name="livedprovince" id="pl_qc" value="pl_qc" /> <label for="pl_qc">Quebec</label><br />
<input type="checkbox" name="livedprovince" id="pl_on" value="pl_on" /> <label for="pl_on">Ontario</label><br />
<input type="checkbox" name="livedprovince" id="pl_mb" value="pl_mb" /> <label for="pl_mb">Manitoba</label><br />
<input type="checkbox" name="livedprovince" id="pl_sk" value="pl_sk" /> <label for="pl_sk">Saskatchewan</label><br />
<input type="checkbox" name="livedprovince" id="pl_ab" value="pl_ab" /> <label for="pl_ab">Alberta</label><br />
<input type="checkbox" name="livedprovince" id="pl_bc" value="pl_bc" /> <label for="pl_bc">British Columbia</label><br />
<input type="checkbox" name="livedprovince" id="pl_nu" value="pl_nu" /> <label for="pl_nu">Nunavut</label><br />
<input type="checkbox" name="livedprovince" id="pl_nt" value="pl_nt" /> <label for="pl_nt">North West Territories</label><br />
<input type="checkbox" name="livedprovince" id="pl_yk" value="pl_yk" /> <label for="pl_yk">Yukon</label><br />
<label type="form-checkbox" for="pl_n1"><input type="checkbox" name="livedprovince" id="pl_n1" value="pl_nl" /> Newfoundland</label>
<label type="form-checkbox" for="pl_ns"><input type="checkbox" name="livedprovince" id="pl_ns" value="pl_ns" /> Nova Scotia</label>
<label type="form-checkbox" for="pl_pe"><input type="checkbox" name="livedprovince" id="pl_pe" value="pl_pe" /> Prince Edward Island</label>
<label type="form-checkbox" for="pl_nb"><input type="checkbox" name="livedprovince" id="pl_nb" value="pl_nb" /> New Brunswick</label>
<label type="form-checkbox" for="pl_qc"><input type="checkbox" name="livedprovince" id="pl_qc" value="pl_qc" /> Quebec</label>
<label type="form-checkbox" for="pl_on"><input type="checkbox" name="livedprovince" id="pl_on" value="pl_on" /> Ontario</label>
<label type="form-checkbox" for="pl_mb"><input type="checkbox" name="livedprovince" id="pl_mb" value="pl_mb" /> Manitoba</label>
<label type="form-checkbox" for="pl_sk"><input type="checkbox" name="livedprovince" id="pl_sk" value="pl_sk" /> Saskatchewan</label>
<label type="form-checkbox" for="pl_ab"><input type="checkbox" name="livedprovince" id="pl_ab" value="pl_ab" /> Alberta</label>
<label type="form-checkbox" for="pl_bc"><input type="checkbox" name="livedprovince" id="pl_bc" value="pl_bc" /> British Columbia</label>
<label type="form-checkbox" for="pl_nu"><input type="checkbox" name="livedprovince" id="pl_nu" value="pl_nu" /> Nunavut</label>
<label type="form-checkbox" for="pl_nt"><input type="checkbox" name="livedprovince" id="pl_nt" value="pl_nt" /> North West Territories</label>
<label type="form-checkbox" for="pl_yk"><input type="checkbox" name="livedprovince" id="pl_yk" value="pl_yk" /> Yukon</label>
</fieldset>
<details>
<summary>Source Code</summary>
<pre><code>&lt;fieldset&gt;<br /> &lt;legend&gt;Provinces Lived:&lt;/legend&gt;<br /> &lt;input type=&quot;checkbox&quot; name=&quot;livedprovince&quot; id=&quot;pl_n1&quot; value=&quot;pl_nl&quot; /&gt;<br /> &lt;label for=&quot;pl_n1&quot;&gt;Newfoundland&lt;/label&gt;&lt;br /&gt;<br /> &lt;input type=&quot;checkbox&quot; name=&quot;livedprovince&quot; id=&quot;pl_ns&quot; value=&quot;pl_ns&quot; /&gt;
&lt;label for=&quot;pl_ns&quot;&gt;Nova Scotia&lt;/label&gt;&lt;br /&gt;<br /> &lt;input type=&quot;checkbox&quot; name=&quot;livedprovince&quot; id=&quot;pl_pe&quot; value=&quot;pl_pe&quot; /&gt;
&lt;label for=&quot;pl_pe&quot;&gt;Prince Edward Island&lt;/label&gt;&lt;br /&gt;<br /> &lt;input type=&quot;checkbox&quot; name=&quot;livedprovince&quot; id=&quot;pl_nb&quot; value=&quot;pl_nb&quot; /&gt;
&lt;label for=&quot;pl_nb&quot;&gt;New Brunswick&lt;/label&gt;&lt;br /&gt;<br /> &lt;input type=&quot;checkbox&quot; name=&quot;livedprovince&quot; id=&quot;pl_qc&quot; value=&quot;pl_qc&quot; /&gt;
&lt;label for=&quot;pl_qc&quot;&gt;Quebec&lt;/label&gt;&lt;br /&gt;<br /> &lt;input type=&quot;checkbox&quot; name=&quot;livedprovince&quot; id=&quot;pl_on&quot; value=&quot;pl_on&quot; /&gt;
&lt;label for=&quot;pl_on&quot;&gt;Ontario&lt;/label&gt;&lt;br /&gt;<br /> &lt;input type=&quot;checkbox&quot; name=&quot;livedprovince&quot; id=&quot;pl_mb&quot; value=&quot;pl_mb&quot; /&gt;
&lt;label for=&quot;pl_mb&quot;&gt;Manitoba&lt;/label&gt;&lt;br /&gt;<br /> &lt;input type=&quot;checkbox&quot; name=&quot;livedprovince&quot; id=&quot;pl_sk&quot; value=&quot;pl_sk&quot; /&gt;
&lt;label for=&quot;pl_sk&quot;&gt;Saskatchewan&lt;/label&gt;&lt;br /&gt;<br /> &lt;input type=&quot;checkbox&quot; name=&quot;livedprovince&quot; id=&quot;pl_ab&quot; value=&quot;pl_ab&quot; /&gt;
&lt;label for=&quot;pl_ab&quot;&gt;Alberta&lt;/label&gt;&lt;br /&gt;<br /> &lt;input type=&quot;checkbox&quot; name=&quot;livedprovince&quot; id=&quot;pl_bc&quot; value=&quot;pl_bc&quot; /&gt;
&lt;label for=&quot;pl_bc&quot;&gt;British Columbia&lt;/label&gt;&lt;br /&gt;<br /> &lt;input type=&quot;checkbox&quot; name=&quot;livedprovince&quot; id=&quot;pl_nu&quot; value=&quot;pl_nu&quot; /&gt;
&lt;label for=&quot;pl_nu&quot;&gt;Nunavut&lt;/label&gt;&lt;br /&gt;<br /> &lt;input type=&quot;checkbox&quot; name=&quot;livedprovince&quot; id=&quot;pl_nt&quot; value=&quot;pl_nt&quot; /&gt;
&lt;label for=&quot;pl_nt&quot;&gt;North West Territories&lt;/label&gt;&lt;br /&gt;<br /> &lt;input type=&quot;checkbox&quot; name=&quot;livedprovince&quot; id=&quot;pl_yk&quot; value=&quot;pl_yk&quot; /&gt;
&lt;label for=&quot;pl_yk&quot;&gt;Yukon&lt;/label&gt;&lt;br /&gt;<br />&lt;/fieldset&gt;</code></pre>
<pre><code>To follow</code></pre>
</details>
</li>
<!--
<li class="margin-top-large">
<fieldset>
<legend>Home Phone Number:</legend>
Expand All @@ -303,7 +291,6 @@ <h3 class="background-light">1. Form Field Examples</h3>
</details>
</li>
<li class="margin-top-large">

<fieldset>
<legend>Postal Code:</legend>
<input type="text" size="3" maxlength="3" name="postalcode_first3" id="postalcode_first3" title="Fires three characters of postal code" />-<input type="text" size="3" maxlength="3" name="postalcode_last3" id="postalcode_last3" title="Last three digits of phone number" />
Expand All @@ -315,6 +302,7 @@ <h3 class="background-light">1. Form Field Examples</h3>
name=&quot;postalcode_last3&quot; id=&quot;postalcode_last3&quot; title=&quot;Last three digits of phone number&quot; /&gt;<br />&lt;/fieldset&gt;</code></pre>
</details>
</li>
-->
<li class="margin-top-large">
<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
Expand All @@ -341,19 +329,7 @@ <h3 class="background-light">1. Form Field Examples</h3>
<div class="span-6 border-span-6">
<h3 class="background-light">2. Required Data, Format, and Values</h3>
<div class="indent-large">
<p class="color-attention"><strong>Error 1: Full Name - This field is mandatory.</strong></p>
<p class="color-attention"><strong>Error 2: Date - Please enter a valid date (ISO).</strong></p>
<p class="color-attention"><strong>Error 3: Integer - Please enter a number between 5 and 40.</strong></p>
<p><strong>All fields indicated with an asterisk (*) are required fields.</strong></p>
<label for="prefix">Prefix:</label> <input id="prefix" name="prefix" /><br />
<label for="fullname"><strong class="color-attention">Full Name *:</strong></label> <input id="fullname" name="fullname" /><br />
<label for="date" class="color-attention"><strong>Date (YYYY-MM-DD):</strong></label> <input id="date" name="date" /><br />
<label for="address">Address:</label> <input id="address" name="address" /><br />
<label for="int" class="color-attention"><strong>Integer (between 5 and 40):</strong></label> <input id="int" name="int" />
<details>
<summary>Source Code</summary>
<pre><code>&lt;p class=&quot;color-attention&quot;&gt;&lt;strong&gt;Error 1: Full Name - This field is mandatory.&lt;/strong&gt;&lt;/p&gt;<br />&lt;p class=&quot;color-attention&quot;&gt;&lt;strong&gt;Error 2: Date - Please enter a valid date (ISO).&lt;/strong&gt;&lt;/p&gt;<br />&lt;p class=&quot;color-attention&quot;&gt;&lt;strong&gt;Error 3: Integer - Please enter a number between 5 and 40.<br />&lt;/strong&gt;&lt;/p&gt;<br />&lt;p&gt;&lt;strong&gt;All fields indicated with an asterisk (*) are required fields.&lt;/strong&gt;&lt;/p&gt;<br />&lt;label for=&quot;prefix&quot;&gt;Prefix:&lt;/label&gt; &lt;input id=&quot;prefix&quot; name=&quot;prefix&quot; /&gt;&lt;br /&gt;<br />&lt;label for=&quot;fullname&quot;&gt;&lt;strong class=&quot;color-attention&quot;&gt;Full Name *:&lt;/strong&gt;&lt;/label&gt; <br />&lt;input id=&quot;fullname&quot; name=&quot;fullname&quot; /&gt;&lt;br /&gt;<br />&lt;label for=&quot;date&quot; class=&quot;color-attention&quot;&gt;&lt;strong&gt;Date (YYYY-MM-DD):&lt;/strong&gt;&lt;/label&gt; <br />&lt;input id=&quot;date&quot; name=&quot;date&quot; /&gt;&lt;br /&gt;<br />&lt;label for=&quot;address&quot;&gt;Address:&lt;/label&gt; &lt;input id=&quot;address&quot; name=&quot;address&quot; /&gt;&lt;br /&gt;<br />&lt;label for=&quot;int&quot; class=&quot;color-attention&quot;&gt;&lt;strong&gt;Integer (between 5 and 40):&lt;/strong&gt;&lt;/label&gt; <br />&lt;input id=&quot;int&quot; name=&quot;int&quot; /&gt;</code></pre>
</details>
<p>See the <a href="../formvalid/formvalid-eng.html">form validation</a> project.</p>
</div>
</div>

Expand Down
4 changes: 4 additions & 0 deletions demos/opt-cont/hdg-eng.html
View file
Expand Up @@ -131,6 +131,10 @@ <h3 id="mk">1. Heading Markup</h3>
<div class="span-6 module-alert">
<p>When an item has the meaning of a heading, it is insufficient to mark it up with only the <code>&lt;strong&gt;</code> element. Use the &lt;h1&gt;-&lt;h6&gt; elements.</p>
</div>
<div class="span-6 module-note">
<p><strong>Note:</strong> It is strongly recommended to not skip heading levels and to start from level <code>&lt;h1&gt;</code>.</p>
</div>


<h3 id="dh">2. Descriptive Headings</h3>
<div class="span-2 border-span-2 float-right align-right"> <div class="background-light"><p><em><strong>Related to Success Criteria:</strong></em></p></div>
Expand Down
3 changes: 2 additions & 1 deletion demos/opt-cont/lin-eng.html
View file
Expand Up @@ -123,7 +123,7 @@ <h2 id="intro">Introduction</h2>
<li>Performs user control functionality determined by client side scripting (JavaScript).</li>
</ul>

<h2 id="req" class="wet-boew-prettify all-pre">Coding Requirements</h2>
<h2 id="req">Coding Requirements</h2>
<p>The following summarizes selected techniques from the <a href="http://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines (WCAG) 2.0</a> for satisfying the most common applicable success criterion related to this topic. Additional WCAG 2.0 success criterions, techniques, and failures not listed here may also be applicable depending on the content.</p>

<h3>1. Descriptive and Consistent Link Text</h3>
Expand Down Expand Up @@ -152,6 +152,7 @@ <h4 id="cs">Consistent Link Text</h4>
</div>
<p>Link text must be labeled consistently. Links which provide the same function on one or more pages should have consistent link text.</p>
<p>For example, a link labeled <em>Go To Chapter 4</em> on one page, and <em>Go To Chapter 5</em> on another is consistent. However, a link labeled <em>Go To Chapter 4</em> on one page and <em>Open Chapter 5</em> on another is not.</p>
<!--<p>Multiple links which have the same link text should provide identical functionality (such as resolving to the same page).</p>-->
<p><em>Source: <a href="http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G197" class="external">WCAG 2.0, Technique G197</a></em></p>

<h3 id="rp">2. Repeated Navigation</h3>
Expand Down

0 comments on commit 5c1c24d

Please sign in to comment.