站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress可访问性
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
月飞春秋
(
讨论
|
贡献
)
2010年4月13日 (二) 17:09的版本
(
→浏览器的可访问性
)
(
差异
)
←上一版本
|
最后版本
(
差异
) |
下一版本→
(
差异
)
跳转至:
导航
、
搜索
警告:您正在编辑的是本页面的旧版本。
如果您发布该更改,该版本后的所有更改都会丢失。
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
<span style="border:1px solid #000; text-align:center; float:right; padding:6px;"><strong>导航:</strong> [[WordPress网站开发须知|上一页]] | {{Template:WordPress导航}}</span> <div style="clear:both;"></div> 可访问性针对包括WordPress用户在内的所有人,但可访问性究竟是什么? 网页设计中的可访问性,即用户所创建的网页设计能够让任何人使用。任何人中包括视觉受损者,残疾者,以及因为其它原因不方便上网的人群,这包括俄罗斯和南非地区使用落后[[计算机]]的人群,他们依靠每天只能运行两个小时的信号发生器、老式[[浏览器]]和拨号网络连接互联网;还包括来自不同国家使用不同语言的人群。 任何人还包括使用手机和掌上电脑访问用户网站的人。所有这些人都需要访问[[互联网]],因此网页设计人员有必要了解可访问性。 ==说明图片和链接== 在最简单的例子中,视力或身体受损的网络用户需要通过帮助来“看”或者“听”[[网页]]内容。因此我们在内容中插入图像时,请在<img>标签的alt部分对图像进行说明。 ...and the ball bounced higher and higher as <img scr="ball.jpg" alt="graphic of a red and blue ball" /> the child bounced it.... 依靠屏幕阅读器上网的用户会听见“然后小球弹得越来越高——图片——一个红蓝相间的小球图片——是孩子在弹球”。 使用alt属性还有其他好处。在IE等浏览器中,鼠标经过图片时,alt说明将会以提示条形式出现。而在火狐等另一些浏览器中,由于各种原因无法加载图片时会出现alt说明。 很多人用属性来“说明”或“评论”图片以及链接,这背离了使用属性的初衷。属性实际上是用来“取代”图片或链接的。对图片和链接的说明性语言必须能够使见不到图片的人了解屏幕上所展示的真实状态。如果说明性语言字数较多,可以用longdesc链接到图片的详细说明文件(ball.html)。 ...and the ball bounced higher and higher as <img scr="ball.jpg" alt="graphic of a red and blue ball" longdesc="ball.html" /> the child bounced it.... 有些依靠屏幕阅读器上网的用户可能同时使用alt和title属性,因此最好将这两个属性都加入代码: ...and the ball bounced higher and higher as <img scr="ball.jpg" alt="graphic of a red and blue ball" title="red and blue ball" /> the child bounced it.... 但有时为图片添加说明却可能造成混乱。因此如果图片与主题相关性不大,可以不为图片添加说明。将图片中的alt和title属性列为空,仍然能够保持可访问性标准。图片没有被添加到内容中,阅读时就会被略过。 <img scr="flower.jpg" alt="" title="" /> 也可以在[[链接]]中使用相同方法: If you are <a href="http://example.com/talent-shopping/" title="Article about shopping for photographic models"> shopping for models</a> for your portrait photography.... 图片和连接的说明性语言不仅能够帮助网站的访问者,而且能使网站更容易被搜索到。[[Google]],[[Yahoo]]等搜索引擎都使用alt和title属性显示搜索结果,并以此影响网站排名。 ==WordPress的可访问性== WordPress实时帮助用户保持网站的可访问性。但不是所有WordPress主题制作者都有时间和耐性来维护主题的可访问性标准。下面是一个在index.php的链接和[http://www.wordpress.la/codex-WordPress%E4%B8%BB%E5%BE%AA%E7%8E%AF.html WordPress Loop]中使用titile的示例: < h2> <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"> <?php the_title(); ?> </a> </h2> 下面我们来分析这个示例。< h2>标签中包含有文章标题的链接,该链接是对[http://www.wordpress.la/codex-%E4%BD%BF%E7%94%A8WordPress%E5%9B%BA%E5%AE%9A%E9%93%BE%E6%8E%A5.html 固定链接](文章的url地址)的调用。 链接后跟有一个rel,rel将relationship作为bookmark依附于链接。之后是title属性。这个示例先后定义了"Permanent Link to"和[http://www.wordpress.la/codex-%E6%A8%A1%E6%9D%BF%E6%A0%87%E7%AD%BE-the_title%28%29.html the_title()] 模板标签自动生成的文章标题,在链接名后再次用到了title标签。 WordPress用这些模板标签自动从数据库中获取信息,然后填充链接信息,使链接更容易被访问。 可以将title改为其它内容: <a href="<?php the_permalink() ?>" rel="bookmark" title="Article about <?php the_title(); ?>"> <?php the_title(); ?> </a> 为链接生成title的技术同样可以用在WordPress博客的其它地方,包括类别、页面以及存档的侧边栏中的列表。title自动生成,无需人为帮助。有时用户还可以自定义title的生成方式。 详细情况参见[http://www.wordpress.la/codex-%E6%A8%A1%E6%9D%BF%E6%A0%87%E7%AD%BE.html 模板标签]。 '''可访问性考虑因素''' 为自己设计WordPress主题或公共发布时,除了要能够帮助用户“听见”图片和链接的说明外,还有另外一些内容也应该纳入考虑范围。 ==创建可读页面== 对网页设计者来说,有时他们能做的最简单的事情就是创建一个更方便阅读的页面。在一个页面上出现拥挤的内容和版式、混杂的字体样式和过多信息,不仅混乱,也不易于阅读。 开发[http://www.wordpress.la/theme.html WordPress主题]时,需要额外注意网页不同元素之间的空白部分和伪空白部分。确保在大部分屏幕分辨率下辨认所设置的字体。位置导航元素应设置在常规位置上,便于人们点击进入网站其它部分。 如果希望测试网站主题的易读性,可以考虑请一位60岁的老人做测试者。这是一个好主意 '''[http://hubel.sfasu.edu/research/AHNCUR.html 不同前景/背景配色、字体类型和单词样式网站的可读性]''' ===颜色和可访问性=== 颜色同样影响着人们“查看”网页的能力。大约10%的互联网用户在辨色上存在问题,色盲甚至无法辨色。很多网站提供对网站用色选择的测试。当然可以忽略这个问题,但优秀的设计者应该面面俱到。 *[http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnhess/html/hess10092000.asp Can Color Blind Users See Your Web Page?] *[http://www.q42.nl/demos/colorblindnesssimulator/ Q42 Color Blindness Simulator] *[http://www.visibone.com/color/#card Visibone's Color Blind Color Chart] *[http://colorfilter.wickline.org/ Color Blind Web Filter - Testing Online] *[http://www.hicom.net/%7Eoedipus/blind.html Blindness-Related Resources on the Web and Beyond] *[http://www.library.uwsp.edu/aschmetz/Accessible/pub_resources.htm Accessible Web Page Design - Resources for the Visually Impaired] *[http://www.lcc.gatech.edu/gallery/dzine/access/ Design Considerations: Readers with Visual Impairments] *[http://vischeck.com/ Vischeck (simulates color blind vision)] *[http://graybit.com/ GrayBit.com (grayscale page conversion to test visual contrast for the colorblind)] ==访问关键字== 访问关键字可以帮助有视力或身体障碍的人进行网站导航。在键盘上按下不同按键组合时,这些标准化关键字会将光标移动到页面的不同区域。例如,如果页面上有一个可供高级搜索的链接,在Windows系统中按下alt+s键或者在Mac系统中按下ctrl+s键,光标就会移动到搜索链接处。可将搜索页面的链接中的关键字设置如下: <a href="search.php" accesskey="s">Search</a> 下面是一个在侧边栏中使用访问关键字的例子,其中使用了页面模板标签: < ul id="pageslist"> < li> <a href="index.php" title="Home Page" accesskey="1">Home</a> </li> < li> <a href="blog.php" title="Blog" accesskey="2>Blog</a> </li> < li> <a title="Site Map" href="sitemap.php" accesskey="3">Site Map</a> </li> </ul> 用以列出页面的模板标签目前还不支持访问关键字,希望不久的将来能够实现这一功能。 英国政府为官方网站制定了一套使用访问关键字的标准,国际上很多网站管理员采用这一标准。但 Mozilla Firefox 浏览器却打破了这一标准,它使用组合键alt+1(或其他数字)来控制窗口的切换。希望以后所有浏览器和网站都能够使用统一的存取关键字标准。 同时用户也可以选择自己的存取关键字设置,但最好在网站的侧边栏和页脚部分开辟“可访问性规则”版块,方便访问者查找网站主人所使用的访问关键字。 *[http://www.clagnut.com/blog/193/ Clagnut: Accesskey Standards] *[http://www.cs.tut.fi/%7Ejkorpela/forms/accesskey.html Using accesskey attribute in HTML forms and links] *[http://www.w3.org/TR/REC-html40/interact/forms.html W3's Forms in HTML Documents - Using Accesskey] *[http://www.alistapart.com/articles/accesskeys/ Accesskeys: Unlocking Hidden Navigation] ==浏览器的可访问性== 在[[IE]]浏览器中进行网站设计相对顺利,但在[[FireFox]]或者Safari[[浏览器]]中进行设计会有所不同,甚至可以说是混乱。同一个网站在不同浏览器上的显示效果可能有所不同。考虑到可访问性的因素,从不同浏览器上访问就成了关键问题。 #验证:用验证测试 彻底检查网站的[[XHTML]]和[[CSS]]代码,确保没有代码错误。 #浏览器测试:在不同的浏览器上测试网站并根据测试结果做相应调整,使网站能被不同浏览器访问。 #[[操作系统]]测试:不同操作系统上的浏览器也可能对同一个网站产生不同显示效果。如果周围没有那么多装有不同操作系统的电脑,可以借助朋友和家人的电脑,也可以去机房或网吧,在安装了不同操作系统的电脑上测试网站的表现形式。 测试网站的可访问性并不局限于浏览器测试。不同的屏幕分辨率和颜色质量也能影响网站的可访问性。可以通过桌面属性设置或网站开发工具或以下某些工具来改变屏幕分辨率和颜色质量。 ===验证工具=== *[http://www.hisoftware.com/accmonitorsitetest/ HiSoftware's Online Content Accessibility and Quality Tester] *[http://www.w3.org/WAI/ER/existingtools.html Evaluation, Repair, and Transformation Tools for Web Content Accessibility] *[http://www.w3.org/WAI/eval/ W3C Web Accessibility Initiative: Evaluating Websites for Accessibility] *[http://www.wave.webaim.org/index.jsp WAVE Online Accessibility Tool Checker] ===屏幕分辨率测试=== *[http://www.thepcmanwebsite.com/screen_resolution.shtml Pcman's Web Page Screen Resolution Tester] *[http://members.optushome.com.au/sjyounis/window2.html Web Page Monitor (check for different sized monitors)] ===浏览器测试=== *[http://www.anybrowser.com/siteviewer.html AnyBrowser's Web Site Viewer - How does your site look to other browsers] *[http://www.delorie.com/web/wpbcv.html Web Browsers Compatibility from Delorie] *[http://www.cameraontheroad.com/learn/web/pageview.html Viewing A Sample Page Under Various Conditions and Uses] *[http://www.netmechanic.com/cobrands/MarketingTips/compat_check.htm NetMechanic's Browser Compatibility] *[http://www.shire.net/learnwebdesign/browser.htm Learnwebdesign's Browser References] *[http://www.subir.com/lynx/public_lynx.html Public Lynx Access Browsers] *[http://www.thesitewizard.com/webdesign/multiplebrowsers.shtml Checking with Multiple Browsers (the hard core way)] ===手机上网以及掌上电脑上网=== 台式电脑或笔记本电脑不再是唯一的网页浏览模式,目前通过手机和掌上电脑上网的人越来越多。那么网站在小屏幕上是如何显示的呢? 一些为小屏幕设置的浏览器抛弃网站的样式表单直接显示文字内容,就像在WordPress网站中打印页面一样。其它浏览器显示压缩后的整个屏幕内容。在样式列表中添加掌上多媒体样式后,用户可以设置自己的网站在小屏幕上的显示状态。 如果想为Pocket[[IE]], NetFront和[[Opera]]浏览器添加单独的掌上样式表单(见"handheldstyles.css"示例),需要在主题header.php文件的屏幕样式表单后添加以下代码。为了能让PocketIE, NetFront,和Opera这三个浏览器都能正确显示内容,必须确保语句的准确性。 <style type="text/css">@import url(<?php bloginfo('stylesheet_directory'); ?>/handheldstyles.css) handheld;</style> 以下文章包含更多相关信息: *[http://www.codestyle.org/css/media/index.shtml Code Style Media Monitor (projection, print, etc)] *[http://www.macedition.com/cb/resources/handheldbrowsercsssupport.html Guide to CSS2 Support in PDA/Handheld Browsers] *[http://www.w3.org/Mobile/ W3C Mobile Access - Seamless Web Access From Mobile Devices] *[http://www.w3.org/Mobile/Activity W3C Mobile Access Activity Statement] *[http://www.w3.org/Style/CSS/Test/Mobile/1.0/current/ CSS Mobile Profile Test Suite] *[http://www.w3.org/TR/css-mobile W3C CSS Mobile Profile 1.0] *[http://www.w3.org/TR/NOTE-html40-mobile/ W3C HTML 4 Specs on Mobility - Handheld] *[http://www.w3.org/TR/REC-CSS2/aural.html Aural style sheets] *[http://www.w3.org/TR/REC-CSS2/media.html The W3C CSS2 recommendation, Section 7: Media types] *[http://www.websitetips.com/wireless/ Web Design for Mobility - Handheld, PDA, etc.] ===开辟“可访问性规则”版块=== 网站具有自己的“可访问性规则”也已经成为一种趋势,网站专门开辟一个页面向访问者说明本网站的可访问性标准。在英国,根据《残疾歧视法案》,不能访问的政府或企业网站将会被起诉,在美国这种规定也越来越普遍。遵守可访问性标准并不难,只要在网站中设置一些按键组合,让每个访问者都看到网站的大部分内容。 *[http://www.cameraontheroad.com/index.php?page_id=538 Accessibility Policy Page - an example] *[http://diveintoaccessibility.org/day_30_creating_an_accessibility_statement.html Creating an Accessibility Statement] *[http://fawny.org/blog/2003/09/?fawnyblog#IC-Style Review: International Compliant Style (IC-Style) Accessibility] *[http://www.literarymoose.info/help/accessibility.html Accessibility Statement and Resources] *[http://www.oreillynet.com/pub/a/javascript/synd/2001/11/30/accessibility.html A Primer for Accessible Web Pages] *[http://www.section508.gov/ Section 508 US Accessibility Law] *[http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html Checkpoints for Web Accessibility Guidelines] ===为网站做可访问性测试=== 有很多网站提供在线帮助测试网站可访问性的服务,下面介绍一些: *[http://www.cameraontheroad.com/learn/web/validate.html#accesstests Testing your site for accessibility] *[http://leb.net/blinux/blynx/sarsi.html An Introduction to Speech-Access Realities for Interested Sighted Internauts] *[http://www.cs.cornell.edu/Info/People/raman/emacspeak/emacspeak.html EmacSpeak] *[http://www.it-enquirer.com/publishing/web-development/aural-css.html Introduction to the Voice, Your Aural Font - CSS Tutorial] *[http://www.digital-web.com/features/feature_2002-04.shtml Accessible by Design] *[http://www.anybrowser.org/campaign/ Viewable with Any Browser Campaign] *[http://www.diveintoaccessibility.org/ Dive Into Accessibility] ==相关资料== 如果希望制作设计的网站具有较高的可访问性,下面这些工具可能会起到一定作用: *[http://www.accessifyforum.com/ Accessibility Forum] *[http://www.makoa.org/web-design.htm Makoa.org's Accessibility Resources and Information] *[http://www.gawds.org/ Guild of Accessible Web Designers] 更多可访问性相关资料请点击: *[http://www.w3.org/WAI/WCAG20/quickref/ W3C Web Accessibility Initiative 'How To Meet WCAG2.0' Quick Reference] *[http://www.cs.tut.fi/%7Ejkorpela/www/acctools.html Notes on Tools for Checking and Improving Web Page Accessibility] *[http://arkansas.blogsome.com/2005/03/03/web-site-accessibility-design-for-business-blogs/ Website Accessibility Design for Business Blogs] *[http://brainstormsandraves.com/archives/2002/05/14/dont_fake_your_markup_accessibility_issues_for_css/ Don't Fake Your Markup Accessibility Issues for CSS] *[http://builder.com.com/5100-31-5073307.html How Alt Attributes Help Accessibility] *[http://builder.com.com/5100-6371-1044627.html Five Site-accessibility Tips to Help Comply with Section 508] *[http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnsiteplan/html/improvingsiteusa.asp Improving Web Site Usability and Appeal] *[http://trace.wisc.edu/world/web/ Designing More Usable Web Sites] *[http://www.dracos.co.uk/web/accessibility/ Dracos Accessibility Examples (using popular "inaccessible" websites and redesigning them to be accessible)] *[http://www.useit.com/ Useit.com CSS and Usability] *[http://www.w3.org/TR/2003/NOTE-di-princ-20030901/ W3C Device Independence Principles - Understanding Accessibility Issues] *[http://www.w3.org/TR/WAI-WEBCONTENT/ Guidelines for Creating Accessible Web Sites] *[http://www.w3.org/WAI/wcag-curric/ Curriculum for Web Content Accessibility Guidelines 1.0] *[http://aware.hwg.org Accessible Web Authoring Resources and Education] *[http://trace.wisc.edu/world/web/ Designing More Usable Web Sites - massive links ] *[http://accessites.org/ Accessites.org (site testing and general articles on accessibility)] *[http://green-beast.com/blog/?cat=6 Beast-Blog Accessibility Articles] ==相关条目== *[[Drupal]] *[[OBLOG]] *[[X-Space]] *[[SaBlog-X]] *[[Bo-Blog]] [[category:WordPress中文文档|W]] [[category:WordPress网站开发|W]]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)
本页使用的模板:
模板:WordPress导航
(
查看源代码
)(受保护)