规范九、设计装置独立网页

9-1应提供用户端影像地图替代服务器端影像地图的连结[第一优先等级]

在网页上应尽量使用usemap属性的客户端影像地图来代替服务器端影像地图(ismap)的设计,下面范例是同时使用服务器端影像地图及客户端影像地图,当浏览器不支持服务器端影像地图时,浏览器会使用客户端影像地图来替代。
正确范例:
<A href="cgi-bin/imagemap/map2-txt">
<IMG src="images/map2-gif" alt="台湾三大入口网站影像地图" usemap="#map1" ismap>
</A>
<MAP name="map1"> 
<AREA shape="rect" coords="10,8,158,86" href="http://www-yahoo-com-tw" alt="Yahoo!奇摩网">
  <AREA shape="rect" coords="161,8,309,86" href="http://www-pchome-com-tw" alt="PChome">
  <AREA shape="rect" coords="311,8,460,86" href="http://www-yam-com-tw"
 alt="蕃薯藤">
</MAP>

9-2确保所有元件的操作界面,可不必依靠特定启动装置[第二优先等级]

特地启动装置」指的是特别指定某一种装置,例如必须用鼠标才能启动,而使用其他设备如键盘就不能作用的设计,就是得依靠特定启动装置的设计,也是在无障碍网页中应该被避免的。

9-2-1具可及性的scripts同6-3-2

9-2-2具可及性的附属小程序(applets)同1-4-2

9-3应该指定具逻辑性的事件启动装置,而不是依赖性的事件启动装置[第二优先等级]

9-3-1独立性启动装置与依赖性启动装置

网页上启动装置简单地区分成以下两类:
1-独立性(device-independent):具逻辑性,不须依赖某一种装置的设计,使用应用层级的属性,如"onfocus"、"onblur"以及"onselect"。
2-依赖性(device-dependent):具使用互动层级的属性,如"onmouseover"及"onclick",是依赖某种单一启动装置的设计,例如必须透过鼠标才能操作的设计。
下面的第一个例子就是依赖性驱动装置的设计,只有使用鼠标(onmouseover)将游标移至该图片时,才会出现设计的效果(跑出Boxster的命名缘由说明)。
不良设计:
<IMG onmouseover="alert('车款Boxster的命名缘由------')"
     src="boxster01-jpg">
     下面的第二个例子则是独立性驱动装置的设计,不仅可以透过鼠标的游标亦可以使用Tab键移动至该图片,启动该图片所设定的效果(跑出Boxster的命名缘由说明)。
正确范例:
<IMG onmouseover="alert('车款Boxster的命名缘由------')" 
     onfocus="alert('车款Boxster的命名缘由------')"  tabindex="2"
     src="boxster01-jpg">

9-3-2具可及性的scripts同6-3-2

9-3-3具可及性的附属小程序(applets)同1-4-2

9-4 透过连结、表单与物件提供Tab键操作顺序[第三优先等级]

9-4-1键盘便捷键的设定

键盘便捷键的设定对于只能以键盘操作的使用者而言(如肢体障碍者以及视觉障碍者),是非常重要的。举例来说,当肢体障碍者无法有效率的使用鼠标时,可透过便捷键的设计,如按下Alt+C即可连到定义accesskey="C"的连结区块。因此,网页开发者应提供便捷键的操作,以利使用者能使用便捷键顺利浏览网页内容。"accesskey"就是在HTML第四版之后新增的属性,作为设计便捷键的功能。
正确范例:
<A accesskey="C" href="intro-html" title="连结至网站导览说明">中央区块</A>

9-4-2表单中便捷键的设定

表单中便捷键可以透过tabindex属性设定Tab键移动的顺序。下列的范例即以tabindex属性设定Tab键在表单中元件的移动顺序为:field2 – field1 - submit。
正确范例:
<FORM action="submit" method="post">
  <P>
<INPUT tabindex="2" type="text " name="field1">
<INPUT tabindex="1" type="text " name="field2">

<INPUT tabindex="3" type="submit " name="submit">
</P>
</FORM>

     下一个例子,则是示范几个便捷键的设定。对于"使用者名称"设定便捷键为alt+"U"、"性别"设定为alt+"S"及"建议事项"设定为alt+"X",使用者可利用便捷键的设定,迅速地将游标移动至表单中各个栏位。
正确范例:
<FORM action="submit" method="post">
  <LABEL for="user" accesskey="U">使用者名称:</LABEL>
<INPUT type="text " id="user" value="输入您的姓名" >
<FIELDSET accesskey="S">
    <legend>性别:</legend>
     <INPUT name="sex" type="radio" id="male" checked>
<LABEL for="male">男性</ LABEL >
<INPUT type="radio" name="sex" id="female">
<LABEL for="female">女性</LABEL>
</FIELDSET>
<LABEL for="com" accesskey="X">建议事项:</LABEL>
  <INPUT name="comment" type="text" id="com" value="输入您的建议事项">
</FORM>

9-5对于重要的连结提供键盘便捷键的设定[第三优先等级]

9-5-1键盘便捷键的设定同9-4-2

9-5-2表单中便捷键的设定同9-4-3


标签:信息无障碍 无障碍规范 无障碍设计 无障碍网页