可访问性

可访问性

可访问性针对包括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的链接和WordPress Loop中使用titile的示例：

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

下面我们来分析这个示例。<h2>标签中包含有文章标题的链接，该链接是对固定链接（文章的url地址）的调用。 链接后跟有一个rel，rel将relationship作为bookmark依附于链接。之后是title属性。这个示例先后定义了”Permanent Link to”和tthe_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的生成方式。 详细情况参见 模板标签。

可访问性考虑因素

为自己设计WordPress主题或公共发布时，除了要能够帮助用户“听见”图片和链接的说明外，还有另外一些内容也应该纳入考虑范围。

创建可读页面

对网页设计者来说，有时他们能做的最简单的事情就是创建一个更方便阅读的页面。在一个页面上出现拥挤的内容和版式、混杂的字体样式和过多信息，不仅混乱，也不易于阅读。

开发WordPress主题时，需要额外注意网页不同元素之间的空白部分和伪空白部分。确保在大部分屏幕分辨率下辨认所设置的字体。位置导航元素应设置在常规位置上，便于人们点击进入网站其它部分。

如果希望测试网站主题的易读性，可以考虑请一位60岁的老人做测试者。这是一个好主意

不同前景/背景配色、字体类型和单词样式网站的可读性

颜色和可访问性

颜色同样影响着人们“查看”网页的能力。大约10%的互联网用户在辨色上存在问题，色盲甚至无法辨色。很多网站提供对网站用色选择的测试。当然可以忽略这个问题，但优秀的设计者应该面面俱到。

• Can Color Blind Users See Your Web Page?
  Q42 Color Blindness Simulator
  Visibone’s Color Blind Color Chart
  Color Blind Web Filter – Testing Online
  Blindness-Related Resources on the Web and Beyond
  Accessible Web Page Design – Resources for the Visually Impaired
  Design Considerations: Readers with Visual Impairments
  Vischeck (simulates color blind vision)
  GrayBit.com (grayscale page conversion to test visual contrast for the colorblind)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（或其他数字）来控制窗口的切换。希望以后所有浏览器和网站都能够使用统一的存取关键字标准。

同时用户也可以选择自己的存取关键字设置，但最好在网站的侧边栏和页脚部分开辟“可访问性规则”版块，方便访问者查找网站主人所使用的访问关键字。

• Clagnut: Accesskey Standards
  Using accesskey attribute in HTML forms and links
  W3’s Forms in HTML Documents – Using Accesskey
  Accesskeys: Unlocking Hidden NavigationAccesskeys: Unlocking Hidden Navigation

浏览器的可访问性

在IE浏览器中进行网站设计相对顺利，但在Firebox或者Safari浏览器中进行设计会有所不同，甚至可以说是混乱。同一个网站在不同浏览器上的显示效果可能有所不同。考虑到可访问性的因素，从不同浏览器上访问就成了关键问题。

1. 验证：用验证测试 彻底检查网站的XHTML和CSS代码，确保没有代码错误。

2. 浏览器测试：在不同的浏览器上测试网站并根据测试结果做相应调整，使网站能被不同浏览器访问。

3. 操作系统测试：不同操作系统上的浏览器也可能对同一个网站产生不同显示效果。如果周围没有那么多装有不同操作系统的电脑，可以借助朋友和家人的电脑，也可以去机房或网吧，在安装了不同操作系统的电脑上测试网站的表现形式。

测试网站的可访问性并不局限于浏览器测试。不同的屏幕分辨率和颜色质量也能影响网站的可访问性。可以通过桌面属性设置或网站开发工具或以下某些工具来改变屏幕分辨率和颜色质量。

• 验证工具
  HiSoftware’s Online Content Accessibility and Quality Tester
  Evaluation, Repair, and Transformation Tools for Web Content Accessibility
  W3C Web Accessibility Initiative: Evaluating Websites for Accessibility
  WAVE Online Accessibility Tool Checker
  屏幕分辨率测试
  Pcman’s Web Page Screen Resolution Tester
  Web Page Monitor (check for different sized monitors)
  浏览器测试
  AnyBrowser’s Web Site Viewer – How does your site look to other browsers
  Web Browsers Compatibility from Delorie
  Viewing A Sample Page Under Various Conditions and Uses
  NetMechanic’s Browser Compatibility
  Learnwebdesign’s Browser References
  Public Lynx Access Browsers
  Checking with Multiple Browsers (the hard core way)
  手机上网以及掌上电脑上网

  台式电脑或笔记本电脑不再是唯一的网页浏览模式，目前通过手机和掌上电脑上网的人越来越多。那么网站在小屏幕上是如何显示的呢？

  一些为小屏幕设置的浏览器抛弃网站的样式表单直接显示文字内容，就像在WordPress网站中打印页面一样。其它浏览器显示压缩后的整个屏幕内容。在样式列表中添加掌上多媒体样式后，用户可以设置自己的网站在小屏幕上的显示状态。

  如果想为PocketIE, NetFront和Opera浏览器添加单独的掌上样式表单（见”handheldstyles.css”示例），需要在主题header.php文件的屏幕样式表单后添加以下代码。为了能让PocketIE, NetFront,和Opera这三个浏览器都能正确显示内容，必须确保语句的准确性。

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

  以下文章包含更多相关信息：

  Code Style Media Monitor (projection, print, etc)
  Guide to CSS2 Support in PDA/Handheld Browsers
  W3C Mobile Access – Seamless Web Access From Mobile Devices
  W3C Mobile Access Activity Statement
  CSS Mobile Profile Test Suite
  W3C CSS Mobile Profile 1.0
  W3C HTML 4 Specs on Mobility – Handheld
  Aural style sheets
  The W3C CSS2 recommendation, Section 7: Media types
  Web Design for Mobility – Handheld, PDA, etc.
  开辟“可访问性规则”版块

  网站具有自己的“可访问性规则”也已经成为一种趋势，网站专门开辟一个页面向访问者说明本网站的可访问性标准。在英国，根据《残疾歧视法案》，不能访问的政府或企业网站将会被起诉，在美国这种规定也越来越普遍。遵守可访问性标准并不难，只要在网站中设置一些按键组合，让每个访问者都看到网站的大部分内容。

  Accessibility Policy Page – an example
  Creating an Accessibility Statement
  Review: International Compliant Style (IC-Style) Accessibility
  Accessibility Statement and Resources
  A Primer for Accessible Web Pages
  Section 508 US Accessibility Law
  Checkpoints for Web Accessibility Guidelines
  为网站做可访问性测试

  有很多网站提供在线帮助测试网站可访问性的服务，下面介绍一些：

  Testing your site for accessibility
  An Introduction to Speech-Access Realities for Interested Sighted Internauts
  EmacSpeak
  Introduction to the Voice, Your Aural Font – CSS Tutorial
  Accessible by Design
  Viewable with Any Browser Campaign
  Dive Into Accessibility
  相关资料

  如果希望制作设计的网站具有较高的可访问性，下面这些工具可能会起到一定作用：

  Accessibility Forum
  Makoa.org’s Accessibility Resources and Information
  Guild of Accessible Web Designers

  更多可访问性相关资料请点击：

  W3C Web Accessibility Initiative ‘How To Meet WCAG2.0’ Quick Reference
  Notes on Tools for Checking and Improving Web Page Accessibility
  Website Accessibility Design for Business Blogs
  Don’t Fake Your Markup Accessibility Issues for CSS
  How Alt Attributes Help Accessibility
  Five Site-accessibility Tips to Help Comply with Section 508
  Improving Web Site Usability and Appeal
  Designing More Usable Web Sites
  Dracos Accessibility Examples (using popular “inaccessible” websites and redesigning them to be accessible)
  Useit.com CSS and Usability
  W3C Device Independence Principles – Understanding Accessibility Issues
  Guidelines for Creating Accessible Web Sites
  Curriculum for Web Content Accessibility Guidelines 1.0
  Accessible Web Authoring Resources and Education
  Designing More Usable Web Sites – massive links
  Accessites.org (site testing and general articles on accessibility)
  Beast-Blog Accessibility Articles

分类：中文手册