ARCHIVED - Examples of accessible design

1.1 Example

1.2 CSS code

.alignLeft{text-align: left;}
.redBG_eoad{background-color: #CC0000; color: #FFFFFF; font-weight: bold;}
.blackBG_eoad{background-color: #000000; color: #FFFFFF; font-weight: bold;}
.blueBG_eoad{background-color: #0000FF; color: #FFFFFF; font-weight: bold;}

1.3 (X)HTML code

<table>
<caption class="alignLeft"><strong>Status of all projects</strong></caption>
<thead>
<tr>
<th scope="col">Project name</th>
<th scope="col">Project lead</th>
<th scope="col">Project status</th>
</tr>
</thead>
<tbody>
<tr>
<td>RTSP</td>
<td>Smith, John</td>
<td class="redBG_eoad">Cancelled</td>
</tr>
<tr>
<td>Web Services</td>
<td>Doe, John</td>
<td class="blackBG_eoad">In progress</td>
</tr>
<tr>
<td>Payroll Renewal</td>
<td>Smith, John</td>
<td class="blueBG_eoad">Completed</td>
</tr>
<tr>
<td>SRTS</td>
<td>Doe, Jane</td>
<td class="blackBG_eoad">In progress</td>
</tr>
</tbody>
</table>

2.1 Example

2.2 CSS code

.alignLeft{text-align: left;}
.alignRight{text-align: right;}


2.3 (X)HTML code

<table>
<caption class="alignLeft"><strong>Current employees</strong></caption>
<thead>
<tr>
<th rowspan="2" colspan="1" id="head1">Name</th>
<th rowspan="2" colspan="1" id="head2">Title</th>
<th rowspan="1" colspan="2" id="head3">Bi-weekly salary</th>
</tr>
<tr>
<th id="head31" headers="head3">Gross</th>
<th id="head32" headers="head3">Net</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="head1">Doe, Jane</td>
<td headers="head2">Manager</td>
<td headers="head3 head31" class="alignRight">$2,160.68</td>
<td headers="head3 head32" class="alignRight">$1296.41</td>
</tr>
<tr>
<td headers="head1">Doe, John</td>
<td headers="head2">Director</td>
<td headers="head3 head31" class="alignRight">$2,880.90</td>
<td headers="head3 head32" class="alignRight">$1584.50</td>
</tr>
<tr>
<td headers="head1">Smith, John</td>
<td headers="head2">Programmer Analyst</td>
<td headers="head3 head31" class="alignRight">$1,440.45</td>
<td headers="head3 head32" class="alignRight">$965.10</td>
</tr>
</tbody>
</table>

3.1 Example

3.2 CSS code

.greyBox_eoad{width: 67%; background-color: #CCCCCC; border: none; padding: 23px 12px 23px 12px; text-align: left;}
.indent1_eoad{padding-left: 5%; border: none;}
.indent2_eoad{padding-left: 10%; border: none;} .alignCenter{align: center;} .alignRight{align: right;}

3.3 (X)HTML code

<div class="alignCenter"><div class="greyBox_eoad">
<p class="alignRight">2005-10-28</p>
<p>Dear user,</p>
<p>This is a demonstration of how to create a simple dated letter. Notice how the date is in the upper right and the letter begins with "Dear". There is also "Sincerely" at the end with the name of the author.</p>
<div class="indent1_eoad">Sincerely,</div>
<div class="indent2_eoad">Anonymous</div>
</div></div>

4.1 Example

Please complete the following form as part of the survey.

4.2 CSS code

.error_eoad{color: #CC0000;}

4.3 (X)HTML code

<p>Please complete the following form as part of the survey.</p>
<form action="#" method="post">
<div>
<label for="fnamepnom">First name <strong>(required)</strong></label><br />
<input type="text" id="fnamepnom" name="fnamepnom" size="20" maxlength="20" />
<br /><br />

<label for="lnamenom">Last name <strong>(required)</strong></label><br />
<input type="text" id="lnamenom" name="lnamenom" size="20" maxlength="20" />
<br />
<br />

<label for="hphoned">Home phone number including area code (e.g. 123-456-7890) <strong>(required)</strong></label><br />
<input type="text" id="hphoned" name="hphoned" size="12" maxlength="12" value="123-456-7890" />
<br /><br />

<label for="wphonet">Work phone number including area code (e.g. 123-456-7890) <strong>(required)</strong>
</label><br />
<input type="text" id="wphonet" name="wphonet" size="12" maxlength="12" />
<br /><br />

<label for="wphonexpt">Work phone number extension</label><br />
<input type="text" id="wphonexpt" name="wphonexpt" size="5" maxlength="5" />
<br /><br />

<label for="sexsexe">Gender <strong>(required)</strong></label><br />
<select id="sexsexe" name="sexsexe">
<option value=""></option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
<br /><br />

<label for="yearstemps">How long have you worked for the department? <strong>(required)</strong></label><br />
<select id="yearstemps" name="yearstemps">
<option value=""></option>
<option value="0">0 to 5 years</option>
<option value="1">6 to 10 years</option>
<option value="2">11 to 20 years</option>
<option value="3">20+ years</option>
</select>
<br /><br />

<fieldset>
<legend>Which provinces and territories have you worked in? <strong>(required)</strong></legend>
<input type="checkbox" name="provab" id="provab" value="1" /><label for="provab">Alberta</label><br />
<input type="checkbox" name="provbc" id="provbc" value="1" /><label for="provbc">British Columbia</label><br />
<input type="checkbox" name="provmb" id="provmb" value="1" /><label for="provmb">Manitoba</label><br />
<input type="checkbox" name="provnb" id="provnb" value="1" /><label for="provnb">New Brunswick</label><br />
<input type="checkbox" name="provnl" id="provnl" value="1" /><label for="provnl">Newfoundland and Labrador</label><br />
<input type="checkbox" name="provnt" id="provnt" value="1" /><label for="provnt">Northwest Territories</label><br />
<input type="checkbox" name="provns" id="provns" value="1" /><label for="provns">Nova Scotia</label><br />
<input type="checkbox" name="provnu" id="provnu" value="1" /><label for="provnu">Nunavut</label><br />
<input type="checkbox" name="provon" id="provon" value="1" /><label for="provon">Ontario</label><br />
<input type="checkbox" name="provpe" id="provpe" value="1" /><label for="provpe">Prince Edward Island</label><br />
<input type="checkbox" name="provqc" id="provqc" value="1" /><label for="provqc">Quebec</label><br />
<input type="checkbox" name="provsk" id="provsk" value="1" /><label for="provsk">Saskatchewan</label><br />
<input type="checkbox" name="provyt" id="provyt" value="1" /><label for="provyt">Yukon</label>
</fieldset>
<br />

<label for="visminvis">Are you a member of a visible minority?</label><br />
<select id="visminvis" name="visminvis">
<option value=""></option>
<option value="y">Yes</option>
<option value="n">No</option>
</select>
<br /><br />

<label for="dis">Do you require one or more adaptive technologies to perform your day to day work?</label><br />
<select id="dis" name="dis">
<option value=""></option>
<option value="y">Yes</option>
<option value="n">No</option>
</select>
<br /><br />
<input type="submit" value="Submit" />
</div>
</form>

5.1 Example

• Error 1: Last name must be specified.
• Error 2: Work phone number must be specified.
• Error 3: Gender must be specified.
• Error 4: At least one province or territory must be selected.

Please complete the following form as part of the survey.

5.2 CSS code

.error_eoad{color: #CC0000;}

5.3 (X)HTML code

<div>The form could not be submitted because 4 errors were found.</div>
<ul>
<li><a href="#lnamenom2">Error&#160;1: Last name must be specified.</a></li>
<li><a href="#wphonet2">Error&#160;2: Work phone number must be specified.</a></li>
<li><a href="#sexsexe2">Error&#160;3: Gender must be specified.</a></li>
<li><a href="#provaab">Error 4: At least one province or territory must be selected.</a></li>
</ul>
<p>Please complete the following form as part of the survey.</p>

<form action="#" method="post">
<div>
<label for="fnamepnom2">First name <strong>(required)</strong></label><br />
<input type="text" id="fnamepnom2" name="fnamepnom2" size="20" maxlength="20" value="John" />
<br /><br />

<label for="lnamenom2">Last name <strong>(required)</strong><br />
<span class="error_eoad"><strong>Error&#160;1: Last name must be specified.</strong></span></label><br />
<input type="text" id="lnamenom2" name="lnamenom2" size="20"
maxlength="20" />
<br /><br />

<label for="hphoned2">Home phone number including area code (e.g. 123-456-7890) <strong>(required)</strong></label><br />
<input type="text" id="hphoned2" name="hphoned2" size="12" maxlength="12" value="123-456-7890" />
<br /><br />

<label for="wphonet2">Work phone number including area code (e.g. 123-456-7890) <strong>(required)</strong><br />
<span class="error_eoad"><strong>Error&#160;2: Work phone number must be specified.</strong></span></label><br />
<input type="text" id="wphonet2" name="wphonet2" size="12" maxlength="12" />
<br /><br />

<label for="wphonexpt2">Work phone number extension</label><br />
<input type="text" id="wphonexpt2" name="wphonexpt2" size="5" maxlength="5" />
<br /><br />

<label for="sexsexe2">Gender <strong>(required)</strong><br />
<span class="error_eoad"><strong>Error&#160;3: Gender must be specified.</strong></span></label><br />
<select id="sexsexe2" name="sexsexe2">
<option value=""></option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
<br /><br />

<label for="yearstemps2">How long have you worked for the department? <strong>(required)</strong></label><br />
<select id="yearstemps2" name="yearstemps2">
<option value=""></option>
<option value="0">0 to 5 years</option>
<option value="1" selected="selected">6 to 10
years</option>
<option value="2">11 to 20 years</option>
<option value="3">20+ years</option>
</select>
<br /><br />
<fieldset>
<legend>Which provinces and territories have you worked in? <strong>(required)</strong><br /><span class="red"><strong>Error 4: At least one province or territory must be selected.</strong></span></legend>
<input type="checkbox" name="provaab" id="provaab" value="1" /><label for="provaab">Alberta</label><br />
<input type="checkbox" name="provabc" id="provabc" value="1" /><label for="provabc">British Columbia</label><br />
<input type="checkbox" name="provamb" id="provamb" value="1" /><label for="provamb">Manitoba</label><br />
<input type="checkbox" name="provanb" id="provanb" value="1" /><label for="provanb">New Brunswick</label><br />
<input type="checkbox" name="provanl" id="provanl" value="1" /><label for="provanl">Newfoundland and Labrador</label><br />
<input type="checkbox" name="provant" id="provant" value="1" /><label for="provant">Northwest Territories</label><br />
<input type="checkbox" name="provans" id="provans" value="1" /><label for="provans">Nova Scotia</label><br />
<input type="checkbox" name="provanu" id="provanu" value="1" /><label for="provanu">Nunavut</label><br />
<input type="checkbox" name="provaon" id="provaon" value="1" /><label for="provaon">Ontario</label><br />
<input type="checkbox" name="provape" id="provape" value="1" /><label for="provape">Prince Edward Island</label><br />
<input type="checkbox" name="provaqc" id="provaqc" value="1" /><label for="provaqc">Quebec</label><br />
<input type="checkbox" name="provask" id="provask" value="1" /><label for="provask">Saskatchewan</label><br />
<input type="checkbox" name="provayt" id="provayt" value="1" /><label for="provayt">Yukon</label>
</fieldset>
<br />

<label for="visminvis2">Are you a member of a visible minority?</label><br />
<select id="visminvis2" name="visminvis2">
<option value=""></option>
<option value="y">Yes</option>
<option value="n">No</option>
</select>
<br /><br />

<label for="dis2">Do you require one or more adaptive technologies to perform your day to day work?</label><br />
<select id="dis2" name="dis2">
<option value=""></option>
<option value="y" selected="selected">Yes</option>
<option value="n">No</option>
</select>
<br /><br />

<input type="submit" value="Submit" />
</div>
</form>

6.1 Example

This example starts with heading level 4 because headings level 1, 2 and 3 are already in use.

6.2 CSS code

None

6.3 (X)HTML code

<p><strong>This example starts with heading level 4 because headings level 1, 2 and 3 are already in use.</strong></p>

<h4>Intramural sports</h4>
<p>We offer a variety of seasonal intramural sports.</p>

<h5>Winter sports</h5>
<p>We offer winter sports for men and women.</p>

<h6>Winter sports for men</h6>
<ul>
<li>Basketball</li>
<li>Hockey</li>
<li>Volleyball</li>
</ul>

<h6>Winter sports for women</h6>
<ul>
<li>Basketball</li>
<li>Ringuette</li>
<li>Volleyball</li>
</ul>

<h5>Summer sports</h5>
<p>We offer summer sports for men and women.</p>

<h6>Summer sports for men</h6>
<ul>
<li>Football</li>
<li>Rugby</li>
<li>Soccer</li>
</ul>

<h6>Summer sports for women</h6>
<ul>
<li>Field hockey</li>
<li>Soccer</li>
</ul>

7.1 Example

7.2 CSS code

None

7.3 (X)HTML code

8.1 Example

• Tax information related to students
• Tax information related to adults

Important tax tips that will save you a lot of money.

What are the most important tax tips?

8.2 CSS code

None

8.3 (X)HTML code

<ul>
<li><a href="...some url...">Tax information related to students</a></li>
<li><a href="...some url...">Tax information related to adults</a></li>
</ul>

<p><a href="...some url...">Important tax tips that will save you a lot of money.</a></p>
<p><a href="...some url..."><strong>What are the most important tax tips?</strong></a></p>

9.1 Example

9.2 CSS code

.alignCenter_eoad{text-align : center;}
.alignRight_eoad{text-align : right;}
.greyBox_eoad{width : 67%; background-color : #CCCCCC; border : none; padding: 23px 12px 23px 12px; text-align : left;}
.indent1_eoad{padding-left : 5%; border : none;}
.indent2_eoad{padding-left : 10%; border : none;}

9.3 (X)HTML code

<div class="alignCenter"><div class="greyBox">
<p class="alignRight">2005-10-28</p>
<p>Dear user,</p>
<p>This is a demonstration of how to create a simple dated letter. Notice how the date is in the upper right and the letter begins with "Dear". There is also "Sincerely" at the end with the name of the author.</p>
<div class="indent1">Sincerely,</div>
<div class="indent2">Anonymous</div>
</div></div>

10.1 Example

Categories available in the CLF 2.0 toolbox:

• CLF 2.0 Template and Technical Guide
• Sample Treatments of CLF 2.0 Requirements
  • Part 1: Standard on Domain Names
  • Part 2: Standard on the Accessibility, Interoperability and Usability of Web sites
  • Part 3: Standard on Common Web Page Formats
  • Part 4: Standard on Email
• General Information
• Content Authoring
• Development and Migration
• Layout and Design
• Scripts and Dynamic Pages
• Specifications, recommendations and guidelines
• Tools

10.2 CSS code

None

10.3 (X)HTML code

<p><strong>Categories available in the toolbox:</strong></p>
<ul>
<li>CLF 2.0 Template and Technical Guide</li>
<li>Sample Treatments of CLF 2.0 Requirements
<ul>
<li>Part 1: Standard on Domain Names</li>
<li>Part 2: Standard on the Accessibility, Interoperability and Usability of Web sites</li>
<li>Part 3: Standard on Common Web Page Formats</li>
<li>Part 4: Standard on Email</li>
</ul></li>
<li>General Information</li>
<li>Content Authoring</li>
<li>Development and Migration</li>
<li>Layout and Design</li>
<li>Scripts and Dynamic Pages</li>
<li>Specifications, recommendations and guidelines</li>
<li>Tools</li>
</ul>

11.1 Example

Breadcrumb trail

A navigation tool that allows a user to see where the current page is in relation to the Web site's organizational structure and offer shortcut links for users to navigate to higher level categories.

Cookie

A data file sent by a Web server to the web browser on a client's computer that the Web server uses to track visitors and remember information about them. Typically, a cookie will only remember information that a client provides. The data stored within a cookie can only be read by the Web server that originally sent it.

Deputy head

This term is equivalent to "deputy minister", "chief executive officer" or some other title denoting this level of responsibility.

11.2 CSS code

None

11.3 (X)HTML code

<dl>
<dt><strong>Breadcrumb trail</strong></dt>
<dd>A navigation tool that allows a user to see where the current page is in relation to the Web site's organizational structure and offer shortcut links for users to navigate to higher level categories.<br /><br /></dd>
<dt><strong>Cookie</strong></dt>
<dd>A data file sent by a Web server to the web browser on a client's computer that the Web server uses to track visitors and remember information about them. Typically, a cookie will only remember information that a client provides. The data stored within a cookie can only be read by the Web server that originally sent it.<br /><br /></dd>
<dt><strong>Deputy head</strong></dt>
<dd>This term is equivalent to "deputy minister", "chief executive officer" or some other title denoting this level of responsibility.</dd>
</dl>

12.1 Example

The message to Deputy heads of Institutions Under the Financial Administration Act, Schedules I, I.1 and II stated:

"This is to advise you that Treasury Board has approved new Common Look and Feel Standards for the Internet. The standards came into effect as of January 1, 2007, and are to be applied to Internet sites of Government of Canada institutions listed in Schedules I, I.1 and II of the Financial Administration Act. Recognizing the normal lifecycle of departmental Websites, a phased approach for implementing the new standards will be followed to avoid unnecessary costs, with a two-year deadline ending December 31, 2008, for the conversion of existing sites. Websites launched after January 1, 2007, must conform to the new standards."

It also stated "Institutions are expected to report on their implementation plans in June 2007 and on their progress in December 2007 and January 2009" and "Additional feedback may be sought periodically".

12.2 CSS code

None

12.3 (X)HTML code

<p>The message to Deputy heads of Institutions Under the <em>Financial Administration Act</em>, Schedules I, I.1 and II stated:</p>

<blockquote cite="http://www.tbs-sct.gc.ca/clf2-nsi2/nti12-nai12-eng.asp"><p>"This is to advise you that Treasury Board has approved new Common Look and Feel Standards for the Internet. The standards came into effect as of January 1, 2007, and are to be applied to Internet sites of Government of Canada institutions listed in Schedules I, I.1 and II of the Financial Administration Act. Recognizing the normal lifecycle of departmental Websites, a phased approach for implementing the new standards will be followed to avoid unnecessary costs, with a two-year deadline ending December 31, 2008, for the conversion of existing sites. Websites launched after January 1, 2007, must conform to the new standards."</p></blockquote>

<p>It also stated <q cite="http://www.tbs-sct.gc.ca/clf2-nsi2/nti12-nai12-eng.asp">"Institutions are expected to report on their implementation plans in June 2007 and on their progress in December 2007 and January 2009"</q> and <q cite="http://www.tbs-sct.gc.ca/clf2-nsi2/nti12-nai12-eng.asp">"Additional feedback may be sought periodically".</q></p>