This page is out of date, we cannot guarantee the accuracy of the content.

Sample code for "1194.22 Web based intranet and Internet information and applications"

Content last updated: 29 August 2007

(a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

Sample and Description:

ZK Zul Code

	<image id="image" src="/img/sun.jpg" alt="Sunny day" />

Generated HTML Code

	<img id="... src="img/sun/jpg" alt="Sunny day... />



(b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

Sample and Description:

ZK Zul Code

		<flash alt="Creative Commons Flash Clip" src="img/cc.swf" />
		<toolbarbutton label="transcript" href="http://www.cc.org/transcript.txt" />

Generated HTML Code

	<div class="wc-embedded-none" id="z_tf_141!cave" >
	<div z.type="zul.flash.Flash" style="" id="z_tf_241" alt="Creative Commons Flash Clip">
	<object width="" height="" id="z_tf_241!obj">
		<param value="img/cc.swf" name="movie"/>
		<param value="transparent" name="wmode"/>
		<embed width="" height="" wmode="transparent" type="application/x-shockwave-flash" src="img/cc.swf" id="z_tf_241!emb"/>
	</object>
	</div>
	<a role="wairole:button" href="http://www.cc.org/transcript.txt" z.type="zul.widget.Tbtn" id="z_tf_341">transcript</a>
	</div>


(e) Redundant text links shall be provided for each active region of a server-side image map.

Sample and Description:

ZK Zul Code

	<image id="image" src="../images/narbar.gif"" serverSideMap="/cgi-bin/imagemap/documentation/web/examples/imgmap/imgtest.map" 
	alt="Home Navigation Bar" usemap="map1" >

Generated HTML Code

	<a HREF="/cgi-bin/imagemap/documentation/web/examples/imgmap/imgtest.map">
	<img src="../images/narbar.gif" .. usemap="#Map" alt="Home Navigation Bar" ...></a>
More information about server side image map

(f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

Sample and Description:

ZK Zul Code

	
	<imagemap src="/img/planets.gif" id="myMap2">
		<area shape ="rect" coords ="0,0,82,126" />
		<area shape ="circle" coords ="90,58,3" />
		<area shape ="circle" coords ="124,58,8" />
	</imagemap>

Generated HTML Code

	<span role="wairole:group" z.cave="z_7o_2_map" z.type="zul.widget.Map" id="z_7o_2">
	<a target="zk_hfr_" href="/WAI/zkau/web/zul/html/imagemap-done.dsp?z_7o_2">
	<img src="/WAI/img/planets.gif" ismap="ismap" id="z_7o_2!real" usemap="#z_7o_2_map"/></a>
	<map id="z_7o_2_map" name="z_7o_2_map">
		<area z.aid="z__i" coords="0,0,82,126" shape="rect" 
		href="javascript:zkArea.onclick('z_7o_3')" z.type="Area" id="z_7o_3"/>
		<area z.aid="z__i" coords="90,58,3" shape="circle" 
		href="javascript:zkArea.onclick('z_7o_4')" z.type="Area" id="z_7o_4"/>
		<area z.aid="z__i" coords="124,58,8" shape="circle" 
		href="javascript:zkArea.onclick('z_7o_5')" z.type="Area" id="z_7o_5"/>
	</map>
	</span> 


(g) Row and column headers shall be identified for data tables.
(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

Sample and Description:

A ZK Grid Component is like this:
An image of a table with column name, phone#, email.

ZK Zul Code

	<grid width="400px">
		<columns>
			<column label="" />
			<column label="Phone#" />
			<column label="Email"/>
		</columns>
		<rows>
			<row>
				<label value="John Gasol" />
				<label value="626-989-0134" />
				<label value="johnGasol@home.com" />
			</row>
			<row>
				<label value="Sammy Kurkiko" />
				<label value="626-989-0145" />
				<label value="sammyKurkiko@home.com" />
			</row>
		</rows>
	</grid>

When the table header is in separate table from content table. The th elements in header table should be applied wairole = "rowheader"

Generated HTML Code

...
<div wairole="table" style="width: 400px;" class="grid" z.type="zul.grid.Grid" id="z_d2_2c1">
<div class="grid-head"  id="z_d2_2c1!head" style="width: 400px;">
	<table width="100%" cellspacing="0" cellpadding="0" border="0" style="table-layout: fixed;">
		<tbody><tr align="left" z.type="Cols" id="z_d2_3c1">
				<th scope="col" wairole="rowheader" z.type="Col" id="z_d2_4c1" style="width: 104px;"/>
				<th scope="col" wairole="rowheader" z.type="Col" id="z_d2_5c1" style="width: 99px;">Phone#</th>
				<th scope="col" wairole="rowheader" z.type="Col" id="z_d2_6c1" style="width: 179px;">Email</th></tr>
	</tbody></table>
</div>
	<div class="grid-body" id="z_d2_2c1!body" style="width: 400px;">
	<table width="100%" cellspacing="0" cellpadding="0" border="0" class="grid-btable">
		<tbody id="z_d2_7c1">
			<tr class="grid" id="z_d2_8c1">
			<td scope="row"  class="gc" id="z_d2_9c1!chdextr">
					<span id="z_d2_9c1">John Gasol</span></td>
			<td scope="row"  class="gc" id="z_d2_ac1!chdextr">
					<span id="z_d2_ac1">626-989-0134</span></td>
....



(i) Frames shall be titled with text that facilitates frame identification and navigation.

Sample and Description:

ZK Zul Code

	<iframe  src="https://www.google.com"  title="Search by google" />

Generated HTML Code

	<iframe id="..."  src="https://www.google.com"  title="Search by google" />


(k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.

Sample and Description:

ZK Zul Code

	<toolbarbutton label="Text Only" href="../text/textOnlyPage.htm" />

Generated HTML Code

	<a href="../text/textOnlyPage.htm" z.type="zul.widget.Tbtn" id="z_uf_281">Text Only</a>

NOSCRIPT

zk.xml

	<device-config>
		<device-type>ajax</device-type>
		<device-class>my.MyAjaxDevice</device-class>
		<timeout-uri>/my-timeout.zul</timeout-uri>
		<unavailable-message><![CDATA[
		<p style="color:red">Please refer to text-only page ...</p>
		]]></unavailable-message>
	</device-config>

Generated HTML Code

	...
	</head>
	<noscript><p style="color:red">Please refer to text-only page ...</p></noscript>
	<body>
	...


(m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with ¡±1194.21(a) through (l).

Sample and Description:

ZK Zul Code

	<flash src="SWF/cc.milestones.121503.swf" width="620" height="320" alt="this is cc milestones flash"></flash>

Generated HTML Code

	<object id="z_5v_2!obj" width="620" height="320" alt="this is cc milestones flash">
	<param value="SWF/cc.milestones.121503.swf" name="movie"/>
	<param value="transparent" name="wmode"/>
	<embed id="z_5v_2!emb" width="620" height="320" wmode="transparent" type="application/x-shockwave-flash" 
	src="SWF/cc.milestones.121503.swf"/>
	</object>


(n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

Sample and Description:

ZK Zul Code

InputElement:
	<textbox id ="name" label="Name:" />
	
Radio and Check Boxes:
	<radio label="Orange"/>
Tabindex:
	<textbox id ="name" label="Name:" tabindex = "1" />

Generated HTML Code

InputElement:
	<label for="z_bf_2s!real">Name:</label>
	<input id="z_bf_2s" type="text" z.type="zul.widget.Txbox"/>
Radio and Check Boxes:
	<input type="checkbox" id="z_k1_c8!real"/>
	<label for="z_k1_c8!real">Orange</label>
Tabindex:
	<label for="z_bf_2s!real">Name:</label>
	<input tabindex="1' id="z_bf_2s" type="text" z.type="zul.widget.Txbox"/>