什么是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语义结构提供了网页的整体框架,提示他们在文件层级中所处的位置,还有他们可以如何与各种页面元素进行交互,以及在适当的地方对文本内容进行强调,帮助用户获得大量重要信息。如导航菜单例子:
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>说明:通过将导航菜单构造为列表,就能很容易地让那些使用屏幕阅读器、同时无法看到列表的人知道这是个列表。因为他们的屏幕阅读器会告诉他们这是一张列表。如果你没有使用列表标记,屏幕阅读器就没办法知道这是列表,因此也就不能告诉使用者了。
- 替代内容:文本可以作为页面内容的通用替代内容,如img标签的alt属性值、a标签的title属性值。
<a href="http://www.alimama.com" title="淘宝联盟大促销">
<img alt="淘宝联盟大促销" src=http://www.webjx.com/web/"images/app/sale.jpg"/>
</a>说明:文本内容可以很方便地由屏幕阅读器朗读出来,也可以放大或缩小,还可以方便地改变其对比度,或者进行其他许多变形操作。alt 属性包含了对该图片的简短描述,以便无法准确看到该图片的用户(或搜索引擎)使用,title属性负责对链接地址的详细文本描述。
- HTML定义基本交互:实现tab选项卡搜索功能
<form action="search.html" method="GET">
<fieldset>
<legend>Search within:</legend>
<ul>
<li><label for="dogs">Dogs</label><input id="dogs" type="radio" name="animal" value="dog" checked></li>
<li><label for="cats">Cats</label><input id="cats" type="radio" name="animal" value="cat"></li>
<li><label for="fish">Fish</label><input id="fish" type="radio" name="animal" value="fish"></li>
</ul>
</fieldset>
<input type="text" id="searchfield" name="search"/>
<input type="submit" value="Search"/>
</form>说明:先考虑基本交互(而不是仅仅只加载视觉效果的部分)的话,你就可以简化实现tab搜索效果。现在我们可以只用一个表单来进行所有的搜索,而同时仍然能实现tab选项卡效果(虽然这需要一点样式和脚本)。通过 AJAX 来插入页面内容,那禁用javascript的用户将无法使用。
四个可访问性标准(WCAG 2.0):
- 可感知:人们可以通过适合自己的媒体来获知网页内容。比如应当让盲人得以收听页面内容。例如,图像应该有文本对应体。
- 可操作:人们可以与 web 应用程序或内容进行交互。例如,用户应该可以不用鼠标也能与某个网站进行交互,并且可以通过屏幕阅读器来进行导航。
- 可理解:使用者可以弄懂页面内容和用户界面。例如,正文不应该比它需要的更加复杂,且网站应以可预测的方式来运行。
- 健壮性:所提供的一切服务都应当不受平台或操作系统的限制。这样就可以避免人们提供一些不太完善的服务,这些服务会因为硬件/软件的限制而导致大多数人都无法使用。例如,不同设备上的浏览器能够一起使用网站,且导航应该是一致的。
说明:网站并不是必须满足全部这些要求,要视网站用户类型而定,但为了实现可访问性,网站应当确保其页面可以用一般的屏幕阅读技术读取。
总结:
可访问性是网站开发质量的一个衡量标准。如果你在开发网站的时候(以及开始开发前)顾及你的使用用户的话,你就能创建可用性、可访问性更好、更符合web标准的网页,并且享受它所带来的一切好处。
转载请注明转自:http://www.heiniuhaha.cn/blog/?p=1378
什么是web标准、可用性、可访问性的更多相关文章
- web标准,可用性和可访问性
web标准,简单的说,是指html,css,JavaScript三者的分离. 网页由三部分组成:结构,表现和行为.对应的标准分为三方面: 1.结构化标准语言XHTML和XML2.表现标准语言主要包括c ...
- 爆牙齿的 Web 标准面试题 【转藏】
<!DOCTYPE html> <html lang="zh-CN"><head> <meta http-equiv="cont ...
- 说说HTML5中label标签的可访问性问题——张鑫旭
一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高 ...
- 如何使用好android的可访问性服务(Accessibility Services)
原文:http://android.eoe.cn/topic/android_sdk * 主题* Manifest声明和权限 可访问性服务声明 可访问性服务配置 AccessibilityServic ...
- label标签的可访问性问题
label标签可以优雅地扩大表单控件元素的点击区域.例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高页面的可用性可访问性是很有帮助的. 其实,它的样子 ...
- 对Web标准的理解。可用性和可访问性
一Web标准 简单的说,就是HTML.CSS.JavaScript这三者分离.WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现(Presentat ...
- web标准的可用性和可访问性
在Web前端开发界,有三个词经常被提及:可用性(Usability).可访问性(Accessibility)和可维护性(Maintainability). 可用性指的是:产品是否容易上手,用户能否完成 ...
- 深刻理解Web标准,对可用性、可访问性、可维护性等相关知识有实际的了解和实践经验
WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior).对应的标准也分三方面:结构化标准语言主要包 ...
- Web标准及网站的可用性、可访问性
学习前端的过程中到处充斥着Web标准.可用性.可访问性这些词,那么到底它们指的是什么呢? 一.什么是Web标准 简单的说,Web标准就是我们在学习前端中接触最多的HTML.CSS.JavaScript ...
随机推荐
- 咏南中间件JSON序列类
咏南中间件JSON序列类 1)支持跨平台.跨语言 2)支持主从表数据序列.还原,支持任意数量的表 主从表数据序列为JSON字符串样式: { "rows": [ { "FD ...
- Spark机器学习(6):决策树算法
1. 决策树基本知识 决策树就是通过一系列规则对数据进行分类的一种算法,可以分为分类树和回归树两类,分类树处理离散变量的,回归树是处理连续变量. 样本一般都有很多个特征,有的特征对分类起很大的作用,有 ...
- .Net学习资料
1.博客系列文章 (1)设计模式 吕震宇 设计模式 张逸:晴窗笔记 Design & Pattern 梦幻Dot Net .Net设计模式 李会军 .NET设计模式系列文章 ...
- 手把手教你整合最优雅SSM框架:SpringMVC + Spring + MyBatis
在写代码之前我们先了解一下这三个框架分别是干什么的? 相信大以前也看过不少这些概念,我这就用大白话来讲,如果之前有了解过可以跳过这一大段,直接看代码! SpringMVC:它用于web层,相当于con ...
- js事件探秘
Javascript中的事件,可以和html交互. 事件流 IE&Opera:事件冒泡 其他浏览器: 事件捕获 事件冒泡:事件由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传 ...
- java.lang.IllegalStateException——好头疼
在我东,下下来一个项目总会出现启动不了的问题,这些问题往往在编译的时候发现不了,当你的服务器启动的时候,就是一片片的报错,有些问题可以通过异常的提示信息,判断出来哪里配置错了,但是也有些情况下,从异常 ...
- 如果你喜欢python,那你迟早会喜欢上julia的!
你可曾想过有那么一门语言: 这门语言能够有C语言一样的速度,Ruby一样得活力(dynamism).像homoiconic一样的语言,它像Lisp一样有宏,但是也像Matlab一样有显而易见.熟悉的数 ...
- Effective Java 第三版——52. 明智而审慎地使用重载
Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...
- nodeJs--模块module.exports与实例化方法
在nodejs中,提供了exports 和 require 两个对象,其中 exports 是模块公开的接口,require 用于从外部获取一个模块的接口,即所获取模块的 exports 对象.而在e ...
- Socket网络编程--聊天程序(8)
上一节已经完成了对用户的身份验证了,既然有了验证,那么接下来就能对不同的客户端进行区分了,所以这一节讲实现私聊功能.就是通过服务器对客户端的数据进行转发到特定的用户上, 实现私聊功能的聊天程序 实现的 ...