Issues:
1<HTML>
2 <HEAD>
3<TITLE>Welcome to CityLights! [Inaccessible Template Page]</TITLE> <STYLE>
4 #main * {
5 color: #000000;
6 font: normal 15px "Times New Roman", Times, serif;
7 text-decoration: none;
8 }
9 #main p{
10 margin: 6px 0;
11 }
12 #main .headline {
13 margin-top: 0px;
14 color: #41545d;
15 font: 24px verdana;
16 font-family: impact;
17 text-decoration: none;
18 }
19 </STYLE>
20 <LINK HREF="../css/meta.css" rel="stylesheet" type="text/css">
21 <SCRIPT type="text/javascript">
22 function ChangeColor(id, colour){
23 document.getElementById(id).style.backgroundColor=colour;
24 }
25 function switchImage(imgName, imgSrc){
26 if (document.images){
27 if (imgSrc != "none"){
28 document.images[imgName].src = imgSrc;
29 }
30 }
31 }
32 </SCRIPT>
33 <NOSCRIPT><B><FONT COLOR=RED>This page uses scripts!!!</FONT></B></NOSCRIPT>
34 <script src="../js/onload.js" type="text/javascript"></script>
35 </HEAD>
36 <BODY TEXT=#000000 BGCOLOR=#D7D7CD LEFTMARGIN=0px TOPMARGIN=0px MARGINWIDTH=0px MARGINHEIGHT=0px LINK=#226C8E VLINK=#226C8E ALINK=#226C8E>
37 <div id="meta-header">
38 <p id="skipnav"><a href="#page">Skip to inaccessible demo page</a></p>
39 <p id="logos"><a href="https://www.w3.org/" title="W3C Home"><img alt="W3C logo" src="../img/w3c.png" height="48" width="72"></a><a href="https://www.w3.org/WAI/" title="WAI Home"><img alt="Web Accessibility Initiative (WAI) logo" src="../img/wai.png" height="48"></a></p>
40 <h1><span class="subhead">Inaccessible Template Page</span><span class="hidden"> -</span> Before and After Demonstration</h1>
41 <p class="subline">Improving a Web site using Web Content Accessibility Guidelines (WCAG) 2.0</p>
42 <div id="mnav" class="inaccessible">
43 <ul>
44 <li class="first"><a href="../Overview.html">Overview</a></li>
45 <li class="first"><a href="home.html">Home</a></li>
46 <li><a href="news.html">News</a></li>
47 <li><a href="tickets.html">Tickets</a></li>
48 <li><a href="survey.html">Survey</a></li>
49 <li class="current"><span class="hidden">Current location: </span>Template
50 <div class="subnav"><ul>
51 <li class="inaccessible"><strong>Inaccessible:</strong><a class="page current"><span class="hidden">Inaccessible </span>Template</a><a href="./reports/template.html" class="report"><span class="hidden">Inaccessible Template </span> Report</a></li>
52 <li class="accessible"><strong>Accessible:</strong><a href="../after/template.html" class="page"><span class="hidden">Accessible </span>Template</a><a href="../after/reports/template.html" class="report"><span class="hidden">Accessible Template </span> Report</a></li>
53 </ul><a href="./annotated/template.html" class="annotoggle">Show <br>Annotations</a></div>
54 </li>
55 </ul>
56 </div>
57 </div>
58 <div id="page">
59 <p class="skip" id="startcontent">Demo starts here</p>
60 <TABLE WIDTH=100% BORDER=0px CELLSPACING=0px CELLPADDING=0px BGCOLOR=#D7D7CD><TR VALIGN=MIDDLE><TD WIDTH=100% ALIGN=CENTER>
61 <TABLE WIDTH=800px BORDER=0px CELLSPACING=0px CELLPADDING=0px BGCOLOR=WHITE>
62 <TR HEIGHT=10px>
63 <TD WIDTH=10px BACKGROUND=./img/border_left_top.gif><IMG SRC=./img/border_left_top.gif WIDTH=10px HEIGHT=10px></TD>
64 <TD WIDTH=780px BACKGROUND=./img/border_top.gif><IMG SRC=./img/border_top.gif HEIGHT=10px></TD>
65 <TD WIDTH=10px BACKGROUND=./img/border_right_top.gif><IMG SRC=./img/border_right_top.gif WIDTH=10px HEIGHT=10px></TD>
66 </TR>
67 <TR>
68 <TD WIDTH=10px BACKGROUND=./img/border_left.gif><IMG SRC=./img/border_left.gif WIDTH=10px></TD>
69 <TD WIDTH=780px ALIGN=CENTER>
70 <TABLE WIDTH=780px HEIGHT=144px BORDER=0px CELLSPACING=0px CELLPADDING=0px BGCOLOR=WHITE>
71 <TR HEIGHT=86px>
72 <TD WIDTH=443px BACKGROUND=./img/top_logo_next.gif VALIGN=MIDDLE><DIV><A HREF=home.html><IMG SRC=./img/top_logo.gif WIDTH=443px HEIGHT=86px ALT="Red dot with a white letter 'C' that symbolizes a moon crescent as well as the sun. This logo is followed by a black banner that says 'CITYLIGHTS' which is the name of this online portal. Finally, the slogan of the portal, 'your access to the city', follows in a turquoise green handwriting style and with a slight slant across the top banner."></A></DIV></TD>
73 <TD WIDTH=24px VALIGN=MIDDLE><IMG SRC=./img/top_logo_next_end.gif WIDTH=24px HEIGHT=86px></TD>
74 <TD WIDTH=128px VALIGN=MIDDLE><IMG SRC=./img/top_weather.gif WIDTH=128px HEIGHT=86px></TD>
75 <TD WIDTH=22px VALIGN=MIDDLE><IMG SRC=./img/top_logo_next_start.gif WIDTH=22px HEIGHT=86px></TD>
76 <TD WIDTH=163px BACKGROUND=./img/top_logo_next.gif ALIGN=CENTER VALIGN=MIDDLE>
77 <SELECT ONCHANGE="location.href = this.value;">
78 <OPTION SELECTED>QUICKMENU ---->
79 <OPTION VALUE="../offsite.html">Broadcasting
80 <OPTION VALUE="../offsite.html">Education
81 <OPTION VALUE="../offsite.html">Electricity
82 <OPTION VALUE="../offsite.html">Fire service
83 <OPTION VALUE="../offsite.html">Gas service
84 <OPTION VALUE="../offsite.html">Health care
85 <OPTION VALUE="../offsite.html">Police service
86 <OPTION VALUE="../offsite.html">Public Libraries
87 <OPTION VALUE="../offsite.html">Social services
88 <OPTION VALUE="../offsite.html">Social housing
89 <OPTION VALUE="../offsite.html">Telecommunications
90 <OPTION VALUE="../offsite.html">Town planning
91 <OPTION VALUE="../offsite.html">Transportation
92 <OPTION VALUE="../offsite.html">Waste management
93 <OPTION VALUE="../offsite.html">Water services
94 </SELECT>
95 </TD>
96 </TR>
97 <TR HEIGHT=7px>
98 <TD WIDTH=780px BACKGROUND=./img/mark.gif COLSPAN=5><IMG SRC=./img/mark.gif WIDTH=158px HEIGHT=7px></TD>
99 </TR>
100 <TR HEIGHT=25px>
101 <TD COLSPAN=5>
102 <TABLE WIDTH=780px BORDER=0px CELLSPACING=0px CELLPADDING=0px>
103 <TR HEIGHT=25px>
104 <TD BGCOLOR="#EDEDED" WIDTH=380px><FONT COLOR=BLACK FACE=Verdana SIZE=2> <B>Traffic:</B> Construction work on Main Road</FONT></TD>
105 <TD BGCOLOR="#FFFFFF" ALIGN=RIGHT ID="WEATHER"><FONT COLOR=BLACK FACE=Verdana SIZE=2><B>Today:</B>
106 <SCRIPT LANGUAGE="JavaScript">
107 var now = new Date();
108 var days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
109 var months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
110 var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
111 function fourdigits(number) {
112 return (number < 1000) ? number + 1900 : number;
113 }
114 today = days[now.getDay()] + " " + date + " " + months[now.getMonth()] + " " + (fourdigits(now.getYear())) + ", Sunny, 23°C </FONT>";
115 document.all.WEATHER.setAttribute("BGCOLOR", "#EDEDED", 0);
116 document.write(today);
117 </SCRIPT></TD>
118 </TR>
119 </TABLE>
120 </TD>
121 </TR>
122 <TR HEIGHT=1px>
123 <TD WIDTH=780px BACKGROUND=./img/marker2_w.gif COLSPAN=5><IMG SRC=.img/marker2_w.gif WIDTH=78px HEIGHT=1px></TD>
124 </TR>
125 <TR HEIGHT=25px>
126 <TD COLSPAN=5> </TD>
127 </TR>
128 </TABLE>
129 <TABLE WIDTH=780px BORDER=0px CELLSPACING=0px CELLPADDING=0px BGCOLOR=WHITE>
130 <TR WIDTH=780px>
131 <TD WIDTH=155px BGCOLOR=#E4E4E4 VALIGN=TOP>
132 <TABLE WIDTH=155px BORDER=0px CELLSPACING=0px CELLPADDING=0px>
133 <TR HEIGHT=1px>
134 <TD WIDTH=155px BACKGROUND=./img/marker2_w.gif><IMG SRC=./img/marker2_w.gif WIDTH=78px HEIGHT=1px></TD>
135 <TD WIDTH=1px BACKGROUND=./img/marker2_t.gif ROWSPAN=9 VALIGN=TOP><IMG SRC=./img/marker2_t.gif WIDTH=1 HEIGHT=30px></TD>
136 </TR>
137 <TR HEIGHT=34px>
138 <TD WIDTH=154px bgcolor="#EDEDED" id="home" onMouseOver="switchImage('nav_home', './img/nav_home2.gif'); ChangeColor('home','#FFF')" onMouseOut="switchImage('nav_home', './img/nav_home.gif'); ChangeColor('home','#EDEDED')"><A HREF="javascript:location.href='home.html';" onFocus="blur();"><img name="nav_home" src=./img/nav_home.gif width=88 height=27 hspace="15" border=0px></a></TD>
139 </TR>
140 <TR HEIGHT=1px>
141 <TD WIDTH=154px BACKGROUND=./img/marker2_w.gif><IMG SRC=./img/marker2_w.gif WIDTH=78px HEIGHT=1px></TD>
142 </TR>
143 <TR HEIGHT=34px>
144 <TD WIDTH=154px bgcolor="#EDEDED" id="news" onMouseOver="switchImage('nav_news', './img/nav_news2.gif'); ChangeColor('news','#FFF')" onMouseOut="switchImage('nav_news', './img/nav_news.gif'); ChangeColor('news','#EDEDED')"><A HREF="javascript:location.href='news.html';" ONFOCUS="blur();"><IMG SRC=./img/nav_news.gif name="nav_news" WIDTH=90 HEIGHT=21 hspace="12" BORDER=0px></A></TD>
145 </TR>
146 <TR HEIGHT=1px>
147 <TD WIDTH=154px BACKGROUND=./img/marker2_w.gif><IMG SRC=./img/marker2_w.gif WIDTH=78px HEIGHT=1px></TD>
148 </TR>
149 <TR HEIGHT=34px>
150 <TD WIDTH=154px bgcolor="#EDEDED" id="tickets" onMouseOver="switchImage('nav_facts', './img/nav_facts2.gif'); ChangeColor('tickets','#FFF')" onMouseOut="switchImage('nav_facts', './img/nav_facts.gif'); ChangeColor('tickets','#EDEDED')"><A HREF="javascript:location.href='tickets.html';" ONFOCUS="blur();"><IMG name="nav_facts" SRC=./img/nav_facts.gif WIDTH=105 HEIGHT=23 hspace="9" BORDER=0px></A></TD>
151 </TR>
152 <TR HEIGHT=1px>
153 <TD WIDTH=154px BACKGROUND=./img/marker2_w.gif><IMG SRC=./img/marker2_w.gif WIDTH=78px HEIGHT=1px></TD>
154 </TR>
155 <TR HEIGHT=34px>
156 <TD WIDTH=154px bgcolor="#EDEDED" id="survey" onMouseOver="switchImage('nav_survey', './img/nav_survey2.gif'); ChangeColor('survey','#FFF')" onMouseOut="switchImage('nav_survey', './img/nav_survey.gif'); ChangeColor('survey','#EDEDED')"><A HREF="javascript:location.href='survey.html';" ONFOCUS="blur();"><IMG SRC=./img/nav_survey.gif name="nav_survey" WIDTH=107 HEIGHT=32 hspace="8" BORDER=0px></A></TD>
157 </TR>
158 <TR HEIGHT=1px>
159 <TD WIDTH=154px BACKGROUND=./img/marker2_w.gif><IMG SRC=./img/marker2_w.gif WIDTH=78px HEIGHT=1px></TD>
160 </TR>
161 </TABLE>
162 </TD>
163 <TD WIDTH=20px><IMG SRC=./img/blank_5x5.gif WIDTH=20px HEIGHT=5px></TD>
164 <TD WIDTH=434px HEIGHT="600px" VALIGN=TOP id="main"><DIV
165 <!--
/
/ ### ENTER CONTENT HERE
###
/
/-->
166 <p class="headline">Template</p>
167 [CONTENT]
168 </DIV>
169 </TD>
170 <TD WIDTH=20px><IMG SRC=./img/blank_5x5.gif WIDTH=20px HEIGHT=5px></TD>
171 <TD WIDTH=151px VALIGN=TOP>
172 <TABLE WIDTH=151px BORDER=0px CELLSPACING=0px CELLPADDING=0px>
173 <TR HEIGHT=1px>
174 <TD WIDTH=1px BACKGROUND=./img/marker2_t.gif ROWSPAN=11 VALIGN=TOP><IMG SRC=./img/marker2_t.gif WIDTH=1px HEIGHT=30px></TD>
175 <TD WIDTH=151px BACKGROUND=./img/marker2_w.gif><IMG SRC=./img/marker2_w.gif WIDTH=78px HEIGHT=1px></TD>
176 </TR>
177 <TR HEIGHT=25px>
178 <TD WIDTH=150px BGCOLOR=#A9B8BF><FONT COLOR=#41545D FACE=Verdana SIZE=2>
<B>[TITLE]</B></FONT></TD>
179 </TR>
180 <TR HEIGHT=154px>
181 <TD WIDTH=150px>[IMAGE]</TD>
182 </TR>
183 <TR>
184 <TD WIDTH=150px>
185 <TABLE WIDTH=150px BORDER=0px CELLSPACING=0px CELLPADDING=3px>
186 <TR>
187 <TD><DIV>[INTRO]<BR>
<A HREF=info ONFOCUS="blur();" STYLE="text-decoration:none;">Read more...</A></DIV></TD>
188 </TR>
189 </TABLE>
190 </TD>
191 </TR>
192 <TR HEIGHT=17px>
193 <TD> </TD>
194 </TR>
195 <TR HEIGHT=1px>
196 <TD WIDTH=150px BACKGROUND=./img/marker2_w.gif><IMG SRC=./img/marker2_w.gif WIDTH=78px HEIGHT=1px></TD>
197 </TR>
198 <TR HEIGHT=25px>
199 <TD WIDTH=150px BGCOLOR=#A9B8BF><FONT COLOR=#41545D FACE=Verdana SIZE=2>
<B>[TITLE]</B></FONT></TD>
200 </TR>
201 <TR HEIGHT=154px>
202 <TD WIDTH=150px>[IMAGE]</TD>
203 </TR>
204 <TR>
205 <TD WIDTH=150px>
206 <TABLE WIDTH=150px BORDER=0px CELLSPACING=0px CELLPADDING=3px>
207 <TR>
208 <TD>[INTRO]<BR>
<A HREF=info ONFOCUS="blur();" STYLE="text-decoration:none;">Read more...</A></TD>
209 </TR>
210 </TABLE>
211 </TD>
212 </TR>
213 </TABLE>
214 </TD>
215 </TR>
216 </TABLE>
217 <
/DIV>
218 <TABLE WIDTH=780px HEIGHT=17px BORDER=0px CELLSPACING=0px CELLPADDING=0px BGCOLOR=#EDEDED>
219 <TR HEIGHT=17px>
220 <TD ALIGN=RIGHT><FONT COLOR=BLACK FACE=Verdana SIZE=1><a rel="Copyright" href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2012 <a href="https://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.org/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>)</FONT></TD>
221 </TR>
222 </TABLE>
223 <TD WIDTH=10px BACKGROUND=./img/border_right.gif><IMG SRC=./img/border_right.gif WIDTH=10px></TD>
224 </TR>
225 <TR HEIGHT=10px>
226 <TD WIDTH=10px HEIGHT=10px BACKGROUND=./img/border_bottom_left.gif><IMG SRC=./img/border_bottom_left.gif WIDTH=10px HEIGHT=10px></TD>
227 <TD WIDTH=780px HEIGHT=10px BACKGROUND=./img/border_bottom.gif><IMG SRC=./img/border_bottom.gif HEIGHT=10px></TD>
228 <TD WIDTH=10px HEIGHT=10px BACKGROUND=./img/border_bottom_right.gif><IMG SRC=./img/border_bottom_right.gif WIDTH=10px HEIGHT=10px></TD>
229 </TR>
230 </TABLE>
231 </TD></TR></TR></TABLE>
232 </div>
233 <div id="meta-footer" class="meta">
234 <hr>
235 <p><strong>Status:</strong> 20 February 2012 (see <a href="../changelog.html">changelog</a>) <br>Editors: <a href="https://www.w3.org/People/shadi/">Shadi Abou-Zahra</a> and the <a href="https://www.w3.org/WAI/EO/">Education and Outreach Working Group (EOWG)</a>. <br>Developed with support from <a href="https://www.w3.org/WAI/TIES/"><acronym title="Web Accessibility Initiative: Training, Implementation, Education, Support">WAI-TIES</acronym></a> and <a href="https://www.w3.org/WAI/WAI-AGE/"><acronym title="Web Accessibility Initiative: Ageing Education and Harmonisation">WAI-AGE</acronym></a> projects, co-funded by the European Commission <acronym title="Information Society Technologies">IST</acronym> Programme. [see <a href="../acks.html">Acknowledgements</a>]</p>
236 <p>[<a href="https://www.w3.org/WAI/sitemap.html" shape="rect">WAI Site Map</a>] [<a href="https://www.w3.org/WAI/sitehelp.html" shape="rect">Help with WAI Website</a>] [<a href="https://www.w3.org/WAI/search.php" shape="rect">Search</a>] [<a href="https://www.w3.org/WAI/contacts" shape="rect">Contacting WAI</a>] <br><strong>Feedback welcome to <a href="mailto:wai-eo-editors@w3.org" shape="rect">wai-eo-editors@w3.org</a></strong> (a publicly archived list) or <a href="mailto:wai@w3.org" shape="rect">wai@w3.org</a> (a WAI staff-only list).</p>
237 <div class="copyright"><p><a rel="Copyright" href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2012 <a href="https://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.org/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>, <a rel="Copyright" href="https://www.w3.org/Consortium/Legal/copyright-documents">document use</a> and <a rel="Copyright" href="https://www.w3.org/Consortium/Legal/copyright-software">software licensing</a> rules apply. Your interactions with this site are in accordance with our <a href="https://www.w3.org/Consortium/Legal/privacy-statement#Public">public</a> and <a href="https://www.w3.org/Consortium/Legal/privacy-statement#Members">Member</a> privacy statements.</p></div>
238 </div>
239 <!-- Piwik -->
240 <script type="text/javascript">
241 var _paq = _paq || [];
242 _paq.push(["setDomains", ["*.www.w3.org/WAI"]]);
243 _paq.push(['trackPageView']);
244 _paq.push(['enableLinkTracking']);
245 (function() {
246 var u="//www.w3.org/analytics/piwik/";
247 _paq.push(['setTrackerUrl', u+'piwik.php']);
248 _paq.push(['setSiteId', 328]);
249 var d=document, g=d.createElement('script'),
250 s=d.getElementsByTagName('script')[0];
251 g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js';
252 s.parentNode.insertBefore(g,s);
253 })();
254 </script>
255 <noscript><p><img src="//www.w3.org/analytics/piwik/piwik.php?idsite=328"
256 style="border:0;" alt="" /></p></noscript>
257 <!-- End Piwik Code -->
258</body>
259</html>