编辑“WordPress:Accessibility”

__TOC__
可访问性是针对每个人而言的，甚至是WordPress用户。但是可访问性是什么呢？

网页设计中的可访问性指的是创建一个网页设计，每个人都可以使用。这里指的是任何人都可以使用的。不仅仅是视力有缺陷的，残疾的，或者其它的使用网页具有挑战性的人群。这包括了那些俄罗斯和南非人，他们使用了物理上有缺陷的电脑，这些电脑被连接到发电机上，而这个发电机每天只运行两个小时，这些人试图用旧的浏览器和拨号式连接，连接到因特网。这些人包括来自不同国家说着不同语言的人们，但是他们试图通过阅读你的博客或者你的网站来学习你的语言。

这些人也包括使用手机和笔记本电脑来访问你的博客。这些人，包括大概25%的的因特网用户，这些用户身体上有某种缺陷，但是他们需要访问网页，作为一个网页设计者（或者tweaker）,你应该知道关于可访问性相关的知识。

=描述图像和链接=

最简单的的例子是，那些有视力或者身体缺陷的网络用户，依靠你的帮助来"看见"或者"听见"你的内容。当你包含了一个图表或者照片，在<tt>alt</tt> part of the <img>标签中将它描述。

<pre>...球蹦得越来越高 
as <img scr="ball.jpg" alt="一个红蓝相间的球的图画" /> 
孩子在弹它....</pre>

那些依赖于屏幕阅读者的人可能会听到，"球跳得越来越高因为-图像-一个红蓝相间 的球的图像-小孩使球弹起来了。"  

利用<tt>alt</tt>属性，也有其它的好处。在有些浏览器中（例如IE）, 当搜索到一个图像的时候，<tt>alt</tt>描述作为一个tooltip出现。在其它的浏览器中（例如Firefox）,当因为一些原因图片不能被载入的时候，就会出现描述。

许多人利用这些属性来对图像或者链接"描述" 或者"发表编者意见"。这并不是使用属性的主要目的。它的真正目的是要"替换"图像或者链接。描述性的语言必须让那些看不到图像的人明白，屏面上显示得是什么。如果描述性的语言超过了几个单词，你也可以使用<tt>longdesc</tt>链接到一个描述性的文件(<tt>ball.html</tt>)这个文件完完全全地描述了图像。

<pre>...球跳得越来越高因为 
<img scr="ball.jpg" alt="一个红蓝相间的球的图像" 
longdesc="ball.html" /> 
孩子使球弹跳起来了....</pre>


有的屏面阅读器使用了<tt>alt</tt> 和 <tt>title</tt>属性，或者其中的任何一个属性，因此你可能想要包含两个：

<pre>...球跳得越来越高因为 
<img scr="ball.jpg" alt="一个红蓝相间的球" 
title="红蓝相间的球" /> 
孩子使球跳起来了....</pre>

但是有时候，给图像添加描述，只会使内容变得更加地散乱。如果图像对于主题并不重要，为什么向人们传输比所需信息还要多的信息呢。只要通过在一个图像中列出<tt>alt</tt>和<tt>title</tt>作为空白，你就能维持可访问性标准。这样的话，图像就会被跳过了，因为它没有添加到内容上。

<pre>
<img scr="flower.jpg" alt="" title="" />
</pre>

用链接中的<tt>title</tt>，你可以使用同样的方法：

<pre>If you are 
<a href="http://example.com/talent-shopping/" 
title="关于购买照相模型的文章">
购买模型</a> 
为你的肖像摄影....</pre>

这样描述性的话语添加到你的图像或者链接上不仅仅会帮助你的用户，也会提高你的站点的被搜索到的机率。Google,Yahoo,和其它的搜索引擎使用<tt>alt</tt> 和<tt>title</tt>属性来显示搜索结果。这样也会影响你的网页的排名。

=WordPress 和可访问性=

WordPress能够立即地帮助你使你的站点能够被访问。不幸地是，并不是所有的WordPress主题作者都有时间和耐心来维持这些可访问性标准。下面是一个例子，关于在<tt>index.php</tt> 和[[WordPress:The Loop|WordPress Loop]]的一个链接中使用<tt>title</tt>:


<pre><h2>
<a href="<?php the_permalink() ?>" rel="bookmark" 
   title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?>
</a>
</h2>
</pre>

让我们来看看这个。这是<tt>h2</tt>标签里的一个链接，关于文章标题的。链接里面有一个访问[[WordPress:Using Permalinks|permalink]]的邀请，文章的地址。它紧跟着一个<tt>rel</tt>。既然这样，它显示"Permanent链接到"然后是文章的地址，是由<tt>[[WordPress:Template Tags/the_title|the_title()]]</tt> 模板标签自动产生的。标题标签便被再次地用作链接名。


使用这些模板标签，WordPress自动地从数据库得到信息来填写链接信息，使链接更容易访问。

你可以将<tt>title</tt>更改为除了"Permanent Link to"的其它的任何东西。下面是一个例子：

<pre><a href="<?php the_permalink() ?>" rel="bookmark" 
   title="文章关于 <?php the_title(); ?>">
<?php the_title(); ?>
</a>
</pre>

产生链接<tt>title</tt>的同一种方法，在你的WordPress站点上得到了普遍的使用，包括使用在你的类别，网页，和归档的工具条上发现的列表上。这个工作是为你做的。在有些情况下，你甚至可以自定义标题产生的方式。看看[[WordPress:Template_Tags|模板_标签]]上每个标签的详细信息。

=可访问性要考虑的事=

当你为你自己设计WordPress主题以作为公共发行的时候，除了帮助用户"听到"关于链接和图像的描述以外，你还要考虑一些其它的事情。

==创建一个可读的网页==

有时候，一个网站设计者可以做的一个最简单的事情，就是创建一个更可读的网页。一个单独的网页上出现了拥挤的文本，杂乱的外观，混乱的字体形式，以及更多的信息，不仅仅使网页看起来混乱，而且使网页阅读变得很难。

当你发展你的WordPress主题的时候，花一些额外的时间，来注意一下网页上不同的元素周围的白色空间或者"空的" 空间。要确保字体足够大，在大多数的屏面分辨率上能够阅读。将导航元素放到合乎逻辑的位置，这样人们会自然地看到那儿，并且在你的站点内部导航。

如果你真的想要好好地测试一下你的站点的主题的可读性，考虑一下让一个超过六十岁的人来访问一下你的站点。这是一个非常好的测试。;-)

* [http://hubel.sfasu.edu/research/AHNCUR.html Readability Of Websites With Various Foreground/背景颜色混合体, 字体形式和单词形式]

==颜色和可访问性==

颜色的选择也会影响一个人"阅读"一个网页的能力。大约有10%的因特网用户在观察颜色方面有问题，特别是那些有色盲症的人。有许多的网站可以帮助你测试你的颜色选择，看看你能够"看到"和识别多少颜色。你没有必要围绕着这些问题来设计网站，但是你知道的更多，就更能够成为一个更好的网页设计者。
* [http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnhess/html/hess10092000.asp 色盲患者能够阅读你的网页吗?]
* [http://www.q42.nl/demos/colorblindnesssimulator/ Q42 色盲 Simulator]

* [http://www.visibone.com/color/#card Visibone's Color Blind 比色图表]

* [http://colorfilter.wickline.org/ Color Blind Web Filter – 在线测试]

* [http://www.hicom.net/~oedipus/blind.html 失明-网络以及网络以外的相关资源]

* [http://www.library.uwsp.edu/aschmetz/Accessible/pub_resources.htm Accessible Web Page Design – 对于视力有缺陷的资源]
* [http://www.lcc.gatech.edu/gallery/dzine/access/ 设计需要考虑的事项: 有视觉缺陷的读者]

* [http://vischeck.com/ Vischeck (模拟色盲视觉)]

== Access Keys ==

对于身体上或者视力上有缺陷的人来说，导航到一个站点的方法之一就是通过使用Access Keys。这是一些标准的按键，当你按这些键的组合的时候，这些键会使指针移到你的网页上的不同的位置上。例如，如果你要高级搜索一个链接到一个网页上，用户可以在Windows中按<tt>alt+s</tt>并且在Mac中按<tt>ctrl+s</tt>，指针就会跳到搜索链接上。设置链接中accesskey到一个搜索网页的代码是：

<a href="search.php" accesskey="s">Search</a>

下面是使用[[WordPress:Pages|网页]]模板标签在一个工具条内使用access keys的例子：
<pre>
<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>
</pre>

当前列出了网页的模板标签并不支持access keys,但是希望它在未来的版本中能够支持。

美国政府设置了一个在官方网站上使用access keys的国家标准，许多网站管理者也在国际间采取了同样的这些标准。不幸地是，Mozilla Firefox 因特网浏览器使用<tt>alt+1</tt>,或者其它的什么数字，来控制标签窗口之间的移动，这样便破坏了这种使用。希望，所有的浏览器和网站不久都能够有一个使用access keys的标准。

同时，你可以学习不同的选项，并且选择你自己的，但是我们推荐你在你的站点上创建一个"可访问性原则"的网页，这个网页可以在你的工具条或者页脚上链接，这样可以帮助一些用户找出你使用什么样的access keys。

* [http://www.clagnut.com/blog/193/ Clagnut: Accesskey 标准]

* [http://www.cs.tut.fi/~jkorpela/forms/accesskey.html 在HTML形式和链接中使用accesskey属性]

* [http://www.w3.org/TR/REC-html40/interact/forms.html HTML文件中W3的形式- 使用 Accesskey]

* [http://www.alistapart.com/articles/accesskeys/ Accesskeys: 开放隐藏的导航]

==关于浏览器的可访问性==

当你在Internet Explorer上设计你的网站，使你的网站运行的时候，这是一件令人愉悦的事情，但是当你使用Firefox或者Safari来查看你的网站的时候，你的网站不仅看起来与原先的不一样，甚至还可能被打乱了。或者情况刚好与这个相关。并不是所有的浏览器显示所有的网站都是相同的。如果你关注可访问性的话，通过不同的浏览器访问，变得至关重要。

#'''确认:'''通过[[WordPress:Validating a Website|确认测试]]来检查一下你的网站的代码。彻底地检查XHTML和CSS以确保没有错误。

# '''测试运行浏览器:'''通过不同的浏览器试着运行你的站点，做一些你可以做的更改，这样你的站点通过浏览器能够查阅。

# '''试着运行操作系统:'''不同操作系统中的不同的浏览器不同地"观看"网页。如果你没有几台电脑，问问你的朋友或者家人，或者潜入地方图书馆，和/或者网吧，看看那儿有没有不同的操作系统，你可以要使用的来访问你的站点。


测试你的站点的可访问性并不仅仅局限于浏览器上。站点的可访问性也会受到屏面分辨率和颜色质量的影响。你可以使用桌面属性设置来更改你自己的屏面分辨率和颜色质量，或者Firefox的Developer工具，或者下面所列出的一些其它的资源。

===确认资源===

* [http://www.hisoftware.com/accmonitorsitetest/ HiSoftware的在线内容可访问性和质量检测器]

* [http://www.w3.org/WAI/ER/existingtools.html 网络内容可访问性的评估，修补，和更改工具]

* [http://www.w3.org/WAI/eval/ W3C Web Accessibility Initiative: 评估站点可访问性]

* [http://www.wave.webaim.org/index.jsp WAVE 在线可访问性工具Checker]

===屏面分辨率测试===

* [http://www.thepcmanwebsite.com/screen_resolution.shtml Pcman的网页屏面分辨率检测器]

* [http://members.optushome.com.au/sjyounis/window2.html 网页监控器(检查不同大小的监控器)]


===浏览器测试===

* [http://www.anybrowser.com/siteviewer.html AnyBrowser的网站阅读器 – 对于其它的浏览器你的网站看起来是怎样的？]

* [http://www.delorie.com/web/wpbcv.html 来自Delorie的网络浏览器兼容性]

* [http://www.cameraontheroad.com/learn/web/pageview.html 在不同的情况和不同的用法时，访问一个单独的网页]

* [http://www.netmechanic.com/cobrands/MarketingTips/compat_check.htm NetMechanic的浏览器兼容性]

* [http://www.shire.net/learnwebdesign/browser.htm Learnwebdesign的浏览器参考资料]

* [http://www.subir.com/lynx/public_lynx.html Public Lynx 访问浏览器]

* [http://www.thesitewizard.com/webdesign/multiplebrowsers.shtml 用多个浏览器查看 (处于核心位置的方式)]

==手机和手提电脑==

从你的办公桌或者膝上型电脑上访问一个网页已经不再是一种标准的访问方式了。许多人现在通过手机和手提电脑来接触网络。在一个非常小的屏面上显示的时候，你的网站会怎样做呢？
 
一些小的屏面浏览器只是剥去了站点的样式表，只剩下内容，例如当在你的WordPress网站上[[WordPress:Styling for Print|打印一张网页]]时，你所看到的内容。其它的小屏面浏览器通过压缩显示了整个屏面。通过给你的样式表添加手提媒体样式，你也可以控制你的站点在小屏面上的外观。

要包含一个分开的手提样式表（在例子"handheldstyles.css"中得到命名），目标是PocketIE, NetFront, 和Opera浏览器；将下面的行添加到你的主题的header.php，在屏面样式表'''后面'''。语法要求可能是要显示给所有三个PoketPC浏览。

<style type="text/css">@import url(<?php bloginfo('stylesheet_directory'); ?>/handheldstyles.css) handheld;</style>

以下的文章有更多的信息。

* [http://www.codestyle.org/css/media/index.shtml 代码样式媒体监控器 (放映,打印，等等)]

* [http://www.macedition.com/cb/resources/handheldbrowsercsssupport.html Guide to CSS2 Support in PDA/手提浏览器]

* [http://www.w3.org/Mobile/ W3C Mobile Access – 从可移动的设备中Seamless Web Access]

* [http://www.w3.org/Mobile/Activity W3C 可移动访问活动声明]

* [http://www.w3.org/Style/CSS/Test/Mobile/1.0/current/ CSS 可移动基本资料测试组]

* [http://www.w3.org/TR/css-mobile W3C CSS 可移动基本资料 1.0]

* [http://www.w3.org/TR/NOTE-html40-mobile/ W3C HTML 4 Specs on Mobility – 手提的]

* [http://www.w3.org/TR/REC-CSS2/aural.html 听觉样式表]

* [http://www.w3.org/TR/REC-CSS2/media.html The W3C CSS2 推荐, 第七部分: 媒介类型]

* [http://www.websitetips.com/wireless/ 关于可移动性的万维网设计 – 手提的, PDA, 等等。]


=创建一个可移动性方针=

一个越来越增长的趋势就是站点拥有了自己的可访问性方针，一个网页向它的用户通知可访问性标准，用户使用了这个标准后，任何人就都可以访问你的网页。在英国，由于存在残疾歧视法案，因为残疾人不能访问一些网站，便出现了一些对于政府和团体网站的一些诉讼和抱怨，美国也有发生这种情况的趋势。适应可访问性标准并不难，只要几个额外的按键来帮助每个人从你的网站上得到最多的内容。

* [http://www.cameraontheroad.com/index.php?page_id=538 可访问性方针网页 – 一个例子]

* [http://diveintoaccessibility.org/day_30_creating_an_accessibility_statement.html 创建一个可访问性声明]

* [http://fawny.org/blog/2003/09/?fawnyblog#IC-Style 回顾: 国际可访问性标准形式 (IC-Style)]

* [http://www.literarymoose.info/help/accessibility.html 可访问性声明和资源]

* [http://www.oreillynet.com/pub/a/javascript/synd/2001/11/30/accessibility.html 可访问网页的初级读本]

* [http://www.section508.gov/ Section 508 美国可访问性法律]

* [http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html 网络可访问性指导方针检查点]

=检查你的站点的可访问性=

有许多的在线服务会测试你的站点的可访问性标准。下面是一些：

* [http://www.cameraontheroad.com/learn/web/validate.html#accesstests 测试你的站点的可访问性]

* [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 声音，你的听觉字形的介绍- CSS 指南]

* [http://www.digital-web.com/features/feature_2002-04.shtml 通过设计能够访问]

* [http://www.anybrowser.org/campaign/ 用任何浏览器都能看见]

* [http://www.diveintoaccessibility.org/ 钻研可访问性]

=资源=

你真的要认真地创建和设计可访问的站点，有一些人，会真的愿意帮助你，或者让你在这方面了解一些：

* [http://www.accessifyforum.com/ 可访问性论坛]

* [http://www.makoa.org/web-design.htm Makoa.org's 可访问性资源和信息]

* [http://www.gawds.org/ 可访问性网页设计协会]

关于更多的可访问性和设计你的站点时想到了可访问性，请访问下面的链接：

* [http://www.cs.tut.fi/~jkorpela/www/acctools.html 关于检查和提高网页可访问性的工具的记录]

* [http://arkansas.blogsome.com/2005/03/03/web-site-accessibility-design-for-business-blogs/ 关于商业博客的网站可访问性设计]
* [http://brainstormsandraves.com/archives/2002/05/14/dont_fake_your_markup_accessibility_issues_for_css/ 不要为CSS伪造你的Makeup可访问性问题]
* [http://builder.com.com/5100-31-5073307.html怎样 Alt 属性帮助可访问性]

* [http://builder.com.com/5100-6371-1044627.html 五个站点可访问性小贴士帮助你安装508部分来做]

* [http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnsiteplan/html/improvingsiteusa.asp 提高站点的使用和吸引]
* [http://trace.wisc.edu/world/web/ 设计更易于使用的站点]

* [http://www.dracos.co.uk/web/accessibility/ Dracos 可访问性例子 (使用流行的"不可访问的" 站点并且再次设计这些站点使其能够被访问)]
* [http://www.useit.com/ Useit.com CSS和可用性]

* [http://www.w3.org/TR/2003/NOTE-di-princ-20030901/ W3C 设备无关性原则 – 了解可访问性问题]

* [http://www.w3.org/TR/WAI-WEBCONTENT/ 创建可访问站点的指南]

* [http://www.w3.org/WAI/wcag-curric/ 网站内容可访问性指南1.0课程]

* [http://aware.hwg.org 可访问万维网授权的资源和教育]

* [http://trace.wisc.edu/world/web/ 设计更易于使用的网站 – 很多的链接  ]



{{Copyedit}}