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

13-1清楚地定义每个超连结的目标页框[第二优先等级]

13-1-1连结文字

文字连结不应该使用过于笼统的文字叙述，如"click here"或"更多"，因这类文字连结只适合在整体浏览网页时使用，而不适合经由键盘跳跃式地浏览网页时各别读取。所以，文字连结应该能更清楚地表达连结到的网页内容，例如"关于海狮的更多说明"会比"更多说明"清楚且适当。
除了清楚地定义每个超连结外，网页开发者可透过A标签中的title属性明确地说明超连结的信息内容。
正确范例：
<A href="aboutweb-html">我的研究作品</A>、
<A href="aboutweb-pdf" title="我的研究作品的PDF档" >PDF档</A>、
<A href="aboutweb-txt" title="我的研究作品的txt档" >TXT档</A>

    在同一个网页上，所有相同的文字连结都应该指到同样的网页内容，不应使用同样的文字叙述作连结却连到不同的地方。若有相同的文字连结必须连到不同的网页(或档案时)，则应利用A标签的title属性作适当说明以便区分。
正确范例：
<P>以下提供各书籍下载资料：</P>
 <DL>
  <DT><A href="com-html">『-com的策略规划与设计』</A></DT>
<DD><A href="com-doc"  title="『-com的策略规划与设计』Word档">
Word档</A> / 
<A href="com-pdf"  title="『-com的策略规划与设计』PDF档">
PDF档</A> / 
<A href="com-txt"  title="『-com的策略规划与设计』TXT档">
TXT档</A> / 
</DD>
<DT><A href="book-html">『第二本书』</A></DT>
<DD><A href="book-doc"  title="『第二本书』Word档">Word档</A> / 
<A href="book-pdf"  title="『第二本书』PDF档">PDF档</A> / 
<A href="book-txt"  title="『第二本书』TXT档">TXT档</A> / 
</DD>
  </DL>

视障者有几种不同的障别，有些是全盲、有些是无法阅读较小的字体、也有些无法阅读移动快速的文字，这些视障者无法用眼睛快速浏览网页内容，而通常在使用有声浏览器时，为了解网页全貌或找到某一个连结，他们通常使用Tab按键一一读取网页上的各连结。因此，对于一连串相关的连结，应该要在第一个连结提供这些连结的说明，然后在接下来的连结中用title属性详细说明，请参考以下范例：

13-2使用metadata提供网页及网站的相关信息[第二优先等级]

13-2-1 Metadata

Metadata传达的是网页内容的相关信息。好的Metadata可以提供使用者极为重要的信息，以下即为在HTML中可以提供的有用信息：
TITLE标签：设定网页的标题。
ADDERSS标签：提供网页的开发者相关信息。
META标签：提供网页文件资料，包含关键字及网页开发者的相关信息，同7-4-2。
DOCTYPE叙述：用以识别HTML版本类型，同3-2-1。
LINK标签与导览工具：使用LINK标签与link types描述网页导览的功能，同13-9-2。
LINK标签与可替代的网页：连结标签可以用来指定可替代的网页，同6-5-3。

13-2-2适当地使用条列以及条列项目同3-6

13-3提供有关于网站版面设计的信息(如网页地图或是文字表格)[第二优先等级]

13-3-1导览的信息

导览的机制(如网络地图Site Map)可以提供使用者清楚了解网页位置。透过导览列、网络地图与搜寻机制，一般使用者可以较轻易地阅读网页信息。然而对于较复杂的网站而言，身心障碍者便不易透过上述的方式正确地建构他们阅读的心灵地图，因此为了帮助他们，网页开发者应该提供网页导览的简单说明。
另外，网页开发者应该设计不同的网页搜寻方式，以提供不同技能与偏好的使用者搜寻。大部分的搜寻方式多是由使用者键入关键字进行资料搜寻，然而，有些使用者在搜寻的过程中，常常会发生拼字错误或是无法使用正确的语言，以致于无法找到相关的网页信息。故搜寻方式应该包含拼字检查、提供"best guess"的替代方法、query-by-example及相类似搜寻等。

13-4使用一致的导览机制[第二优先等级]

13-4-1一致性的导览

网页编排的一致性可以让使用者容易找到和使用导览机制，同时也能让使用者轻易地跳过导览机制直接找到重要网页信息。一致性的设计不但可以帮助视障者和学习有障碍的人士，对于一般网络者的浏览网页也都非常有利，因为，一般使用者可以藉由网页的一致性设计而直觉性地在正确的地方找寻到适合的网页内容。

13-5提供导览列及可行的导览机制[第三优先等级]

13-5-1导览的信息同13-3-1

13-6将相关连结加以群组化并提供绕过此群组的方法[第三优先等级]

13-6-1群组化以及绕过群组的超连结同10-5-1

13-7若网站具有搜寻功能，可设计不同的网页内容搜寻方式，以提供不同技能与喜好者搜寻选用[第三优先等级]

13-7-1导览的信息同13-3-1

13-8在网页标题、段落、及列表之前提供辨别信息[第三优先等级]

13-8-1对于网页内容的了解

网页开发时应注意以下事项，以利使用者对于网页内容的了解：
编写的样式
应提供清楚且严密的标题与文字描述连结，并且应提供有信息性的标题以利使用者可以快速浏览网页而不用逐一阅读。
网页上每个段落文章，开头即以清楚简单的文句叙述说段落重点。这种做法不但可以让人一目了然，也方便视障者在语音合成器的辅助下快速了解网页重点，但若是网页文字的设计是将重点改在段落文字的最后，那么视障者必须读取完整这段文字才能了解文意内容。
限制每一段落要有一个重要的概念。
对于俚语、专业术语、及相似文字的特殊含意，除非网页开发者在中能够明确说明，否则应该避免出现在网页中。
尽量使用大众通用的文字。例如，应该使用”始祖”而非”滥觞”；又如应该使用”begin”而非”commence”。
避免使用复杂的句子结构。
多媒体应用
有些网页内容配合多媒体的应用可以更清楚地表达网页讯息，但是，并非所有的情况都是如此，也有些多媒体的使用反而造成使用者的困扰。
以下是应用多媒体的呈现以补充文字的不足之范例：
说明一个复杂资料的图表，例如过去几年的财务状况图表。
文字转换成的手语短片。
事前录制的音乐带或语音资料透过语音合成器，可以帮助一些无法阅读的使用者接收由语音所传达的信息。

13-9对于有关联性的网页提供信息[第三优先等级]

例如，在HTML中透过LINK标签和rel、rev属性或是存档的类型(如zip、tar、gzip与stuffit等)对于有关联性的网页提供信息。

13-9-1有关联性的文件

如果没有组合有关联性的文件，容易造成使用者阅读的困扰，因此可透过以下的方式，对于有关联性的文件提供信息：
使用matadata描述网页间的关系(如link matadata元件)
透过存档的类型(如zip、tar、gzip与stuffit等)。

13-9-2 LINK标签与导览工具

使用LINK标签与连结类型描述网页导览机制和组织。
正确范例：
<LINK rel ="Chapter3" href="第三章">
<LINK rel ="Chapter1" href="第一章">
<LINK rel ="Glossary" href="字彙">

不良设计：
<PRE title="小壮2003年减重期间体重变化">
                小壮2003年减重期间体重变化
 KG___________________________________________________   
100 |  *   *                                         |
 95 |         *   *                                  |
 90 |                 *                              |
 85 |                     *                          |
 80 |                         *               *   *  |
 75 |                             *   *   *          |
 70 |                                                |
 65 |                                                |
 60 |                                                |
 55 |                                                |
 50 |                                                |
      01  02  03  04  05  06  07  08  09  10  11  12 月
</PRE>

13-10避免使用ASCII文字艺术[第三优先等级]

13-10-1避免使用ASCII文字艺术呈现图案

网页上的ASCII艺术可能作各种不同设计，以下是一种用来作为图表的呈现：
    避免使用ASCII文字艺术设计图例，应该是以一般图像来显示图例信息，应可借用一般图像的属性提供更详细的文字说明。如网页开发者必须使用ASCII的话，则应该提供一个文字连结可跳过该段ASCII图，并在旁边设计描述内容的连结，举例如下：
正確範例：
<P>
<A href="#post-art">略過ASCII art</A>
……網頁上的ASCII art文字藝術……
<A name="post-art"> ASCII文字藝術說明</A >
</P>

    例如我们常用的微笑表情：），在一些荧幕解读器中会直接读出”冒号””右括号”，因而无法正确传达原意。故可以使用ABBR标签中的title属性提供替代说明，范例如下：
正确范例：
<P><ABBR title="以ASCII文字艺术所呈现的微笑表情">:-)</ABBR></P>

    另外对于使用来取代ASCII符号设计的图片，同样必须透过alt属性提供该图像的文字叙述。如果所需提供的替代文字过长时，应使用longdesc属性或是叙述连结提供详细的文字叙述

无障碍网页设计技术

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

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

热门