Web标准及网站的可用性、可访问性

学习前端的过程中到处充斥着Web标准、可用性、可访问性这些词,那么到底它们指的是什么呢?

一、什么是Web标准

简单的说,Web标准就是我们在学习前端中接触最多的HTML、CSS、JavaScript三者的集合。网页主要分三个部分:结构(Structure)、表现(Presentation)、行为(Behavior)。对应的标准也分三个方面:结构化标准语言---XHTML和XML,表现标准语言---CSS,行为标准---对象模型DOM和ECMAScript等。

为什么要制定这些标准,这些标准有什么优点呢?

1. 提升代码效率

Web标准提倡结构和表现分离,也就是说HTML只用来形成网页的结构,而网页的布局、表现方式用CSS完成,这样就有效地精简了HTML代码。浏览器向服务器发送HTML文件请求时,下载文件的时间就减少了。

   2.易于维护

将页面的样式和布局信息保存在不同的文件中有力与对网页的维护,当需要对网页进行样式改版升级时,不需要改动HTML文件,只在CSS文件中更改元素的样式即可。

3.可访问性

上网用户中有一些视力受损的人,他们需要屏幕阅读器将网页内容读出来。以语义化的HTML标签编写的网页可以使屏幕阅读器知道网页的结构及各部分的大概功能,如<nav>标签表示导航,<aside>标签表示侧边栏等,使使用者更便捷地与网页交互,更快地抓住网页主要表现内容。

4.设备兼容性

这是最近比较流行的响应式设计,追求页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。这也是HTML与CSS分离带来的便利,同样的HTML文件,通过CSS3 Media Query 媒体查询,就可以根据屏幕的尺寸等调整CSS样式,使网页内容能更清晰地展现出来。

5. 搜索引擎(网页爬虫)

语义化的HTML文件更容易被网页爬虫解析,从而在搜索结果中能准确地得到你的网页,并影响网页的排名。

二、可用性,可访问性

前面提到,可访问性就是指无论用户是否健康,是否有部分身体缺陷都能正常地访问网站,理解网站的内容。例如视力受损的用户需要屏幕阅读器浏览网页,没有鼠标的用户要靠键盘与网页交互,以及大量使用移动设备访问网页的用户。

可访问性好的网页有以下几个特征:

1. HTML语义化、结构化

2.有可替代内容

3.用HTML定义基本交互

要实现网页的可访问性,需要网页开发者运用“渐进增强”、“平稳退化”的原则。

“渐进增强”就是用一些额外的信息包裹原始数据,实现这个要求需要“三步走战略”。第一步:要使用正确的,带有语义化的HTML标签来表示内容。第二步:将HTML于CSS分离,用CSS包装内容的样式,及时去掉这个表示层,文档的内容也依然可以访问(只是缺乏些色彩而已)。第三步:分离JavaScript,将网页的行为与结构和表现分离,这样即使浏览器的JavaScript功能关闭后,仍能访问网页的主要内容。

大部分实现了“渐进增强”的网页都符合“平稳退化”的原则。“平稳退化”简单说就是在没有JavaScript的情况下仍能访问网页。

三、总结

了解Web标准有利于养成良好的网页开发的习惯,并做出具有高访问性的网站,让更多的用户看到你的成果。

时间: 2024-10-18 02:08:19

Web标准及网站的可用性、可访问性的相关文章

对Web标准的理解。可用性和可访问性

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

divcss布局及Web标准对网站优化

所谓代码优化是指对程序代码进行等价(指不改变程序的运行结果)变换.程序代码可以是中间代码(如四元式代码),也可以是目标代码.等价的含义是使得变换后的代码运行结果与变换前代码运行结果相同.优化的含义是最终生成的目标代码短(运行时间更短.占用空间更小),时空效率优化. 主要步骤:精简代码;头部优化,权重标签使用及图片优化.在这四个环节中,精简代码是最基础.最根本. 精简代码是指清除或者简化页面中的代码,从而达到降低页面体积.提高页面的用户体验及搜索引擎优化性的目的. 精简代码又分五个小步骤: 1.清

web标准的可用性和可访问性

在Web前端开发界,有三个词经常被提及:可用性(Usability).可访问性(Accessibility)和可维护性(Maintainability). 可用性指的是:产品是否容易上手,用户能否完成任务,效率如何,以及这过程中用户的主观感受可好,是从用户的角度来看产品的质量.可用性好意味着产品质量高,是企业的核心竞争力. 可维护性一般包含两个层次,一是当系统出现问题时,快速定位并解决问题的成本,成本低则可维护性好.二是代码是否容易被人理解,是否容易修改和增强功能.可维护性和可复用性.可扩展性等

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

web标准 简单的说,就是HTML.CSS.JavaScript这三者分离.WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior).对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如 W3C DOM).ECMAScript等. 可用性:产品是否容易上手,用户能否完成任务,效率如何,以及这过程中用户的主观感受可好,是从用户的角度

WEB可用性、可访问性、可维护性

可用性 (Usability) 可用性是一个多因素概念,涉及到容易学习.容易使用.系统的有效性.用户满意度,以及把这些因素与实际使用环境联系在一起针对特定目标的评价. 可访问性 (Accessibility) 可访问性指Web内容对于残障用户的可阅读和可理解性.具体考虑以下两方面: 无论用户是否残障,都得通过用户代理(User Agent)来访问Web内容.因此要提高可访问性,首先得考虑各种用户代理 :桌面浏览器.语音浏览器.移动电话.车载个人电脑等等. 还得考虑用户访问Web内容时的环境限制 

Web 标准中的常见问题

引言 大概在2004年的时候,Web标准的概念藉由一本名为<网站重构>的书开始被国内人所了解.随后的几年中,其更少的代码量.更好的搜索引擎友好性.更好的浏览器兼容性使得Web标准迅速受到重视并逐渐普及,网易.新浪等各大网站相继采用Web标准进行网站重构. 在今年,我浏览了不少采用Web标准进行重构的网站,并在国内著名设计与制作论坛 蓝色理想 浏览了很多网页制作人员发表的言论.发现许多制作人员对Web标准的理解不够深入,有的地方甚至存在误区,在这篇文档中,我将就我所了解的问题做一点分析,以供参考

爆牙齿的 Web 标准面试题 【转藏】

<!DOCTYPE html> <html lang="zh-CN"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>爆牙齿的Web标准面试题 - 习题与演示 - CSS魔法</title> <meta http-equiv="X-UA-Comp

说说HTML5中label标签的可访问性问题——张鑫旭

一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高页面的可用性可访问性是很有帮助的. 我们看看点评网的注册页面那个同意条款的复选框,非要点在复选框上才能选中: 查看HTML发现复选框id和label标签的for属性值都是空,不解~~ 像其他网站的登录或是注册处的控件的点击区域就做得蛮不错的,像是豆瓣网, 新浪微博等:  我们一般有两种方法来优雅地扩

Web标准的理解

生活中各行各业都有着自己相应的标准与规范,比如有了"银行卡的标准",你就不用担心不同银行的卡大小不一样,所有提款机的入卡口都一样. 所以可以看出标准对于社会的交流,协作和效率有着非常重要的意义. 1.什么是web标准? 为了实现大量HTML信息向XML标准的过渡,W3C和ECMA制定的一系列的技术规范. 目前主要包括: 结构化标准语言:XHTML和HTML 表现标准语言:CSS 行为标准语言:DOM,ECMAScript等 web标准不仅仅是一个规范,而是一系列规范的总称. 2. we