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

前言:大家不难发现,只要是招聘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标准的网页,并且享受它所带来的一切好处。

参考网页:
opera web标准课程
百度百科 web标准

时间: 2024-09-18 22:10:49

浅谈web标准、可用性、可访问性的相关文章

浅谈web网站架构演变过程

原文:浅谈web网站架构演变过程 前言 我们以javaweb为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变.   该系统具备的功能:   用户模块:用户注册和管理 商品模块:商品展示和管理 交易模块:创建交易和管理    阶段一.单机构建网站 网站的初期,我们经常会在单机上跑我们所有的程序和软件.此时我们使用一个容器,如tomcat.jetty.jboos,然后直接使用JSP/servlet技术,或者使用一些开源的框架如maven+spring+struct+hibernate.

浅谈php处理后端&amp;接口访问超时的解决方法_php技巧

[HTTP访问] 一般我们访问HTTP方式很多,主要是:curl, socket, file_get_contents() 等方法. 如果碰到对方服务器一直没有响应的时候,我们就悲剧了,很容易把整个服务器搞死,所以在访问http的时候也需要考虑超时的问题. [ CURL 访问HTTP] CURL 是我们常用的一种比较靠谱的访问HTTP协议接口的lib库,性能高,还有一些并发支持的功能等. CURL: curl_setopt($ch, opt) 可以设置一些超时的设置,主要包括: *(重要) CU

浅谈python类属性的访问、设置和删除方法_python

类属性和对象属性 我们把定义在类中的属性称为类属性,该类的所有对象共享类属性,类属性具有继承性,可以为类动态地添加类属性. 对象在创建完成后还可以为它添加额外的属性,我们把这部分属性称为对象属性,对象属性仅属于该对象,不具有继承性. 类属性和对象属性都会被包含在dir()中,而vars()是仅包含对象属性.vars()跟__dict__是等同的. 类属性和对象属性可类比于Java中的static成员和非static成员,只不python中的类属性和对象属性都是可以动态添加(和删除)的. clas

浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)_php技巧

我们通过前篇:<浅谈web上存漏洞及原理分析.防范方法(安全文件上存方法)>,已经知道后端获取服务器变量,很多来自客户端传入的.跟普通的get,post没有什么不同.下面我们看看,常见出现漏洞代码.1.检测文件类型,并且用用户上存文件名保存 复制代码 代码如下: if(isset($_FILES['img'])){    $file = save_file($_FILES['img']); if($file===false) exit('上存失败!');  echo "上存成功!&q

web标准—可用性、可维护性、可访问性

一直听说过web标准的可用性.可访问性.可维护性,但是具体的定义,我还是不是很清楚,今天总结下,理清一下思维.  在Web前端开发界,有三个词经常被提及:可用性(Usability).可访问性(Accessibility)和可维护性(Maintainability). 可用性指的是:产品是否容易上手,用户能否完成任务,效率如何,以及这过程中用户的主观感受可好,是从用户的角度来看产品的质量.可用性好意味着产品质量高,是企业的核心竞争力. 可维护性一般包含两个层次,一是当系统出现问题时,快速定位并解

浅谈Web攻击日志分析 及日志发展的过去现在与未来

前言 谈到日志分析大多数人的感觉是这是一个事后行为,场景当黑客成功将网站黑了.运营人员发现的时候安全人员会介入分析入侵原因,通过分析黑客攻击行为往往会回溯最近几天甚至更加久远的日志. 处理过程. 个人认为日志分析的过程分为3个阶段: • 过去: 在之前很多网站的运营日志并不多少,只有几G多的可能几十,上百G,当出现了攻击行为时,利用grep.perl或者python脚本可以来完成,但这也是基本偏向于事后阶段.原始阶段,通过grep关键字来发现异常,这样并不能达到实时分析的结果,往往也是需要到出事

浅谈web分析

记得很早以前看到过这样的一段介绍: 想象你在逛街边的一家书店,如果最终你没有购买任何图书就直接离开了,店长并不会知道你来过.但是如果你买了书,那么书店的员工就会知道他们卖出了一些商品(当然如果你在那里留了联系信息来预订另外一本书,他们就可以得到更多东西). 回过头来,我们从信息收集的角度看看网站访问,那就是另外一个截然不同的世界了.无论你有没有买东西,在你访问站点时,总是会留下很多记录,通过收集这些访问者留下的大量数据,我们的网络专家就可以得到关于网站用户体验的很多结论. 从站点的记录中,可以知

浅谈web网站架构演变过程(转)

前言 我们以javaweb为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变.   该系统具备的功能:   用户模块:用户注册和管理 商品模块:商品展示和管理 交易模块:创建交易和管理   阶段一.单机构建网站 网站的初期,我们经常会在单机上跑我们所有的程序和软件.此时我们使用一个容器,如tomcat.jetty.jboos,然后直接使用JSP/servlet技术,或者使用一些开源的框架如maven+spring+struct+hibernate.maven+spring+sprin

拒绝平庸——浅谈WEB登录页面设计

用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客.古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说道理,更能彰显主人家的身份地位.由此可见,"门面'就如人的脸面之于人的形象一样重要,而WEB的登录页面就相当传统的"门面". 现在越来越多的大型网站把登录和首页放在一起设计,由此可见登录页面的重要性,一个出彩的登录界面,将提升产品的品质,赋予产品独特的气质,登录界面也是一个发挥情