WordPress:Accessibility

来自站长百科
跳转至: 导航、​ 搜索

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

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

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

描述图像和链接[ ]

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

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

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

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

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

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


有的屏面阅读器使用了alttitle属性,或者其中的任何一个属性,因此你可能想要包含两个:

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

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

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

用链接中的title,你可以使用同样的方法:

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

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

WordPress 和可访问性[ ]

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


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

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


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

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

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

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

可访问性要考虑的事[ ]

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

创建一个可读的网页[ ]

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

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

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

颜色和可访问性[ ]

颜色的选择也会影响一个人"阅读"一个网页的能力。大约有10%的因特网用户在观察颜色方面有问题,特别是那些有色盲症的人。有许多的网站可以帮助你测试你的颜色选择,看看你能够"看到"和识别多少颜色。你没有必要围绕着这些问题来设计网站,但是你知道的更多,就更能够成为一个更好的网页设计者。

Access Keys[ ]

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

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

下面是使用网页模板标签在一个工具条内使用access keys的例子:

<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>

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

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

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

关于浏览器的可访问性[ ]

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

  1. 确认:通过确认测试来检查一下你的网站的代码。彻底地检查XHTML和CSS以确保没有错误。
  1. 测试运行浏览器:通过不同的浏览器试着运行你的站点,做一些你可以做的更改,这样你的站点通过浏览器能够查阅。
  1. 试着运行操作系统:不同操作系统中的不同的浏览器不同地"观看"网页。如果你没有几台电脑,问问你的朋友或者家人,或者潜入地方图书馆,和/或者网吧,看看那儿有没有不同的操作系统,你可以要使用的来访问你的站点。


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

确认资源[ ]

屏面分辨率测试[ ]


浏览器测试[ ]

手机和手提电脑[ ]

从你的办公桌或者膝上型电脑上访问一个网页已经不再是一种标准的访问方式了。许多人现在通过手机和手提电脑来接触网络。在一个非常小的屏面上显示的时候,你的网站会怎样做呢?

一些小的屏面浏览器只是剥去了站点的样式表,只剩下内容,例如当在你的WordPress网站上打印一张网页时,你所看到的内容。其它的小屏面浏览器通过压缩显示了整个屏面。通过给你的样式表添加手提媒体样式,你也可以控制你的站点在小屏面上的外观。

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

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

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


创建一个可移动性方针[ ]

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

检查你的站点的可访问性[ ]

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

资源[ ]

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

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


This article is [[WordPress::Category:Copyedits|marked]] as in need of editing. You can help Codex by editing it.