当前位置: 首页 > 网络学院 > 设计教程 > 设计理念 > 确保网页的易操作性

设计理念
图形简介:第一部分
图形简介:第二部分
图形简介:第三部分
图形简介:第四部分
网站规划101
通过网络赚取客户的信任
网站配色:第一部分
网站配色:第二部分
CGI剖析:第一部分
CGI剖析:第二部分
CGI剖析:第三部分
下拉表单:第一部分
下拉表单:第二部分
下拉表单:第三部分
网站设计公司:第一部分
网站设计公司:第二部分
Web 标准
HTML 元素
样式表
Web 易读性

设计理念 中的 确保网页的易操作性


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-03-01   浏览: 1766 ::
收藏到网摘: n/a

Web_AccessibilityDid you know that nearly 20 percent of all Web users have some form of disability?

你知道吗,接近20%的网络用户是残疾用户。

"Making your site accessible for all is a matter of courtesy, is good business practice, and is not difficult," explains Robert Roberts, a professional SEO who owns the SEO Toolbox.

“确保网站所有用户的可操作性,是一种礼貌行为、一条商业惯例,也是不难做到的一件事情”,经营 SEO Toolbox的专业SEO设计者,Robert Roberts解释说。

In fact, Roberts believes that Web accessibility issues are so important that he's been having monthly chat sessions on the subject for students at the Academy of Web Specialist. He's also created a special section of his Web site that's devoted to accessibility issues.

实际上,Roberts认为网站可操作性是个很重要的问题。他每个月都会在Web Specialist研究院与学生探讨这个问题,并且他还在他的网站中开辟了专门的板块,介绍网站可操作性问题。

Roberts states that disabilities can be anything from "simple" color blindness to more severe disabilities.

Roberts解释说,网站保证从简单的色盲到更严重的残疾用户都可能登录你的网站。

The Use of Alt Text to Solve Accessibility Issues
使用ALT文本解决易操作问题

"Let's start with image alt tags. You can use the alt tag to your advantage, not just for SEO purposes. The alt description tells those users with assistive technologies what the image is about.

我们首先谈论alt图片标签,你可以尽量使用alt标签,不仅是因为SEOAlt描述可以帮助缺乏网络知识的用户了解图片信息。

"There is the issue of lots of clear images meant to be used as spacers in layouts. Should you use an alt tag for every one of those? Yes, in a sense, you use what's called the Null Alt, meaning an empty alt tag, like this: alt="". Notice that there is no space between the quotes, which means that assistive devices will bypass the image and not try to explain it. But if you don't use it, assistive devices will show a blank where the image would be or cause other display issues.

在布局中利用许多清晰图片分离内容时,会出现一些问题。这时你应该在每张图片中利用alt标签。其实你运用的是Null Alt,也就是空alt标签alt="")。在双引号之间并没有空格,这样辅助工具就会绕过图片,不会对图片加以说明。如果不用这个标签,辅助工具会把图片显示为空白,或者引发其它问题。

"The alt tag for navigation images is critical. Actually, you should use text navigation wherever possible, as good SEO's, but there are times when the layout uses buttons, which brings up another issue - that of navigation preceding content."

导航图片更要运用alt标签。其实,如果有必要,应该使用导航文字作为搜索引擎优化的方法。但有时在布局中使用按钮时,会出现另外一个问题:导航优先

Solving the Problem of Navigation Preceding Content
解决导航优先的问题

Roberts continues, "When a person using an assistive device opens a Web page, he or she is usually greeted by lots of navigation before getting to the content. Furthermore, an assistive device like a screen reader will read ALL of the navigation every single time. One solution is to include a "skip navigation" link that allows the person to jump to the page content. This can be in the form of a tiny hidden clear image linked to an anchor tag.

Roberts还提到:“用户在利用辅助工具打开网页时,会首先注意导航内容,而不是正文内容。并且类似于屏幕阅读器的辅助工具,每时每刻都在阅读导航内容。一个解决方案就是:设置“忽略导航”的链接,允许用户直接浏览网页内容,这时可以设计与锚文本链接的隐藏清晰图片。

"If you would like to see an example, take a look at the source code for any page at SEO Toolbox. The logo at the top of the page is linked to the menu, because the menu markup is actually at the bottom of the HTML code. You would be able to use this strategy with any assistive device or in a text browser like Lynx."

如果想要找一个参考,你可以浏览SEO Toolbox任何网页中的源代码。网页顶端的logo与菜单进行连接,因为菜单编码其实在HTML编码的底端,你可以利用任何辅助工具实行这个方法,或者利用类似于Lynx的文本浏览器,实现这个目标。

Why Accessibility Issues Are So Important These Days
可操作性问题重要

"One of the reasons all of this is so important," says Roberts, "is because of a lawsuit in progress that looks like it may get to the Supreme Court. A blind man in Florida is suing Southwest Airlines because he is unable to complete normal transactions on their Web site."

Roberts解释可操作性很重要一个原因是,如果设计不合理,有可能会引起诉讼纠纷。佛罗里达州曾经出现过一位盲人因为不能在Southwest Airlines网站中完成交易,而对这个网站进行了控诉。

By means of explanation, the Americans with Disabilities Act provides provisions on the accessibility of public accommodations to the disabled, and this is the Act that is being referenced in the case.

通过辩论,美国残疾人法案提供了公共设施应该便于残疾人操作的条款。这诉讼就参考了这个法案

The plaintiffs in the case claim that Congress wrote the ADA so broadly that the Internet is covered, meaning that it 'applies to Internet Web sites just as it does to brick-and-mortar facilities like movie theaters and department stores.'

这个案件中的原告一直坚持:议会提到的ADA包含内容很广泛,因特网也包含其中。这就意味着网站就像电影院商店一样。

The defendants (Southwest Airlines and American Airlines) have taken the position that Congress never meant to include the Internet, because cyberspace was in its infancy at the time the law was written. So, the argument is whether a Web site is a 'public accommodation' under Title III of the ADA.

被告(西南航空以及American Airlines)却坚持:议会没有明确表示包含因特网,因为这个法案出台时,网站刚刚起步。所以这个问题主要围绕网站是否为ADA第三标题下的公共设施进行讨论。

"But," continues Roberts, "there is a precedent that will surely influence the outcome. In Australia, a similar suit was brought a couple of years ago by a blind person against the Olympic Committee because he could not get tickets online. The suit resulted in a win for him: a $20,000 damage settlement.

Roberts继续说:“但是,曾经的诉讼先例肯定会影响结果。”在澳大利亚,几年前出现过一个盲人状告 Olympic Committee的事件,就是因为这个客户不能在网上买票。参考这个案例,最后判定客户得到20000美元的精神赔偿。

"What all this means is that sooner or later, any Internet site offering goods and services will have to comply with accessibility standards."

这就表明提供商品或服务的网站都必须遵循可操作标准。”

In Roberts' accessibility section, he's placed a link to the lawsuit, if you'd like to learn more.

如果希望了解这次诉讼的更多信息,可以浏览Robertsaccessibility section网站设置了相关链接

What if you have an image that conveys information, such as a pie chart, graph, or schedule? A simple alt tag description isn't sufficient to convey that information adequately. Roberts explains a work-around for this problem:

如果设置传输信息的图片(例如:圆形分格统计图表、曲线图、计划表)呢?简单的alt标签已经不足以充分地传输这些信息,Roberts介绍了解决这个问题的方法:

"There are a couple of things you can do, with one being right in the tag itself: you can use the 'longdesc' element. The longdesc is actually a link to another page where you can lay out the information in text format.

你可以根据以下介绍解决这个问题,标签的设计要正确:运用'longdesc'元素。'longdesc'实际是与另外网页的链接,在链接的网页中可以用文本格式布局信息。

"Here is a sample tag:
下面是一个标签样本:



"The problem with the longdesc attribute is that it is not widely supported by assistive technology. As a result, an alternative convention is suggested, using a D-Link. This is a text link placed immediately after the image. It is a link to the same descriptive page contained in the longdesc attribute. This way, you are sure that it can't be missed."

longdesc属性出现的问题是:不是所有辅助技术都支持它。那么你可以选择使用D-Link,它是设置在图片后面的文本链接,与包含在longdesc属性中的叙述页面相链接,这样,不会被遗漏。

Here's an example using the D-Link:
运用D-link的范例:



Some Accessibility Solutions Are Actually Beneficial from an SEO Standpoint

这些解决方案其实是解决搜索引擎优化问题。

Since Search Engine Marketers often use alt text as an extra spot to place keywords, can it still be used in that manner?

由于搜索引擎商经常把关键词放置在alt文本中,那么还可以那样使用alt标签吗?

"Bear in mind that it should not be only for keywords, because it really is an assistive aid. What I've done is something like this: 'keyword keyword - link to description page'," explains Roberts.

“请记住:它不应该只用来放置关键词,因为它确实是一种辅助工具。我们只是关键词与描述网页链接起来。”Roberts这样解释。

Roberts continues, "A link to a more informative text explanation of a pie chart or whatever can only add to search engine relevancy because you can make the additional page focus on a keyword. Accessibility also applies to things like WAP, handheld devices, and telephonic devices.

Roberts
接着说:“与圆形分割统计图中的信息文本链接,或者与其它任何文本链接,只能增加与搜索引擎的相关程度,因为这样使其它网页与关键词建立了联系。其实可操作性也可以应用WAP、手持设备以及电话设备中。

"People need to see what your information is and how to get to it. The matter of tables is important not only because of accessibility but because it will actually be easier for search engines to get around in them. There is a brief example of this on the regular SEO Toolbox site. There is more complete information, with two examples, at: Seotoolbox.com.

“人们需要了解并得到网站信息。表格重要不但是因为网站可接近性,也因为搜索引擎更容易对它做索引。在SEO Toolbox site中有一个简单的例子,而在Seotoolbox.com中会提供更多信息,网站提供了两个范例。”

"After all," Roberts continues, "which do you think will be better for relevancy? If a spider must wade through yards of code before getting to your content, or if the spider can see your content first thing? The answer is pretty obvious."

但是,你认为那个方式更利于相关性呢?Roberts继续说:“你是希望搜索机器人阅读大量编码后搜索内容呢?还是让搜索机器人直接搜索内容呢?”

Web_Accessibility If you aren't using Lynx, Roberts recommends adding it as part of your Web development arsenal for seeing how your pages look in a variety of browsers. (http://lynx.browser.org/)

如果你没有使用LynxRoberts建议把它作为网站开发的一部分,这样可以检验网页在多种浏览器中的外观http://lynx.browser.org/)。

Lynx is a free, predominately text-based browser that will give you an idea of how those with disabilities view your site. Many Web visitors prefer it because it doesn't support JavaScript, Flash, or DHTML and is free of popups.

Lynx
是一种免费的、但是重要的文本浏览器,会帮助你思考让残疾人浏览网站的方法。因为Lynx不支持JavaScript Flash DHTML以及弹出框,所以受到很多访问者的欢迎。

For More Information
更多信息

According to Roberts, one of the best books on the topic of accessibility is Constructing Accessible Web Sites by Jim Thatcher. The book just hit the shelves and covers what you need to know in an efficient, easy-to-understand manner.

Roberts
提到,关于网站操作性最好的一本书是Jim Thatcher编著的Constructing Accessible Web Sites。这本书用有效、容易理解的方式介绍了网站的可操作性问题。

And, be sure to keep a close watch on Robert's accessibility section of the SEO Toolbox. He'll be adding more information to the section as he conducts chat sessions at the Academy.

同时,你要关注SEO Toolbox网站中Robert's先生关于网站易操作性的板块,他会在与院校学生做研讨的同时,逐渐增加信息。

Academy students can attend any of Roberts' upcoming chats, or even if you're not an Academy student, you can read the transcripts afterward at the Chat Index area.

学院的学生可以参加Roberts先生即将举办的讲座,非学院学生可以在Chat Index area中阅读他的讲座记录。

Who is Robert Roberts?
Robert Roberts
介绍

Mr. Roberts, a San Francisco resident, is a former concert pianist turned artist turned computer jockey. He has had numerous 1-man art shows, and is a respected tattoo artist, working by appointment only. He operates his own freelance graphics business, now focusing primarily on web development. His self- taught computer skills include design, information architecture, search engine marketing and PHP dynamic and database-driven website construction.

Roberts
先生居住在旧金山,他以前是一个钢琴家,后来成为画家,现在又发展成为职业程序师。他曾多次举办个人艺术展,受到群众的欢迎,并且也是位受人尊敬的纹身艺术家,只有提前预约才能享受他的服务 。他是位自由职业者,为用户提供制作图片的服务,现在业务又拓展到网站设计领域。他自学的电脑技能包括:设计、信息布局、搜索引擎营销以及PHP动态网页、数据库驱动网站建设。

评论 (0) All

登陆 | 还没注册?