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的情况下仍能访问网页。