网页设计无障碍的相关知识
时间:2013-05-24 20:24:47
发布:admin
来源:未知
第一节:关于网站无障碍
无障碍网站就是“任何环境、任何人及任何设备都能顺利浏览网页资讯”的网站,主要精神是网页的呈现需考虑到读取网页有困难的身心障碍者或有阅读障碍的老年人。一个符合无障碍可及性设计的网页,与一般人所浏览的网页是没有差异的,身心障碍者也不会因受限于视力、听力或肢体障碍而无法使用。
无障碍网站并没有任何特殊技术的需求,只要设计网页时考量到各种使用者的需求即可,基本要件即是:图片的显示须加上文字说明,让网页的替代文字说明,网页设计可经由屏幕阅读软件(视障人士使用的辅助工具)或点字机来读取网页资讯;或是提供文字放大功能,以利银发族阅读;或是以键盘取代鼠标操作,以利肢障人士操作网页;为多媒体影音资讯提供同步的文字说明,以利听障者了解影音内容。
第二节:网站无障碍适用人群
A)一般大众
就是一般的上网人群
B)年老者
上年纪的人,对快速移动(闪烁)文字或快速变化的GIF图片很难准确的读取信息;或对于网页文字太小看起来有困难
C)视力障碍者
视力障碍包括失明和色弱,色盲等;失明者只能通过读屏软件来阅读网站内容;所以需要被访问网站有良好的信息逻辑性和正确的替代不能阅读的图片或其它一些元素的文字
而对于部分颜色辨识能力有障碍的人;原本颜色所传达的讯息可能会受损,网页内容的传达将达不到可及性要求。譬如当前景和背景在色泽上太接近时,有的人可能无法分辨;譬如不同物品的叙述用不同颜色来代表时,有的色盲者可能也无法分辨。
视力障碍者在访问网站时,更多的是听;所以在适当的时候做些说明也是很有必要的;但又要考虑大部分人访问页面的美观问题;所以往往把针对盲人的说明文字在实际显示时隐藏
D)听力障碍者
需要多媒体信息上有更多的文字解释和说明
E)肢体障碍者
这部分人只能用键盘操作网站
第三节:HTML重点标签和元素
本节将主要介绍在符合网站无障碍中 HTML页面经常使用到的一些标签和元素的定义和使用规则;以便在后面的具体规范中知道为什么要那样使用标签和属性和怎样合理的使用标签和元素。
3.01 HTML <abbr>标签
【定义和用法】表示一个缩写形式,比如 "Inc."、"etc."。通过对缩写词语进行标记,您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。
【例子】
<abbr title="etcetera">etc.</abbr>
【提示】在某些浏览器中,当您把鼠标移至缩略词语上时,title可被用来展示表达的完整版本。
3.02 HTML <meta>标签
【定义和用法】meta元素可提供有关页面的元素信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词还有使用的自然语言。meta标签位于文档的头部,不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值。
【提示】网页设计者应该在HTML里标示自然语言(中文、英文、日文或韩文等语言)使用的变化,以方便语音合成器和点字输出机来处理,以自动地将其转换成新的语言,让不同语言的使用者能顺利读取这份文件,具体如:
<meta http-equiv="Content-Type" charset=utf-8" />
3.03 HTML <img>标签
【定义和用法】img元素可定义一副图像。
【例子】
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
3.03.1 HTML <img>标签的alt属性
【定义和用法】alt 属性是一个必需的属性,网页设计它规定在图像无法显示时的替代文本。假设由于下列原因用户无法查看图像,alt 属性可以为图像提供替代的信息:
网速太慢
src 属性中的错误
浏览器禁用图像
用户使用的是屏幕阅读器
<img> 标签的 alt 属性指定了替代文本,用于在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的内容。
【提示】如果图像包含信息,使用 alt 描述图像;如果图像在 a 元素,使用 alt 描述目标链接 ;如果图像仅供装饰,使用 alt="" 。
3.04 HTML <input>标签
【定义和用法】input 标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
【提 示】请使用 label 元素为某个表单控件定义标签。
3.04.1 HTML <input>标签alt属性
【定义和用法】alt 属性只能与 <input type="image"> 配合使用。它为图像输入规定替代文本。alt 属性为用户由于某些原因无法查看图像时提供了备选的信息。
【提 示】即使 alt 属性不是必需的属性,但是当输入类型为 image 时,仍然应该设置该属性。如果不使用该属性,就有可能对文本浏览器或非可视的浏览器造成使用障碍。
3.05 HTML <h1> to <h6> 标签
【定义和用法】h1 - h6 标签可定义标题。h1 定义最大的标题。h6定义最小的标题。由于h元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用层叠样式表定义来达到漂亮的显示效果。
【提示】Hn 元素类型对标记标题是很重要的,Assistive 技术譬如屏幕器的读者可利用一个适当的标题来了解文件的概述。如果我们使用<font size="7">...</font>, 那他们就不能读懂了。
h1标签在一个页面只能使用一次,但是,h2到h6可以如你所需任意使用多次,但它们应依设计意图,该按顺序使用。比如,h4应该是h3的子标题,h3应该是h2的子标题,以此类推。
3.06 HTML <table>
【定义和用法】<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
【属性:Summary】规定表格的摘要,不会对普通浏览器中产生任何视觉变化。屏幕阅读器可以利用该属性。
【属性:headers】一个空格分隔的单元格ID列表,这些ID可为单元格提供表头的信息。此属性允许纯文本的浏览器为某个给定的单元格呈现表头信息。
【属性:scope】规定此单元格是否为以下部分提供表头信息:包含此单元格的行(row)的其余部分,包含此单元格的列(col)的其余部分,包含此单元格的行组(rowgroup)的其余部分,包含此单元格的列组(colgroup)的其余部分。
【标签:caption】caption 元素可定义一个表格标题。caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
【标签:tbody thead tfoot】<tbody> 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。tbody 元素应该与 thead 和 tfoot 元素结合起来使用。thead 元素用于对 HTML 表格中的表头内容进行分组,而 tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组。
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。请注意,这组标签必须成对出现这几在默认情况下这些元素不会影响到表格的布局。不过,您可以使用 CSS 使这些元素改变表格的外观。<thead> 内部必须拥有 <tr> 标签!如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
|
关键字: |