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

1 对于网页中非文字的听觉与视觉内容，应提供相等内容的替代文字(如透过"alt"、"longdesc")。视觉的内容包含图片、影像地图区域、applets、objects、ASCll art等，而听觉的内容包含声音、音乐与各项音效等。[第一优先等级]

1-1 替代文字

文字不论经由荧幕阅读器(screen readers)、非视觉性浏览器(non-visual browsers)或点字阅读器(braille displays)的解读，对于大部分的使用者而言都是具有可及性的。如果网页内容包含一些非文字的信息(如图片、applets、声音、多媒体等)，则需提供相等的替代文字说明。
应确保替代文字说明与原始内容有相等的信息。对于简单的网页内容，可以使用alt属性提供简短的替代文字说明；若是复杂的网页内容，应该使用longdesc属性提供较长且完整的文字叙述。另外，对于企业识别(logos)、图片、按钮、附属小程序(applets)、条列项目图示、ASCll art、以及在影像地图中的所有连结，都应该提供替代文字说明。

1-2条列项目图片的替代文字

应该避免在DL、DT与DD标签中，只为视觉美观而利用图片作为条列项目图示。然而，对于已作为条列项目图示的图片，则应该使用alt属性提供适当的替代文字说明。
下面改善的设计，是使用alt属性对于作为条列项目图示(gov-gif)提供替代文字：
改善的设计： 
<DL>
  <DD><IMG src="gov-gif" alt="*">行政院本会</DD>
  <DD><IMG src="gov-gif" alt="*">行政院劳委会</DD>
  <DD><IMG src="gov-gif" alt="*">行政院农委会</DD>
</DL>
    网页开发者应该避免透过条列项目图式提供额外的信息，然而，如果已经有透过条列项目图示传达额外的信息时，则同样应该使用alt作适当完整的说明。
改善的设计：
<DL>
  <DD><IMG src="red-gif" alt="新的造型：">休闲雅痞型</DD>
  <DD><IMG src="yellow-gif" alt="旧的造型：">古板上班族</DD>
</DL>

1-3图片连结的替代文字

当图片作为连结时，必须使用alt属性提供此图片的替代文字说明。
正确范例： 
  <A href="aboutme-html">
<IMG src="lala-gif" alt="菈菈从小到大的成长过程">
</A>

1-4图片的简短替代文字

当使用IMG标签时，应透过alt属性提供替代文字说明。
正确范例：
<IMG src="view-jpg" alt="山谷中和风餐馆的照片">

当使用OBJECT标签时，应在OBJECT标签间提供替代文字说明。
正确范例：
<OBJECT data="view-jpg" type=" image/jpg">
山谷中和风餐馆的照片
</OBJECT>

1-5图片的较长文字叙述

 当alt的文字陈述超过150个英文字符，无法以简短的替代文字传递讯息时，则应该透过longdesc属性连结至另一网页，以单独叙述的方式提供完整的文字说明。
正确范例：
<IMG src="aboutweb-gif" alt="台北大学网络发展小组" longdesc=" aboutweb-html ">

在aboutweb-html网页上放置完整的文字说明：

不过，由于有些浏览器无法辨别longdesc，所以除了在IMG标签中使用longdesc以外，网页上应该提供额外的描述性连结，确保使用者可以获得longdesc中的文字内容，建议可于图片旁提供说明页的文字连结。
正确范例：
<IMG src="coffee-gif" alt="咖啡共和国网站" longdesc="coffee-html">
<A href="coffee-html">详细说明</A>

在coffee-html网页中提供详细文字说明：
咖啡共和国是一个介绍咖啡相关信息的网站，内容包含咖啡文化、咖啡豆种类、煮泡方式等信息，能让咖啡迷们全面性的了解所有与咖啡相关的知识。

正确范例：
<OBJECT data="coffee-gif" type=" image/gif"> 
<A href="coffee-html">咖啡共和国</A>是一个介绍咖啡相关信息的网站，内容包含咖啡文化、咖啡豆种类、煮泡方式、产地等信息的介绍，能让咖啡迷们全面性的了解所有与咖啡相关的知识。
</OBJECT>

当使用OBJECT时，同样应该在OBJECT标签中提供完整的文字叙述。
 如果信息是以图表的方式呈现时，网页开发者应该在OBJECT标签中，提供此图
表的文字说明页。
正确范例：
<OBJECT data="e1-gif" type= "image/gif">
图表： 
<A href="e_url-html">企业推动e-learning最常遭遇的困难文字说明</A>
</OBJECT>
在e_url-html网页上提供了完整的文字叙述：
企业推动e-learning最常遭遇的困难包括：
1.    缺乏高阶主管支持 43 %
2.    成本因素 35%
3.    缺乏完善规划 32%
4.    企业文化障碍 30%
5.    优先级错误 29%
6.    企业策略无法配合 28%

1-7附属小程序(applets)及物件(objects)的文字及非文字替代说明

如果使用OBJECT标签时，则应该在OBJECT标签中提供替代文字说明。下面的例子是在OBJECT标签中对于马鞍藤植物介绍的影片（bubu01-asf）内容提供文字介绍。
正确范例：
<OBJECT>
    <PARAM name="AnimationatStart" value="true">
    <PARAM name="AutoStart" value="true">
    <PARAM name="ShowControls" value="true">
    <PARAM name="ShowStatusBar" value="false">
    <PARAM name="FileName" value="bubu01-asf">
    <PARAM name="ClickToPlay" value="false">
    <EMBED src="media/bubu01-asf"></EMBED >
    植物马鞍藤的介绍影片：马鞍藤是属于旋花科，和牵牛花是亲戚，为多年生的……
</OBJECT>

    下一个例子则是在OBJECT标签中提供几种不同的呈现方式，依序第一种是以java的方式呈现，第二种是以影音(-mpeg)的方式呈现，第三种是以图片(-gif)的方式呈现，最后是提供替代文字说明。这种替代方式的设计是希望使用者的浏览器在不支持第一种呈现方式(-java)时，会以第二种方式呈现(-mpeg)；而若是也不支持第二种方式时，则会以第三种方式呈现(-gif)---等等以此类推。
正确范例：
<OBJECT classid="java: bubu01-class" width="500" height="500">          
     <OBJECT data=" bubu01-mpeg" type="video/mpeg">
        <OBJECT data=" bubu01-gif" type="image/gif">

 植物马鞍藤的介绍影片：马鞍藤是属于旋花科，和牵牛花是亲戚，为多年生的……
        </OBJECT>
     </OBJECT>
  </OBJECT>
    由于不是所有浏览器都支持APPLET，因此当网页中使用APPLET时，需要使用alt属性，同时也要在APPLET的标签中间提供替代文字说明。
 植物马鞍藤的介绍影片：马鞍藤是属于旋花科，和牵牛花是亲戚，为多年生的……
        </OBJECT>
     </OBJECT>
  </OBJECT>

1-9对网页页框的内容提供说明

在FRAMSET标签或FRAME标签中，可以使用title及longdesc两种属性替页框内容提供说明。
正确范例：
<FRAMESET rows="20%,*">
<FRAME src="promo-html" name="promo" title="政府倡导广告的页框"
longdesc="promo_desc-html">
    <FRAME src="news-html" name="news" title="显示国内新闻的页框" longdesc="news_desc-html">
<NOFRAMES>
<A href="promo-html">政府倡导广告的页框</A>
<A href="news-html">显示国内新闻的页框</A>
</NOFRAMES>
</FRAMESET>
pomo_desc-html可提供类似下列的信息：
本页框提供政府倡导广告的连结：禁烟、禁止酒后驾车、节约用水及饭前洗手，饭后漱口。
news_desc-html会提供类似下列的信息：
本页框提供国内各种新闻的连结：社会新闻、体育新闻、地方新闻、科技新
闻及娱乐新闻。

1-10指定不支持页框时的办法

    不是所有的浏览器全部都可以支持视窗分割，因此如果使用分割视窗呈现网页内容时，必须另外指定不支持页框时的办法。下面范例为即使网页浏览器不支持FRAME标签，使用者仍可以读取NOFRAMES标签中网页内容的方法。

正确范例：
<FRAMESET cols="40%,*" title="向日葵咖啡馆年度业绩">
    <FRAME src="month-html" title="每月业绩">
    <FRAME src="coffee-html" title="每月咖啡业绩销售量" >
    <NOFRAMES>
      <A href="table_of_coffee-html">向日葵咖啡馆年度业绩</A>
      <!--显示向日葵咖啡馆业绩信息的超连结，可以在这里显示。-->
    </NOFRAMES>
</FRAMESET>

1-11图像式的按钮

当表单中的按钮以图像呈现时（可用INPUT或BUTTON标签），应该提供图片的替代文字说明。然而当图像式的按钮透过INPUT标签与type="image"属性的设计时则形成服务器端影像地图。在图片与影像地图部分，曾提过应该以用户端影像地图取代服务器端，因此如果必须使用服务器端影像地图时，可参考以下的替代方式，以便于纯文字浏览器读取网页内容：
   针对不同的作用区域使用不同的按钮，且必须以不同的替代文字说明分别描述按钮的功能，以便使用者分辨。
   用户端影像地图与附属应用程序(scripting)并用。
下面的范例是将影像地图中的两个功能按键各自拆开，设计成各自独立的「搜寻」和「重新输入」两个图像按键并且分别提供替代文字说明。
正确范例︰  
<FORM>
  <INPUT type="text" name="keyword2" value="输入搜寻字符串">
  <INPUT name="Submit" type="image" src="botton1-gif" alt="搜寻">
  <INPUT name="Clear" type="image" src="botton2-gif" alt="重新输入">
</FORM>

1-12 Script的替代呈现方式

由于部分浏览器不支持附属应用程序，因此网页上使用script提供网页内容的同时，必须透过NOSCRIPT标签提供相同内容的替代文字网页。
正确范例：
<SCRIPT type="text/tcl">
… (以Tcl Script显示昨天NBA公牛队与爵士队的分数) …
</SCRIPT>
<NOSCRIPT>
<P>昨天NBA公牛队与爵士队比赛的结果：</P>
</NOSCRIPT >

DL>
    <DT>公牛队95分，爵士队85分</DT>
    <DD><A href="bulljazz-html">公牛与爵士</A></DD>
……其他分数资料……
</DL>
</NOSCRIPT >

2采用多媒体时，必须提供同步语音或替代文字说明[第一优先等级]

2-1语音信息

网页上应用多媒体呈现重要信息时，应同时提供可阅读的替代文字或是可聆听的旁白说明，例如提供听障者同步字幕，以及提供视障者语音旁白。有一些技术，就如Quick Time , SMIL及SAMI，都是可以提供语音/视讯字幕在多媒体中同时结合呈现，以利视/听障者获得视讯中的信息。

正确范例：
以下场景取自ET影片，影片中电话铃声响起，然后有人接听电话。旁白同步提供电话响起的字幕与提示铃响的字幕。
[铃声响起]
[铃…]  
[铃…]
哈囉？请问找谁？

2-2具可及性的附属小程序(applets)

如果使用附属小程序，网页开发者应该要提供替代办法或确保其可行性。例如呈现动作效果时，网页上应该提供控制其动作的机制。
以下举例示范在APPLET标签中设定alt属性提供替代文字说明（此Applet在网页上将value中的文字作彩虹效果）：
正确范例：
<APPLET code="RainbowText-class" codebase="script/"   
  width="440" height="40" align="baseline" alt="无障碍网络空间服务网！">
    <PARAM name="text" value="无障碍网络空间服务网！">
</APPLET>

无障碍网页设计技术

• 规范一、对于听觉及视觉内容要提供相等的替代文字内容
• 规范二、不要单独靠色彩来提供特殊信息
• 规范三、适当地使用标记语言和样式表单
• 规范四、阐明自然语言的使用
• 规范五、建立编排良好的表格
• 规范六、确保网页能在新科技下良好地呈现
• 规范七、确保使用者能处理时间敏感内容的改变
• 规范八、确保嵌入式使用者界面具有直接可及性
• 规范九、设计装置独立网页
• 规范十、使用过渡的解决方案
• 规范十一、使用国际与国内官方订定的技术和规范
• 规范十二、提供内容导引信息
• 规范十三、清楚的浏览网站机制
• 规范十四、确保简单清楚的网页内容