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

10-1除非使用者知道将会开启新视窗，否则不应该随意开启新视窗[第二优先等级]

10-1-1目标页框的设定

W3C建议网页开发者应该避免使用target="_blank"属性开启新视窗。如果必须开启新视窗时，也应先让使用者知道，以下举例示范：
正确范例：
<P>国内外相关连结(以下连结开启新视窗)<br>
<UL>
   <LI><A href="http://www-yahoo-com" target="_blank">YAHOO奇摩</A></LI>
   <LI><A href="http://www-google-com" target="_blank">Google</A></LI>
</UL>
</P>

10-2适当使用标签标示表单控制项间的关联性[第二优先等级]

10-2-1对于表单控制项提供说明标签

表单的设计可透过LABLE标签的for提示表单控制项，举例如下：
正确范例：
<LABEL for="firstname">姓名：
<INPUT type="text" id="firstname" tabindex="1" value="输入您的姓名">
</LABEL>

10-3以直栏式表格并排呈现网页信息时，应该提供线性替代文字[第三优先等级]

10-3-1直栏式表格

某旧版的荧幕阅读器，是以由左而右、由上而下的方式阅读网页，这类的浏览器无法正确辨读直栏式的表格，因此，对于此类直栏式表格设计应该在该网页或是另一网页上提供直线性的替代文字。
以下例子是两个直栏格式的信息在一般网页上的呈现：
然而若从较旧版的荧幕阅读器读出，结果可能会变成错误的信息如下：
因此，对于此类直栏式的表格，应该要在该网页或是直接可连结到的网页上提供线性的替代文字。这个范例的做法是在该表格之前提供一个连结，连到另一个有线性替代文字的网页。
正确范例：
<A href="weather-html">台北地区今日以及未来一周天气状况</A> 
<TABLE border="0" cellspacing="0" cellpadding="10">
<TR> 
<TD><P>台北地区今天天气凉爽，午后出现温和阳光，气温在摄氏二十二至二十五度之间。</P></TD>
<TD><P>各地未来一周天气炎热，午后都会出现雷震雨，各地应做防范豪雨准备。</P></TD>
</TR>
</TABLE>

10-4应该在网页文字输入区中设定预设值[第三优先等级]

10-4-1表单控制项的特殊技巧

以下举例在INPUT标签中使用value属性设定提示文字，如果是文字输入栏位(TEXTAREA标签)则可以在TEXTAREA标签中输入提示文字：
正确范例：
<FORM>
<P>
<LABEL for="username">姓名：</LABEL>
<INPUT type="text" name="yourname" id="username" value="请输入您的姓名">
<BR>
<LABEL for="jobdesc">工作经历： </LABEL><BR>
<TEXTAREA name="jobdescription" id="jobdesc" rows="5" cols="60">
-- 请输入您的工作经历--
</TEXTAREA>
<BR>
<INPUT type="submit" value="送出资料">
<INPUT type="reset" value="重新输入">
</P>
</FORM>

     当图片已经作为上传按钮时，应提供该图片的替代文字说明：
正確範例：
<FORM action="http://aboutweb-org/works/text-read" method="post">
<P><INPUT type="image" name=submit src="button-gif" alt="送出個人資料"></P>
</FROM>

10-5避免单以空白间隔区分邻近的连结[第三优先等级]

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

当一些相关的连结形成群组超连结时(如导览列)，应该将此群组设计成一个区域。导览列往往是使用者在阅读网页首先会接触到的区域，对于使用语音合成器的视障者而言，能够在选择其所欲的连结前，透过导览先得知相关群组的超连结。另外，在增设群组前应该提供可以绕过此群组的超连结，以利视障者不需要此群组时，能迅速绕过此群组，增加阅读效率。以下提供几项可以绕过群组的技术：
提供使用者可以绕过锚点的连结。
透过样式表提供使用者隐藏锚点超连结。
在HTML4-01中可以使用MAP标签群组相关的连结，并且透过tit定义此群组。
正確範例：
<MAP title="導覽列">
<P>
[<A href="#how">略過導覽列</A>]
[<A href="home-html">回首頁</A>]
[<A href="search-html">搜尋</A>]
[<A href="new-html">最新消息</A>]
</P>
</MAP>
<H1><A name="how">如何使用本網站</A></H1>
<!-- 網頁內容 -->

无障碍网页设计技术

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

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

热门