网站网页信息无障碍测试标准说明.docx
网站网页信息无障碍测试标准说明.docx
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 网站 网页 信息 障碍 测试 标准 说明
- 资源描述：
-
网站网页信息无障碍测试标准说明 根据《YDT 1761-2008 信息无障碍 身体机能差异人群 网站设计无障碍技术要求》和《YDT 1822-2008 信息无障碍 身体机能差异人群 网站设计无障碍评级测试方法》，参考WCAG2.0标准和规范的内容，网站网页信息无障碍测试标准主要基于以下要求： 1、 对于听觉及视觉的内容要提供相等的替代文字内容要求 1.1） 图片需要加上替代文字说明 示例： <img alt="东方网LOGO图片" title="东方网LOGO图片" src="测试" width="442" height="25"> 1.2） 对于applet提供替代文字说明 示例： <applet alt="测试" code="RainbowText.class" align="baseline"> 1.3） 对于object提供替代文字说明 示例： <object> <param name=”autostart” value=”true”> <embed src=”档案名称”>一段简短的说明文字</embed> </object> 1.4） 对于窗体中的图形按键提供替代文字说明 1.5） 影像地图区域需要加上替代文字说明 示例： <area shape="rect" coord="89.202.186.227" href="leader_01.asp" alt="测试"> 1.6） 当影像地图使用为上传按钮时，每一作用区域必须使用不同的按钮 示例： <input name="Submit" id="keyword" type="image" src="bottonl.gif" alt="测试"> <input name="Clear" type="image" src="botton2.gif" alt="测试"> 1.7） 当alt属性的文字陈述多于150个英文字符是时，考虑另外提供文字叙述 1.8） 提供longdesc以外的描述性超链接（如D超链接），来描述longdesc的内容 示例： <img src="测试".jpg" alt="测试" longdesc="测试".html"> 1.9） 图形替代文字陈述不够清晰时，提供更多的文字描述（如使用longdesc属性） 1.10） 所有语言档案必须有文字旁白 示例： 线上音乐试听<a href=”音乐档名”>语音名称</a> <a href=”附件文字说明.html”>语音内容</a> 1.11） 以可及性的影像来替代ASCII文字艺术 示例： 今天的天气很好<img src=”smile.gif” alt=”微笑的表情图片”> 1.12） 视讯中的声音必须提供同步文字型态的旁白 1.13） 服务器端影像地图中的超链接必须在网页中有额外对应的文字超链接 示例： <a href=”服务器端影像地图.map”> <img src=”档案名称” alt=”叙述文字” ismap=”#Map1”> </a> <a href=”链接地址1” target=”_blank”>名称1</a> <a href=”链接地址2” target=”_blank”>名称2</a> 1.14） 多媒体视觉影像呈现时，必须提供听觉说明 1.15） 多媒体呈现时，必须要同步产生相对应替代的语音或文字说明 1.16） 客户端影像地图中的超链接必须在网页中有额外对应的可及性超链接 2、 对色素的要求 2.1） 确保所有由颜色所传达出来的讯息，在没有颜色后仍然能够传达出来 2.2） 确保前景颜色和背景颜色彼此呈现明显的对比 3、 适当地使用标记语言和样式表单 2. 3. 3.1） 以实际存在的标记语言（如MathML）呈现网页内容（如数学方程式），避免使用图形影像呈现 3.2） 确定网页设计文件，有效使用正规的HTML语法 3.3） 在doctype标签中，使用标准规范的叙述以识别HTML版本类型 3.4） 尽可能使用样式表单控制网页排版与内容的呈现 示例： <h3 class="titile">历年成绩排名</h3> <p class="txt">此份成绩为班上历年成绩排名<span class="redtxt">[前50%]〈/span〉的排名名单，敬请班代公布〈/p〉 3.5） 要使用相对尺寸（如%）而非绝对尺寸（如像素） 示例： <table width="80%" border="0"> 3.6） 适当使用巢状标题呈现文件结构 3.7） 避免使用header标签来产生粗体字效果 示例： <h1>第一层标题</h1> <h2>第二层标题</h2> <h3>第三层标题</h3> <h4>第四层标题</h4> <h5>第五层标题</h5> <h6>第六层标题</h6> 3.8） 项目符号及编号之卷标（如li、ul）仅可使用与实际网页内容的项目条列，不可用于编辑格式 示例： <h1>教育的七大学习领域：</h1> <ol> <li>语文〈/li〉 <li>社会 〈ol type="a"> <li> 学科领域一</li> <li> 学科领域二</li> 〈/ol〉 </li> <li>教学</li> <li>自然与生活科技</li> <li>学术与人文〈/li〉 <li>健康与体育〈/li〉 </ol> 〈li〉综合活动〈/li〉 3.9） 确保q和blockquote标签只用来当引用语而不是用来缩排 3.10） 以q及blockquote卷标来标记引用语 4、 阐明自然语言的使用 2. 3. 4. 4.1） 明确地指出网页内容中语言的转换 示例： <p><span> lang="fr(法文的语言代码)" C'est la Vie </span></p> 4.2） 用abbr及avronym标签表示网页中呈现的文字缩写与简称 示例： <p>测试<abbr title=”测试”>SARS</abbr>测试<acromya title=” 测试”>Hi=Tech</acromym>测试</p> 4.3） 明确指出网页文字所使用的自然语言 示例： <html lang=”ZH”> <html xmlns=http://www.w3.org/1999/xhtml lang=”ZH”xml:lang=”ZH”> <html xmlns=http://www.w3.org/1999/xhtml xml:lang=”ZH”> <blockquote lang=”EN”> 5、 建立编排良好的表格 2. 3. 4. 5. 5.1） 对于每一个存放数据的表格（不用来排版），标示出行和列的标题 示例： <table border="1" summanry="学生成绩表，第一列学生姓名，第二列语文成绩"..> <caption>学生成绩表</caption> <tr> <th scope="col"> 学生姓名</th> <th scope="col">语文成绩</th> <th scope="col">英文成绩</th> <th scope="col">数学成绩</th></tr> <tr> <td>陈丫葆</td> <td>70</td> <td>80</td> <td>90</td></tr> <tr> <td>郭</td> <td>90</td> <td>80</td> <td>70</td></tr> </table> 5.2） 表格中超过二行/列以上的标题，须以结构化的标记确认彼此间的结构关系 5.3） 在网页内容呈现设计时，避免以表格做多栏文字的设计 5.4） 若表格只做为版面配置时，勿使用表格之结构标记（如th卷标）作为网页格式视觉效果 5.5） 表格须提供表格摘要说明（如summary属性） 示例： <table border=”1” summary=”测试”> <caption>测试</caption> (测试) 5.6） 数据表格须提供标题说明 5.7） 表格行列过长的标题，须提供缩写或简称 示例： <caption>测试</caption> <tr> <th abbr=”测试”>测试</th> 6、 确保网页能在新科技下良好地呈现 2. 3. 4. 5. 6. 6.1） 使用CSS样式表单编排的文件需确保在除去样式表单后仍然能够阅读 示例： <body> <div class="box"> <dt class="menu1">中文歌曲排行</dt> <dd class="item1">完美一天</dd> <dd class="item2">暧昧</dd> <dd class="item3">信</dd> <dt class="menu2">英文排行</dt> <dd class="item4">God Digger</dd> <dd class="item5">Run It!</dd> <dd class="item6">Photograph</dd> </div> </body> 6.2） 页框连接必须是HTML文档 6.3） 使用Script语音需指定不支持Script时的办法 示例： <script language="VBScript"> sub Game OnClick MegBox "啊啊啊啊" end sub </script> <noscript> <p>描述性文字</p> </noscript> 6.4） 若网页内的程序对象没有作用时，确保网页内容仍然可以传达 示例： <applet code="ticker" alt="你好" width="80%" height="40"> </applet> 6.5） 若网页对象使用事件驱动时，确保勿仅使用鼠标操作 6.6） 使用页框时要指定不支持页框时的方法 示例： <frameset cols="50%,50%"> <frame src="a.html"title="网页标题1"> </frameset> <noframes> <p>网页标题1（a.html内容）</p> <p>网页标题2（b.html内容）</p> </noframes> 7、 确保使用者能处理时间敏感内容的改变 2. 3. 4. 5. 6. 7. 7.1） 确保网页设计不会致使屏幕快速闪烁 7.2） 避免使用blink卷标闪烁屏幕 7.3） 避免使用marquee卷标移动文字 7.4） 避免使用动态gif图片 7.5） 不要让网页每隔一段时间自动更新 示例： <head> <meta http-equiv="refresh" content=间隔秒数; url=新网址.html"> </head> <body> 网站网址已经变更，请连结至<a href="新网址">新网站</a> </body> 7.6） 不要自动转移网页的网址 8、 确保嵌入式用户接口具有直接可及性 2. 3. 4. 5. 6. 7. 8. 8.1） 对由Script、Applets、及Objects所产生之信息，提供可及性替代方式 示例： <script language="VBScript"> <!--msgbox"script内容"--> </script> <noscript> <p>script内容</p> </noscript> 9、 设计装置独立网页 2. 3. 4. 5. 6. 7. 8. 9. 9.1） 尽量使用客户端影像地图替代服务端影像地图链接 9.2） 对所有网页内容元素，确保有鼠标以外的接口操作 示例： <img onmouseover="alert('对话内容')" onfocus="alert('对话内容')" tabindex="移动顺序" src="测试"alt=””> 9.3） 确保事件的启发不要求一定得使用鼠标 9.4） 具体指出按下tab键在表单控件，超链接及对象间移动的顺序 示例： <div> <textarea name="field2" tabindex="2" cols="1" rows="1">文本框二</textarea> <textarea name="field3" tabindex="3" cols="1" rows="1">文本框三</textarea> <textarea name="field1" tabindex="4" cols="1" rows="1">文本框一</textarea> <a href="#top" tabindex="1">回到首页</a> </div> 9.5） 对经常使用的超链接，增加快捷键的操作 示例： <a title=”asd” accesskey="C" href="首页.html">回首页</a> 9.6） 对于窗体组件考虑提供键盘快捷方式的操作 示例： <div> <label for="user" accesskey="U">使用者名称（U）：</label> <input type="text" id="user" value="输入你的姓名" /> </div> 10、 使用过渡的解决方案 2. 3. 4. 5. 6. 7. 8. 9. 10. 10.1） 除非使用者知道将会开启一个新窗口，不要随便开启一个新窗口 10.2） 如果使用Script语言开启新窗口或改变目前窗口的网址，要让使用者能事先知道 10.3） 确保窗体的控件与控件说明之间的配合很适当 示例： <form action="customer" method="post"> <label for="名称">说明文字</label> <input type="text" id="名称" value="填入文字"> </form> 10.4） 若有以表格直栏格式呈现的网页文字内容时，提供线性文字替代 示例： <a htef=”weather.html”>测试</a> 10.5） 在网页文字输入区中须有默认值 10.6） 勿单以空白间隔分开相连之超链接 示例： [<a href=.tw/>测试</a>] 11、 使用国际与国内官方订定的技术和规范 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 11.1） 如果你不能使这个网页无障碍化，提供一个相等的无障碍网页 11.2） 尽量使用开放性的最新国际标准规范 11.3） 避免使用过时的HTML语法 11.4） 允许使用者依照个人喜好设定网页呈现方式与内容 12、 提供内容引导信息 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 12.1） 需要定义每个页框的名称 示例： <frameset rows="100,*"> <frame src="navigate.html" title="功能"> <frame src="content.html" title="只要内容"> </frameset> 12.2） 如果页框名称无法描述页框中的内容的话，应加上额外叙述 示例： <frameset cols="150,*"frameborder="yes"border="2"framespacing="0"> <frame src="navigate.html" title="网站视觉功能列" longdesc="补充说明2.tex"> </frameset> 12.3） 把太长的选单项目群组起来 12.4） 在表单控件中，使用filedset及legend标签群组间的区隔 12.5） 尽可能将网页内容有相关之元素聚集在一起 示例： <div><ol> <Li>三星</li><Li>摩托罗拉</li><Li>夏普</li> </ol></div> 12.6） 在表单控件上，以label卷标提示信息 13、 提供清楚的浏览网站机制 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 13.1） 设计并确保有意义的超链接说明，便于网页内容的阅读 示例： <p><a href="101.zip">下载</a></p> <p><a href="ex.html">规范</a></p> 13.2） 如果需要的话，为每个超链接加上内容描述 13.3） 指向不同网址的超链接，不可使用相同的超链接说明 13.4） 使用metadata卷标来记载计算机可以了解运用的网页信息 示例： <meta http-equiv="comtent-type"content="text/html; charset=big5"> <meta http-equiv="keyword"content="meta标准的使用规范;> <meta name="author content="林信宏;> <meta name="copyright content=";> </head> 13.5） 为你的网页加上标题 示例： <title>无障碍页面</title> 13.6） 为你的网站提供网站地图或整体性的简介 13.7） 网页设计使用清楚且一致的导览机制 13.8） 提供网页导览连接工具栏，以利存取网站导览结构 13.9） 能辨别出意义上有群组相关的超链接 13.10） 若有群组超链接，在群组之前增设一项绕过此区域的超链接 示例： <div id=”navigation”> [<a href=”#content” id=”link”>测试 </a>] 13.11） 若网站具有搜索功能，可以设计不同的网页内容搜索方式，以提供不同技能与喜好者搜寻选用 13.12） 在页标题、段落、及列表之前，提供辨别讯息以利识别 示例： <hl>测试</hl> <ul> <li>测试</li> <ul> 13.13） 以metadata标签来识别网页文件包含于整体文件内的所在位置 示例： <head <link rel=”Next” href=”chapter3.html”> </head> <link rel=”home” title=”首页” href=http://网址首页/> 13.14） 避免在网页上使用ASCII文字艺术 14、 确保简单清楚的网页内容 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 14.1） 网页内容要使用简单易懂的文字 14.2） 使用可及性的图形促进网页内容的理解 14.3） 网页彼此间设计呈现的风格要一致展开阅读全文
咨信网温馨提示：1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前可先查看【教您几个在下载文档中可以更好的避免被坑】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时联系平台进行协调解决，联系【微信客服】、【QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”，意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：0574-28810668；投诉电话：18658249818。
实名认证
平台协调中心【客服】
自信AI助手
微信客服
客服QQ
发送邮件
意见反馈
链接地址：https://www.zixin.com.cn/doc/12100054.html