无障碍网页设计技术手册规范九

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

无障碍网页设计技术

点击此查看-->手机端无障碍工具条演示(仅手机端打开)
点击此查看-->PC端无障碍工具条演示(仅PC端打开)
点击此查看-->我们能提供的信息无障碍服务
点击此查看-->无障碍工具条授权方式和区域代理
点击此查看-->相关服务报价参考

无障碍网页设计技术手册规范九

热门