ARCHIVED - Examples of inaccessible design

Warning This information has been archived because it is outdated and no longer relevant.

Archived Content

Information identified as archived on the Web is for reference, research or recordkeeping purposes. It has not been altered or updated after the date of archiving. Web pages that are archived on the Web are not subject to the Government of Canada Web Standards. As per the Communications Policy of the Government of Canada, you can request alternate formats by contacting us.

Table of Contents

1.0 Information that is dependent upon colour

1.1 Example

Below is a list of all projects. Projects with a red background have been cancelled, projects with a black background are in progress and projects with a blue background are completed.

Status of all projects
Project name Project lead
RTSP Smith, John
Web Services Doe, John
Payroll Renewal Smith, John
SRTS Doe, Jane

1.2 CSS code

.alignLeft_eiid{text-align: left;}
.red_eiid{color: #CC0000;}
.black_eiid{color: #000000;}
.blue_eiid{color: #0000FF;}
.redBG_eiid{background-color: #CC0000; color: #FFFFFF; font-weight: bold;}
.blackBG_eiid{background-color: #000000; color: #FFFFFF; font-weight: bold;}
.blueBG_eiid{background-color: #0000FF; color: #FFFFFF; font-weight: bold;}

1.3 (X)HTML code

<div>Below is a list of all projects. Projects with a <span class="red_eiid"><strong>red background</strong></span> have been cancelled, projects with a <span class="black_eiid"><strong>black background</strong></span> are in progress and projects with a <span class="blue_eiid"><strong>blue background</strong></span> are completed.</div><br />

<table class="data-table">
<caption class="alignLeft_eiid"><strong>Status of all projects</strong></caption>
<thead>
<tr>
<th scope="col">Project name</th>
<th scope="col">Project lead</th>
</tr>
</thead>
<tbody>
<tr>
<td class="redBG_eiid">RTSP</td>
<td>Smith, John</td>
</tr>
<tr>
<td class="blackBG_eiid">Web Services</td>
<td>Doe, John</td>
</tr>
<tr>
<td class="blueBG_eiid">Payroll Renewal</td>
<td>Smith, John</td>
</tr>
<tr>
<td class="blackBG_eiid">SRTS</td>
<td>Doe, Jane</td>
</tr>
</tbody>
</table>

2.0 Data table with accessibility issues

2.1 Example

Current employees
Name Title Bi-weekly salary
Gross Net
Doe, Jane Manager $2,160.68 $1296.41
Doe, John Director $2,880.90 $1584.50
Smith, John Programmer Analyst $1,440.45 $965.10

2.2 CSS code

None

2.3 (X)HTML code

<div><strong>Current employees</strong></div>
<table border="1">
<tr>
<td rowspan="2" colspan="1" class="alignCenter"><strong>Name</strong></td>
<td rowspan="2" colspan="1" class="alignCenter"><strong>Title</strong></td>
<td rowspan="1" colspan="2" class="alignCenter"><strong>Bi-weekly salary</strong></td>
</tr>
<tr>
<td class="alignCenter"><strong>Gross</strong></td>
<td class="alignCenter"><strong>Net</strong></td>
</tr>
<tr>
<td>Doe, Jane</td>
<td>Manager</td>
<td class="alignRight">$2,160.68</td>
<td class="alignRight">$1296.41</td>
</tr>
<tr>
<td>Doe, John</td>
<td>Director</td>
<td class="alignRight">$2,880.90</td>
<td class="alignRight">$1584.50</td>
</tr>
<tr>
<td>Smith, John</td>
<td>Programmer Analyst</td>
<td class="alignRight">$1,440.45</td>
<td class="alignRight">$965.10</td>
</tr>
</table>

Top of Page

3.0 Inaccessible text (images used for text)

3.1 Example

2005-10-28 Dear user, 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. Sincerely, Anonymous

3.2 CSS code

.alignCenter_eiid{text-align: center;}

3.3 (X)HTML code

<p class="alignCenter_eiid"><img src="letter.jpg" width="550" height="170" alt="2005-10-28 Dear user, 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 &#34;Sincerely&#34; at the end with the name of the author. Sincerely, Anonymous" /></p>

4.0 Inaccessible text (fixed font sizes)

4.1 Example

2005-10-28

Dear user,

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.

Sincerely,
Anonymous

4.2 CSS code

.font10pt_eiid{font-size: 10pt;}
.greyBox_eiid{width: 67%; background-color: #CCCCCC; border: none; padding: 23px 12px 23px 12px; text-align: left;}
.indent1_eiid{padding-left: 5%; border: none;}
.indent2_eiid{padding-left: 10%; border: none;}
.alignCenter{align: center;}
.alignRight{align: right;}

4.3 (X)HTML code

<div class="font10pt_eiid">
<div class="alignCenter"><div class="greyBox_eiid">
<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_eiid">Sincerely,</div>
<div class="indent2_eiid">Anonymous</div>
</div></div>
</div>

5.0 Inaccessible form without client input errors

5.1 Example

Please complete the following form as part of the CRA survey.

Name:

First


Last



Phone numbers:
Home


Work
  Ext 


Gender
Male
Female



How long have you worked for the CRA?
0 to 5 years
6 to 10 years
11 to 20 years
20+ years


Are you a member of a visible minority?
Yes
No


Do you require one or more adaptive technologies to perform your day to day work?
Yes
No


Top of Page

5.2 CSS code

None

5.3 (X)HTML code

<p>Please complete the following form as part of the <acronym title="Canada Revenue Agency">CRA</acronym> survey.</p>

<form action="#" method="post">
<div>
<strong>Name:</strong><br /><br />
First<br />
<input type="text" id="fname" name="fname" size="20" maxlength="20" />
<br /><br />

Last<br />
<input type="text" id="lname" name="lname" size="20" maxlength="20" />
<br /><br /><br />

<strong>Phone numbers:</strong><br />
Home<br />
<input type="text" id="hphone" name="hphone" size="12" maxlength="12" />
<br /><br />

Work<br />
<input type="text" id="wphone" name="wphone" size="12" maxlength="12" />&#160;&#160;Ext&#160;<input type="text" id="wphonex" name="wphonex" size="5" maxlength="5" />
<br /><br /><br />

Gender<br />
<input type="radio" name="gender" value="m" />Male<br />
<input type="radio" name="gender" value="f" />Female<br />
<br /><br /><br />

How long have you worked for the <acronym title="Canada Revenue Agency">CRA</acronym>?<br />
<input type="radio" name="years" value="0" />0 to 5 years<br />
<input type="radio" name="years" value="1" />6 to 10 years<br />
<input type="radio" name="years" value="2" />11 to 20 years<br />
<input type="radio" name="years" value="3" />20+ years
<br /><br /><br />

Are you a member of a visible minority?<br />
<input type="radio" name="vismin" value="y" />Yes<br />
<input type="radio" name="vismin" value="n" />No
<br /><br /><br />

Do you require one or more adaptive technologies to perform your day to day work?<br />
<input type="radio" name="dis" value="y" />Yes<br />
<input type="radio" name="dis" value="n" />No
<br /><br /><br />

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

6.0 Inaccessible form without client input errors

6.1 Example

The form could not be submitted because the following errors were found:

  • Last name must be specified.
  • Work phone number must be specified.
  • Gender must be specified.

Please return to the form and correct the errors before submitting again.

6.2 CSS code

None

6.3 (X)HTML code

<p><strong>The form could not be submitted because the following errors were found:</strong></p>
<ul>
<li>Last name must be specified.</li>
<li>Work phone number must be specified.</li>
<li>Gender must be specified.</li>
</ul>

<p>Please return to the form and correct the errors before submitting again.</p>

7.0 Insufficient heading markup

7.1 Example

Intramural sports

We offer a variety of seasonal intramural sports.

Winter sports

We offer winter sports for men and women.

Winter sports for men

  • Basketball
  • Hockey
  • Volleyball

Winter sports for women

  • Basketball
  • Ringuette
  • Volleyball

Summer sports

We offer summer sports for men and women.

Summer sports for men

  • Football
  • Rugby
  • Soccer

Summer sports for women

  • Field hockey
  • Soccer

7.2 CSS code

.h2Size_eiid{font-size: 120%;}
.h3Size_eiid{font-size: 110%;}

7.3 (X)HTML code

<p class="h2Size_eiid"><strong>Intramural sports</strong></p>
<p>We offer a variety of seasonal intramural sports.</p>

<p class="h3Size_eiid"><strong>Winter sports</strong></p>
<p>We offer winter sports for men and women.</p>

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

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

<p class="h3Size_eiid"><strong>Summer sports</strong></p>
<p>We offer summer sports for men and women.</p>

<p><strong>Summer sports for men</strong></p>
<ul>
<li>Football</li>
<li>Rugby</li>
<li>Soccer</li>
</ul>
<p ><strong>Summer sports for women</strong></p> <ul> <li>Field hockey</li> <li>Soccer</li> </ul>

Top of Page

8.0 Heading markup used incorrectly

8.1 Example

Intramural sports

We offer a variety of seasonal intramural sports.

Winter sports

We offer winter sports for men and women.

Winter sports for men

  • Basketball
  • Hockey
  • Volleyball

Winter sports for women

  • Basketball
  • Ringuette
  • Volleyball

Summer sports

We offer summer sports for men and women.

Summer sports for men

  • Football
  • Rugby
  • Soccer

Summer sports for women

  • Field hockey
  • Soccer

8.2 CSS code

None

8.3 (X)HTML code

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

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

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

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

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

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

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

9.0 Language changes that are not marked up properly

9.1 Example

9.1.1 Messages provided in both Official Languages

For the English Braille version of this document, call 1-888-123-4567.

Pour la version en braille française de ce document, appeler 1-888-765-4321.

9.1.2 English and French proper names in a list

Participants

  • John Smith
  • Gilles Durocher
  • Louis Tabman
  • Francois Lafleur
  • Lucy Arnold
  • Giselle Boivier

9.1.3 Mid-sentence language changes

I had a sense of "déjà vu" while walking near the L'Esplanade Laurier shopping centre.

9.2 CSS code

None

9.3 (X)HTML code

9.3.1 Messages provided in both Official Languages

<p>For the English Braille version of this document, call 1-888-123-4567.</p>
<p>Pour la version en braille française de ce document, appeler 1-888-765-4321.</p>

9.3.2 English and French proper names in a list

<p>Participants</p>
<ul>
<li>John Smith</li>
<li>Gilles Durocher</li>
<li>Louis Tabman</li>
<li>Francois Lafleur</li>
<li>Lucy Arnold</li>
<li>Giselle Boivier</li>
</ul>

9.3.3 Mid-sentence language changes

<p>I had a sense of "déjà vu" while walking near the L'Esplanade Laurier shopping centre.</p>

10.0 Unclear link targets

Top of Page

10.1 Example

  • For tax information related to students, click here.
  • For tax information related to adults, click here.

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

What are the most important tax tips? Full details

10.2 CSS code

None

10.3 (X)HTML code

<ul>
<li>For tax information related to students, <a href="...some url...">click here</a>.</li>
<li>For tax information related to adults, <a href="...some url...">click here</a>.</li>
</ul>

<p>Important tax tips that will save you a lot of money. <a href="...some url...">more...</a></p>

<p><strong>What are the most important tax tips?</strong> <a href="...some url...">Full details</a></p>

11.0 Tables being used unnecessarily for layout

11.1 Example

     
  2005-10-28  
     
  Dear user,  
     
  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.  
     
    Sincerely,  
      Anonymous  
     

11.2 CSS code

.width25_eiid{width : 20%;}
.width50_eiid{width : 5%;}

11.3 (X)HTML code

<table>
<tr>
<td class="alignCenter">
<table class="width70 g_eiid">
<tr>
<td class="width5_eiid">&#160;</td>
<td colspan="3">&#160;</td>
<td class="width5_eiid">&#160;</td>
</tr>
<tr>
<td class="width5_eiid">&#160;</td>
<td colspan="3" class="alignRight">2005-10-28</td>
<td class="width5_eiid">&#160;</td>
</tr>
<tr>
<td class="width5_eiid">&#160;</td>
<td colspan="3">&#160;</td>
<td class="width5_eiid">&#160;</td>
</tr>
<tr>
<td class="width5_eiid">&#160;</td>
<td colspan="3" class="alignLeft">Dear user,</td>
<td class="width5_eiid">&#160;</td>
</tr>
<tr>
<td class="width5_eiid">&#160;</td>
<td colspan="3">&#160;</td>
<td class="width5_eiid">&#160;</td>
</tr>
<tr>
<td class="width5_eiid">&#160;</td>
<td colspan="3" class="alignLeft">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.</td>
<td class="width5_eiid">&#160;</td>
</tr>
<tr>
<td class="width5_eiid">&#160;</td>
<td colspan="3">&#160;</td>
<td class="width5_eiid">&#160;</td>
</tr>
<tr>
<td class="width5_eiid">&#160;</td>
<td class="width20_eiid">&#160;</td>
<td colspan="2" class="alignLeft">Sincerely,</td>
<td class="width5_eiid">&#160;</td>
</tr>
<tr>
<td class="width5_eiid">&#160;</td>
<td class="width20_eiid">&#160;</td>
<td class="width5_eiid">&#160;</td>
<td align="left">Anonymous</td>
<td class="width5_eiid">&#160;</td>
</tr>
<tr>
<td class="width5_eiid">&#160;</td>
<td colspan="3">&#160;</td>
<td class="width5_eiid">&#160;</td>
</tr>
</table>
</td>
</tr>
</table>

12.0 Insufficient list markup

Top of Page

12.1 Example

Categories available in the CLF 2.0 toolbox:

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

12.2 CSS code

None

12.3 (X)HTML code

<p><strong>Categories available in the CLF 2.0 toolbox:</strong></p>
<table>
<tr><td class="alignTop">•</td><td colspan="3" class="alignTop">CLF 2.0 Template and Technical Guide</td></tr>
<tr><td class="alignTop">•</td><td colspan="3" class="alignTop">Sample Treatments of CLF 2.0 Requirements</td></tr>
<tr><td></td><td>&#160;&#160;&#160;&#160;</td><td class="alignTop">o</td><td class="alignTop">Part 1: Standard on Domain Names</td></tr>
<tr><td></td><td>&#160;&#160;&#160;&#160;</td><td class="alignTop">o</td><td class="alignTop">Part 2: Standard on the Accessibility, Interoperability and Usability of Web sites</td></tr>
<tr><td></td><td>&#160;&#160;&#160;&#160;</td><td class="alignTop">o</td><td class="alignTop">Part 3: Standard on Common Web Page Formats</td></tr>
<tr><td></td><td>&#160;&#160;&#160;&#160;</td><td class="alignTop">o</td><td class="alignTop">Part 4: Standard on Email</td></tr>
<tr><td class="alignTop">•</td><td colspan="3" class="alignTop">General Information</td></tr>
<tr><td class="alignTop">•</td><td colspan="3" class="alignTop">Content Authoring</td></tr>
<tr><td class="alignTop">•</td><td colspan="3" class="alignTop">Development and Migration</td></tr>
<tr><td class="alignTop">•</td><td colspan="3" class="alignTop">Layout and Design</td></tr>
<tr><td class="alignTop">•</td><td colspan="3" class="alignTop">Scripts and Dynamic Pages</td></tr>
<tr><td class="alignTop">•</td><td colspan="3" class="alignTop">Specifications, recommendations and guidelines</td></tr>
<tr><td class="alignTop">•</td><td colspan="3" class="alignTop">Tools</td></tr>
</table>

13.0 List markup used incorrectly

13.1 Example

2005-10-28

Dear user,

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.

  • Sincerely,
    • Anonymous

13.2 CSS code

.greyBox_eiid{width: 67%; background-color: #CCCCCC; border: none; padding: 23px 12px 23px 12px; text-align: left;}
.noBullet{list-style-type: none;}
.alignCenter{align: center;}
.alignRight{align: right;}

13.3 (X)HTML code

<div class="alignCenter"><div class="greyBox_eiid">
<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>
<ul class="noBullet"><li>Sincerely,
<ul class="noBullet"><li>Anonymous</li></ul>
</li></ul>
</div></div>

14.0 Insufficient quotation markup

14.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".

14.2 CSS code

.indent2 {padding-left: 36px;}

14.3 (X)HTML code

<p>The message to Deputy heads of Institutions Under the Financial Administration Act, Schedules I, I.1 and II stated:</p>
<p class="indent2">"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>
<p>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".</p>

15.0 Quotation markup used incorrectly

15.1 Example

2005-10-28

Dear user,

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.

Sincerely,
Anonymous

15.2 CSS code

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

15.3 (X)HTML code

<div class="alignCenter"><div class="greyBox_eiid">
<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>
<blockquote><div>Sincerely,</div>
<blockquote><div>Anonymous</div></blockquote>
</blockquote>
</li></ul>
</div></div>