2019年05月13日 13:01 阅读量：1464
3-1以适当的标记语言而不是图片来传达信息[第二优先等级]
3-1-1结构与呈现
当设计网页内容时，网页开发者应该先规划此网页的理想结构。许多网页开发者常常使用水平线分隔来区分章节，但是，水平线分隔的方式对于视障者或是非图像式的浏览器而言是没有意义的，网页开发者应该使用H1~H6的标签代替水平线来区隔不同的段落。
另外，在网页内容编排时，不可只为呈现编排的效果，而使用结构性标签，例如在HTML中，应该使用Q与BLOCKQUOTE标签来标记引用语及引用文，切勿使用此两种标签仅为了呈现缩排效果(见3-7的正确范例)。3-1-2以现有的标记语言(如MathML)呈现替代影像
网页中的影像对一些使用非图像式浏览器(non graphical browser)的视障者而言，几乎是没有意义的。因此一些需要格式化的信息，例如数学方程式，应以现有的标记语言(如MathML)取代图像。
数学方程式：y=2x-3x+7
正确范例：
y=2x<SUP>2</SUP>-3x+73-1-3关于所呈现的内容
对于重要的图像应该提供文字说明；对于藉由样式表呈现的重要文字或图片(如透过" background-image","list-style",or"content"属性)，也一样必须提供替代文字，以确保在样式表不被支援时，网页中的重要信息也一样可以正确地传达。3-2在DOCTYPE中，使用标准规范的叙述，以识别网页的HTML版本类型[第二优先等级]
3-2-1 DOCTYPE叙述
由于W3C长期以来致力于检视网页可及性的相关设计，并且制定许多HTML的标准规范，因此，目前身心障碍者所使用的浏览器，多是以W3C所制定的HTML标准为设计的准则。故网页起始标题必须标明网页设计所使用的HTML版本，以供浏览器作识别解读。
举例，网页若使用HTML 4-01版本语言撰写，可在W3C网站查询到正确写法http://www-w3-org/TR/html401/struct/global-html#idx-document_type_
范例列举：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4-01//EN"
"http://www-w3-org/TR/html4/strict-dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4-01 Transitional//EN"
"http://www-w3-org/TR/html4/loose-dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4-01 Frameset//EN"
"http://www-w3-org/TR/html4/frameset-dtd">
declaration-3）。下面是宣告HTML 4-01版本语言的三种写法：
上列三种DTD的宣告，说明如下：
第一种"strict-dtd"是用来宣告网页文件中所用的所有标签和属性都是目前未被列为负面[ 负面：所谓的负面标签或属性是指被新的语言文件列为过时的标签或属性，将在未来的HTML中淘汰。
]另外，在网页内容编排时，不可只为呈现编排的效果，而使用结构性标签，例如在HTML中，应该使用Q与BLOCKQUOTE标签来标记引用语及引用文，切勿使用此两种标签仅为了呈现缩排效果(见3-7的正确范例)。的。网页的设计应尽可能使用此种严谨的语言写法，以符合未来HTML的发展。
第二种"loose-dtd"包含了上述的"strict-dtd"所涵盖的标签与属性以及负面标签与属性。如果在网页呈现上有特别需求时，可用此类标签及文件宣告。
第三种"frameset-dtd"包括上述"loose-dtd"的所有标签，以及视窗分割标签。当使用HTML4-01语言作网页视窗分割设计时，应用此宣告。3-3使用样式表控制网页排版与内容的呈现[第二优先等级]
3-3-1结构与呈现
当设计网页内容时，网页开发者应该先规划此网页的理想结构。许多网页开发者常常使用水平线分隔来区分章节，但是，水平线分隔的方式对于视障者或是非图像式的浏览器而言是没有意义的，网页开发者应该使用H1~H6的标签代替水平线来区隔不同的段落。3-3-2重点强调
网页上的文字须作重点强调时，应该使用EM及STRONG等强调标签，而非使用I斜体字标签及B粗体字标签仅为呈现视觉上的差异性。
下面的两个例子在网页上的结果看似相同，但是前面的设计不当之处是用B标签来呈现粗体的效果，第二个例子则是使用STRONG标签的正确示范，除了能显现粗体的效果也能明确标示出资料的重要性。
不良设计：
<P>网页文字段落中<B>重要讯息</B>的呈现</P>
正确范例：
<P>网页文字段落中<STRONG>重要讯息</STRONG>的呈现</P>
另外，在HTML 4-01中关于文字编辑的相关标签和属性，虽尚未全部被视为"负面"，但已被W3C建议尽量用样式表来取代。已被HTML 4-01列为负面性的相关文字编辑标签有<Font>、<S>、<STRIKE>及<U>等，至于HTML第四版的负面标签资料请见本手册附录四，或查询W3C网页：http://www-w3-org/TR/WCAG10-HTML-TECHS/#html-index。
3-3-3文字取代图片
网页开发者应该尽量使用样式表(style sheet)而不是透过图片来编排文字。对于视障者而言，虽然大部分的视障者藉由语音合成器(speech synthesizers)、点字阅读机(braille displays)、图像显示机(graphical displays)等辅助器材可以阅读透过图片所传达的讯息，然而，如果网页开发者使用样式表更能够有效的控制网页内容文字的编排，如颜色、字型、大小、粗细以及段落边界等。对于已用为文字特殊效果的文字图片，则应该加上适当替代文字。3-3-4文字的编排
提供以下几项CSS2属性用来控制文字的编排：
'text-indent'：文字缩排应使用'text-indent'，而非BLOCKQUOTE或是其他结构元件达到首行缩排的效果。
letter/word spacing：此两种属性乃是在设定字母间/字与字之间的空白大小。如果以一般使用的空白键方法呈现”H E L L O”这样的效果，可能造成视障者辨读成五个独立字母。因此，要控制字符之间距离的正确做法是使用"word spacing"属性，不但可以达到视觉效果，同时也能够确保不同浏览器解读的正确性。
'direction','unicode-bidi'：可用来设定浏览网页内容的方向。
first-letter及first-line：这两个属性是CSS2中用来设定段落文字中第一个字或第一行的两种标签。
此一范例乃是使用样式表呈现字首放大(drop-cap)的效果：
正确范例：
<HEAD>
<Title>国立台北大学</Title>
<STYLE type="text/css">
-dropcap { font-size : 120%; font-family : Helvetica }
</STYLE>
</HEAD>
<BODY>
<P>
<SPAN class="dropcap" lang="en">N</SPAN>ational
<SPAN class="dropcap" lang="en">T</SPAN>aipei
<SPAN class="dropcap" lang="en">U</SPAN>niversity
</P>
</BODY>3-3-5透过样式表呈现排版、定位、层次及对齐的效果
尽量使用样式表达成排版、定位、层次及对齐的网页编排效果，例如使用'text-indent'，呈现文字缩排、使用'margin-top'来控制元件上边界与其他文件内容
的空白距离、使用'float：left'产生文绕图的效果、使用'empty-cells'在表格的空白栏位中，适当地呈现该栏位，不需要为视觉效果而输入空白键。
正确范例：
<H3 class="title">学习历程档案</H3>
<P class="txt">学习历程档案是教师实施评量的新趋势，
也是<SPAN class="redtxt">「以学生为中心」</SPAN>的教学重点，如能善用两者，相互为用，将可达到最大的教学效果。</P>
以下则是上面所用到样式表的设计：
h3-title { font-family: 新细明体, mingliu, taipei; font-size: 120%; font-weight: bold}
-txt { font-family: 新细明体, mingliu, taipei; font-size: 100%; color:#000000; line-height: 150%}
-redtxt { font-family: 新细明体, mingliu, taipei; font-size:100%; color:#ff0000; line-height: 150%}3-4使用相对而非绝对的尺寸设计标记语言与样式表[第二优先等级]
3-4-1视窗大小应使用相对尺寸(如%)而非绝对尺寸(如pixel)
由于使用者常会因个别使用需求，而调整浏览网页内容的视窗大小，因此视窗563且视窗内容的位置可随视窗尺寸弹性变动。
正确范例：
<TABLE width="80%" border="0">3-4-2计量单位
网页上计量单位有以下三种方式：
以em而非以pt为尺寸计量单位
H1﹛font-size：2em﹜非H1﹛font-size：12pt﹜
说明：em为该元素所使用的字形的高度，pt为像素(pixel)
以相对尺寸(%)为计量单位：例如左边界15%、右边界10%
BODY { margin-left：15%；margin-right：10%}
以绝对的计量单位：建议如要输出具体尺寸的时候(如名片输出)使用绝对计量单位。
businesscard { font-size：8pt }
3-5使用header标签呈现文件结构[第二优先等级]3-5-1结构与呈现
当设计网页内容时，网页开发者应该先规划此网页的理想结构。许多网页开发者常常使用水平线分隔来区分章节，但是，水平线分隔的方式对于视障者或是非图像式的浏览器而言是没有意义的，网页开发者应该使用H1~H6的标签代替水平线来区隔不同的段落。
另外，在网页内容编排时，不可只为呈现编排的效果，而使用结构性标签，例如在HTML中，应该使用Q与BLOCKQUOTE标签来标记引用语及引用文，切勿使用此两种标签仅为了呈现缩排效果(见3-7的正确范例)。3-5-2章节标题
为了方便使用者辨读内容较长的文件，应该适当地使用HTML中的标题标签(H1~H6)呈现长篇网页文件章节的层次结构(H1至H6标签由上而下的方式注记文件的章节标题)，而非以HR水平线分隔的方式来区隔章节。另外在HTML中，应使用STRONG而不是H1至H6标签呈现粗体字效。3-6适当地使用条列以及条列项目[第二优先等级]
3-6-1结构与呈现 同2-1-1
3-6-2条列式清单
HTML中的DL、UL及OL标签应用来作为条列式资料的呈现 ，而非用来作缩排的排版效果。
透过有序号的清单(Ordered lists)可以协助非视觉式使用者(例如视障者)浏览网页内容，并且以有意义的方式组织网页内容的结构，避免使用者迷失在清单中。例如，网页上有以下两种条列式项目的表达方式，第一种"1, 1-1, 1-2, 1-2-1, 1-3, 2, 2-1"比第二种"1, 1, 2, 1, 3, 2, 1"更能清楚地表达各项目资料的关系。
第一种 第二种
1- 1-
1-1 1-
1-2 2-
1-2-1 1-
1-3 3-
2- 2-
2-1 1-3-6-3在HTML清单中提供上下文的说明
网页开发者应该使用UL标签呈现无序号的清单，以及使用OL标签呈现有序号的清单并且可结合CSS2作适当网页上下文的呈现。
除非浏览器可以支援CSS2或是可以透过其他的方法控制清单，否则网页开发者应该对于巢状的清单提供上下文的说明。下列的例子是透过CSS1机制(-endoflist{display: none})显示当样式表可以呈现时，要如何隐藏清单中该项目已经结束之记号，以及当样式表无法呈现时，要如何显示清单中该项目已经结束，以避免与其他项目混淆。
正确范例：
<STYLE type="text/css"> -endoflist { display: none } </STYLE>
<UL>
<LI>语文能力：
<UL>
<LI>英语</LI>
<LI>法语</LI>
<LI>徳语</LI>
<LI>日语</LI>
<SPAN class="endoflist">(语文能力项目结束)</SPAN>
</UL>
<LI>体育专长：
<UL>
<LI>篮球</LI>
<LI>短跑</LI>
<LI>排球</LI>
<LI>羽球</LI>
<SPAN class="endoflist">(体育专长项目结束)</SPAN>
</UL>
</UL>3-7以Q及BLACKQUOTE标签来标记引用语而非用来缩排[第二优先等级]
在网页中，为适当呈现段落中的引用文，应该使用Q与BLOCKQUOTE标签来标记引用语及引用文，切勿使用此两种标签仅为呈现缩排效果。
正确范例
<P>一个成功的领导者都有着领导潜在素质。何谓<Q>领导潜在素质</Q>？雷蒙卡特尔曾说：
<BLOCKQUOTE>”优秀领导者所具备之品格特征包括如下几个方面：情绪稳定、富有热情、勤勤恳恳、处世大胆、意志坚强、自信、自制力。”
</BLOCKQUOTE>
</P>
无障碍网页设计技术
点击此查看-->手机端无障碍工具条演示(仅手机端打开)
点击此查看-->PC端无障碍工具条演示(仅PC端打开)
点击此查看-->我们能提供的信息无障碍服务
点击此查看-->无障碍工具条授权方式和区域代理
点击此查看-->相关服务报价参考