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

6-1确保在样式表无法呈现时仍可以阅读网页内容[第一优先等级]

确保网页内容在样式表无法使用时仍可以阅读，也就是说一份网页文件在透过不支援样式表的浏览器，仍可以正确地提供使用者网页信息。

6-1-1关于所呈现的内容同3-1-3

6-1-2分隔线与边框线

分隔线(Rules)与边框线(borders)可以呈现"分隔"的视觉效果，但是若不以视觉呈现的方式传达网页内容时，分隔线与边框线便没有意义。因此建议网页开发者应该使用样式表，定义分隔线(Rules)与边框线(borders)，以下为使用CSS属性定义边框样式的几项方式：
"border"、"border-width"、"border-style"、"border-color"。
"border-spacing"及"border-collapse"。
"outline"、"outline-color"、"outline-style"及"outline-width"。
正确范例：
<HEAD>
<TITLE>月收入</TITLE>
<STYLE type="text/css">
H1{padding-top: 1em; border-top: 2px}
</STYLE>
</HEAD>


     如果使用分隔线(如HR属性)呈现结构时，应确保视障者在语音或是纯文字浏览器的辅助下，仍是可以获得网页信息(如使用有结构的标记语言)。
正确范例：
<DIV class="navigation-bar">
<HR>
<A rel="MTV" href=f"mtv-html">[MTV]</A>
<A rel="Movie" href="movie-html">[电影]</A>
<A rel="Music" href="music-html">[音乐]</A>
</DIV>

6-1-3适当地使用网页语言及样式表呈现网页内容

使用CSS2中的定位属性，可以设定文字内容在网页上的指定位置。以下例子说明使用CSS样式表应注意的原则：
确保网页在移除CSS样式表之后，使用者仍然可以辨读正确的网页内容。
一般使用TABLE标签所呈现的表格效果，可以使用CSS的定位属性来表现同样的效果。
       以下举例在一个网页上，使用CSS做两组资料的呈现：
       在不注意CSS设计的原则时，若采用以下不良设计：
不良设计：
<HEAD>
<STYLE type="text/css">
  -menu1{position: absolute; top: 3em; left: 0em; 
           margin: 0px; font-family: sans-serif; 
           font-size: 120%; color: red; background-color: white}  


-menu2{position: absolute; top: 3em; left: 10em; 
           margin: 0px; font-family: sans-serif; 
           font-size: 120%; color: red; background-color: white}
  -item1{position: absolute; top: 7em; left: 0em; margin: 0px}
  -item2{position: absolute; top: 8em; left: 0em; margin: 0px}
  -item3{position: absolute; top: 9em; left: 0em; margin: 0px}
-item4{position: absolute; top: 7em; left: 14em; margin: 0px}
-item5{position: absolute; top: 8em; left: 14em; margin: 0px}
  -item6{position: absolute; top: 9em; left: 14em; margin: 0px}
  -box{position: absolute; top: 5em; left: 5em} 
</STYLE>
</HEAD>
<BODY>
<DIV class="box">
  <SPAN class="menu1">DVD出租排行榜</SPAN> 
  <SPAN class="menu2">VCD出租排行榜</SPAN> 
<SPAN class="item1">绿巨人浩克</SPAN>
<SPAN class="item2">魔鬼终结者3</SPAN>
<SPAN class="item3">王牌天神</SPAN> 
<SPAN class="item4">海底总动员</SPAN> 
  <SPAN class="item5">霹雳娇娃2</SPAN>
<SPAN class="item6">绿巨人浩克</SPAN>
</DIV>
</BODY>

当上述的例子当样式表不被支持时，所有的内容则会呈现为一直线的文字。
不良设计的结果显示：
DVD出租排行榜VCD出租排行榜绿巨人浩克魔鬼终结者3王牌天神绿……

    同样内容的呈现，接下来的范例使用有结构性的标记标签(DL)在CSS支持时，可以达到欲呈现的网页结果，并且在浏览器不支持CSS样式表时，仍可以清楚传达网页内容。
正确范例：

<HEAD>
<STYLE type="text/css">
  -menu1{position: absolute; top: 3em; left: 0em; 
        margin: 0px; font-family: sans-serif; 
        font-size: 120%; color: red; background-color: white}  
  -menu2{position: absolute; top: 3em; left: 10em; 
        margin: 0px; font-family: sans-serif; 
        font-size: 120%; color: red; background-color: white}
-item1{position: absolute; top: 7em; left: 0em; margin: 0px}
-item2{position: absolute; top: 8em; left: 0em; margin: 0px}
  -item3{position: absolute; top: 9em; left: 0em; margin: 0px}
  -item4{position: absolute; top: 7em; left: 14em; margin: 0px}
-item5{position: absolute; top: 8em; left: 14em; margin: 0px}
-item6{position: absolute; top: 9em; left: 14em; margin: 0px}
  -box{position: absolute; top: 5em; left: 5em} 
</STYLE>
</HEAD>
<BODY>
<DIV class="box">
<DL>
  <DT class="menu1">DVD出租排行榜</DT>
    <DD class="item1">绿巨人浩克</DD>
    <DD class="item2">魔鬼终结者3</DD>
    <DD class="item3">王牌天神</DD>
  <DT class="menu2">VCD出租排行榜</DT>
   <DD class="item4">海底总动员</DD>
   <DD class="item5">霹雳娇娃2</DD>
<DD class="item6">绿巨人浩克</DD>
</DL>
</DIV>
</BODY>


不支持CSS时，正确范例的结果显示：
    DVD出租排行榜  
绿巨人浩克       
魔鬼终结者3      
王牌天神
VCD出租排行榜
海底总动员
霹雳娇娃2        
绿巨人浩克

6-2确保当动态网页更新时，替代网页也能同时更新[第一优先等级]

6-2-1对于附属应用程序(applets)及物件(objects)提供文字及非替代文字说明同1-1-7

6-2-2页框来源

当页框中的网页内容改变时，其替代文字内容也必须同时更新。所以，网页的页框不应该直接连结到某个图像或是物件，而是应该连结到HTML档案，档案中再包含该图像或是物件，并且提供替代文字，才能确保动态网页与替代网页间的一致性。
以下为不良设计，应避免页框直接连结到某个图像或是物件：
不良设计：
<FRAMESET cols="100%" title="FRAM logo">
<FRAME name="badframe" src="logo-jpg" title="标章">
</FRAMESET> 


以下为正确范例，页框直接连结到HTML档案：
正确范例：
<FRAMESET cols="100%" title="FRAM logo">
<FRAME name="goodframe" src="logo-html" title="标章">
</FRAMESET> 
<!--在logo-html -->
<P><IMG src="logo-gif" alt="无障碍网络标章"></P>

6-2-3 Script的替代呈现方式同1-1-12

6-3若网页内的程序物件没有作用时，确保网页内容仍然可以传达[第一优先等级]

6-3-1对于附属小程序(applets)及物件(objects)提供文字及非替代文字说明同1-1-7

6-3-2具可及性的scripts

网页事件驱动设计是script的一种，这种script是用在某些事件(如移动鼠标、使用键盘按键、下载档案等)被启动时。在HTML4-01中，网页事件驱动设计乃是透过事件驱动属性(这种属性通常是以"on"为开始，如"onkeyup")。
有一些事件驱动乃是为了要达到装饰的效果(如透过强光强调图片或是改变文字的颜色)，也有一些使用事件是为了达到更多文字内容的效果(如完成计算、提供使用者重要的信息或是提供表单)，因此当网页物件使用事件驱动时，网页开发者应该注意以下几点：
使用应用层级(application-level)的事件驱动装置(triggers)而应避免使用互动层级(interaction-level)的事件驱动装置。在HTML4-01中，应用层级的属性有"onfocus"、"onblur"以及"onselect"。
如果必须使用单一独立的驱动装置时，网页开发者应该要提供替代的驱动装置，也就是针对相同的元件提供两种事件驱动装置，如下(Use指的是要透过鼠标的操作，而with乃是提供除了鼠标操作外，亦可以透过键盘的使用启动事件驱动装置)：
Device Handler Correspondences
Use---    ---with
onmousedown    onkeydown
onmouseup    onkeyup
onclick    onkeypress
onmouseover    onfocus
onmouseout    onblur

勿设计只能透过单一驱动装置启动事件，如只能使用鼠标启动。
实际范例请参见9-3-1。

6-4使用scripts与applets时，确保事件驱动不需依赖某特定装置[第二优先等级]

6-4-1结构与呈现同2-1-1

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

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

6-5当程序物件没有作用时，确保网页内容仍然可以传达[第二优先等级]

6-5-1替代的网页

提供具可及性的替代技术，如下：
引导使用者至相同内容的无障碍网页。
使用服务器端的script建立无障碍网页，在有需求时提供给使用者。
可参考Frames及Scripts所提供的替代技术，例如Frames使用NOFRAME标签、Scripts使用NOSCRIPT标签提供替代的网页。
提供网页24小时咨询服务，如电话号码、传真号码、电子邮件或是通讯地址。
以下两点是如何连结至另一替代网页的技术：
设定原始与替代网页彼此间的连结，以便使用者来回两个网页。
使用META标签指定可替代的网页。浏览器会依照使用者的浏览器种类或是预设值，自动读取可替代的网页。

6-5-2语音信息同1-4-1

6-5-3 LINK标签与可替代的网页

LINK标签可以用来指定可替代的网页。依照使用者的浏览器种类或是预设值，自动读取可替代的网页。
正确范例：

<HEAD>
<TITLE>台北花火秀</TITLE></HEAD>
<LINK title="Text-only version" rel="alternate"
      href="text_only" media="aural, braille, tty">
</HEAD>

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

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

6-5-6附属应用程序(scripts)的适度转换

当浏览器不支持附属应用程序(scripts)时，网页开发者必须确保网页可及性。应该注意下列两点：
避免使用突然飞进来的内容，因为当使用者的浏览器无法处理scripts时，则无法辨读网页内容。
避免使用"javascript"作为超连结，因为当scripts无法使用时，此连结则会成为无效连结。
不良设计：
<A href="javascript：loder('aboutweb-html')">网络发展小组</A>

无障碍网页设计技术

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

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

热门