浅谈web标准 可用性和可访问性

日期: 2011-02-16 作者:P迪 来源:TechTarget中国 英文

  大家不难发现,只要是招聘UED相关的岗位,如前端开发工程师、交互设计师、用户研究员甚至视觉设计师,一般都对web标准、可用性和可访问性的理解有要求。那么到底什么是web标准、可用性、可访问性呢?

  一、web标准

  简单的说,就是HTML、CSS、JavaScript这三者分离。WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如 W3C DOM)、ECMAScript等。

  Web标准的优点:

  代码的效率:在HTML文件中使用最精简的代码,而把样式和页面布局信息包含进CSS文件中。则放在服务器上的文件越小,下载文件需要的时间就越短。

  易于维护:页面的样式和布局信息保存在单独的CSS文件中,如果你想改变站点的外观时,仅需要在单独的CSS文件中做出更改即可。整站统一css则可带来巨大的便利。

  可访问性:上网用户中那些视力受损的人,通过屏幕阅读器使用键盘命令将网页的内容读给他们听。以语义化的HTML(结构和表现相分离的HTML)编写的网页文件,就可以让此类用户更容易导航,且网页文件中的重要信息也更有可能被这些用户找到。

  设备兼容性:纯HTML,无附加样式信息,可以针对具有不同特点(如屏幕尺寸等)的设备而被重新格式化,只需要引用一套另外的样式表即可。同时,CSS本身也可以让你为不同的呈现方式和媒体类型(如在屏幕上阅读网页,打印网页,在移动设备上阅读网页等)规定不同的样式表。

  网络爬虫/搜索引擎:搜索引擎使用“爬虫”,解析你的网页。语义化的HTML能更准确更快速的被解析,从而知道哪些才是重要的内容,那么你的网页在搜索结果中的排名就会大受影响。

  二、可用性、可访问性

  可访问性就是对所有人一视同仁,无论他们是否有残障。

  网站的用户类型:

  身体健康的用户;

  盲人或严重视觉障碍者,他们使用屏幕阅读器来听取网站,或者通过点字显示器来感知网页;

  近视者,需要将字体大小放大到200%;

  患有运动性残疾,因此无法用手操作鼠标,而用点击棒来操作键盘,或通过视线点击器来操作网站的用户;

  使用移动设备如常用的手机,或使用跟踪球等不常见的计算机控制设备的用户。

  实现可用性、可访问性的方法

  逐步强化你的网站功能,同时对支持性进行测试。运用“渐进增强”和“平稳退化”原则开发网站。

  允许用户关闭有问题的增强功能。

  提供相同内容或功能的替代版本。

  就客户端需要支持的技术向你的客户提出建议,并举例说明哪些公司的产品支持这些技术。
可访问性良好网页的特征

  HTML语义化、结构化:HTML语义结构提供了网页的整体框架,提示他们在文件层级中所处的位置,还有他们可以如何与各种页面元素进行交互,以及在适当的地方对文本内容进行强调,帮助用户获得大量重要信息。如导航菜单例子:

以下是引用片段:
Menu Item 1
Menu Item 2
Menu Item 3

  说明:通过将导航菜单构造为列表,就能很容易地让那些使用屏幕阅读器、同时无法看到列表的人知道这是个列表。因为他们的屏幕阅读器会告诉他们这是一张列表。如果你没有使用列表标记,屏幕阅读器就没办法知道这是列表,因此也就不能告诉使用者了。

  替代内容:文本可以作为页面内容的通用替代内容,如img标签的alt属性值、a标签的title属性值。

以下是引用片段:
<a href=”http://www.alimama.com” title=”淘宝联盟大促销”>
 <img alt=”淘宝联盟大促销” src=”images/app/sale.jpg”/>
</a>

  说明:文本内容可以很方便地由屏幕阅读器朗读出来,也可以放大或缩小,还可以方便地改变其对比度,或者进行其他许多变形操作。alt 属性包含了对该图片的简短描述,以便无法准确看到该图片的用户(或搜索引擎)使用,title属性负责对链接地址的详细文本描述。
HTML定义基本交互:实现tab选项卡搜索功能

以下是引用片段:
  Search within:
Dogs
Cats
Fish

  说明:先考虑基本交互(而不是仅仅只加载视觉效果的部分)的话,你就可以简化实现tab搜索效果。现在我们可以只用一个表单来进行所有的搜索,而同时仍然能实现tab选项卡效果(虽然这需要一点样式和脚本)。通过 AJAX 来插入页面内容,那禁用javascript的用户将无法使用。

  四个可访问性标准(WCAG 2.0):
 
  可感知:人们可以通过适合自己的媒体来获知网页内容。比如应当让盲人得以收听页面内容。例如,图像应该有文本对应体。

  可操作:人们可以与 web 应用程序或内容进行交互。例如,用户应该可以不用鼠标也能与某个网站进行交互,并且可以通过屏幕阅读器来进行导航。

  可理解:使用者可以弄懂页面内容和用户界面。例如,正文不应该比它需要的更加复杂,且网站应以可预测的方式来运行。

  健壮性:所提供的一切服务都应当不受平台或操作系统的限制。这样就可以避免人们提供一些不太完善的服务,这些服务会因为硬件/软件的限制而导致大多数人都无法使用。例如,不同设备上的浏览器能够一起使用网站,且导航应该是一致的。
 
  说明:网站并不是必须满足全部这些要求,要视网站用户类型而定,但为了实现可访问性,网站应当确保其页面可以用一般的屏幕阅读技术读取。

  总结:

  可访问性是网站开发质量的一个衡量标准。如果你在开发网站的时候(以及开始开发前)顾及你的使用用户的话,你就能创建可用性、可访问性更好、更符合web标准的网页,并且享受它所带来的一切好处。

我们一直都在努力坚持原创.......请不要一声不吭,就悄悄拿走。

我原创,你原创,我们的内容世界才会更加精彩!

【所有原创内容版权均属TechTarget,欢迎大家转发分享。但未经授权,严禁任何媒体(平面媒体、网络媒体、自媒体等)以及微信公众号复制、转载、摘编或以其他方式进行使用。】

微信公众号

TechTarget微信公众号二维码

TechTarget

官方微博

TechTarget中国官方微博二维码

TechTarget中国

作者

P迪
P迪

相关推荐

  • 在发布站点前 Web开发者需要关注哪些技术细节?

    在网站发布前,开发者需要关注有许多的技术细节,比如接口设计、用户体验、安全性、Web标准、性能、SEO等,倘若一个疏忽就会影响到整体的体验效果。

  • 云计算可用性与适应力:为故障事件规划好应对措施

    公共云是一种实用工具,而这一实用工具的故障事件频发将大大打击云计算用户们对它的信心,Gartner IT专业研究集团的云计算与数据中心战略管理副总裁Richard Jones如是说。

  • HTML5现状分析指南

    HTML 5是超文本标记语言(HTML)的下一个修订版 ,超文本标记语言是用来描述网页内容和外观的标准编程语言。HTML5是近十年来Web标准最巨大的飞跃。和以前的版本不同,HTML 5并非仅仅用来表示Web内容,它的使命是将Web带入一个成熟的应用平台,在这个平台上,视频、音频、图象、动画以及同电脑的交互都被标准化。尽管HTML 5的实现还有很长的路要走,但HTML 5正在改变Web。下面我们将分三部分来分析一下HTML5。

  • 心动却不能行动 HTML5还只是个传说

    日前,以下一代Web标准和浏览器发展趋势为主题并且由Google主导的互联网开发技术交流会在北京举行。