随着web使用量的增加和人们网络意识的增强，可访问性（或“通用设计”）变得更加重要。可访问性不仅取决于一个网站的代码，还受网站设计和内容的影响，这就是为什么可访问性、标准和可用性关系如此紧密。
网页无障碍是一个庞大的课题，已自成一个领域。 但不要被它吓到。无障碍并不是非常难以实施。它并不会像一些人想象的会有碍美观或影响交互。这是一种高明的（smart）设计和开发方式。
让我们来看看建立一个无障碍网站的25个重要技术。
1.一致的布局和结构
为了帮助用户快速和轻松地浏览您的网站，你应该提供一个一致的布局和结构。页面的主要元素——banner、navigation、sidebar侧栏，在整个网站中应该出现在的相同位置 。他们也应该标记一致，如使用同一标题结构（heading structure）。这有利于认知障碍者和使用屏幕阅读器（用来处理屏幕上的内容，并大声读出）的用户访问。
2.为图片添加替代文本
不幸的是，虽然替代文本已是家喻户晓，但它常常被忽视或不正确使用。图像元素的alt属性为图片提供了文字描述。当图片不可见时——如碰到盲人用户、搜索引擎、图像禁用和坏链情况时，可以通过alt文本来访问图片的“内容”。下面是替代文本的一些最佳做法：
- 如果文本嵌入在图像中，将文本添加到alt属性。
- 装饰性图片应该由CSS处理。如果不能由css处理，应加空alt属性（例如<img src=”decor.jpg” alt=”" />）。这不仅能通过验证，还能告知辅助技术该图片不包含任何意义。
- 对于某些图片，如图表和插图等，需要更长的描述。有多种方法可以添加长描述，例如：在行内增加内容，使用“D – Link”（译者注：D表示description，该链接的链接文本为D，表示链接至详细描述页面 ，如<a href=”detail.html”>D</a>），或使用longdesc属性（译者注：HTML5已废弃longdesc 属性）。
- 如果一个链接只包含图像内容，那么alt文本应描述链接的功能，而不是图像本身。
3.使用页面标题
页面标题是一个网页的基本构建块。如前所述，它能为HTML文档提供一个一致的结构。例如，H1元素可能包含网页或网站的标题，H2可能表示该网页的标题。这不仅有助于屏幕阅读器用户浏览，而且使页面易于明眼用户阅读。标题也有利于SEO（但不要滥用标题，谷歌会发现并惩罚你滴！）。
切勿仅依靠样式 （如加粗，增加字体大小）来创建标题。始终使用H1至 H6元素，然后使用css修改其外观。如果用户代理不能解析CSS，标题通常默认显示一种格式，可以维持文档的视觉结构。
错误：<span style=”font-size:2em”> <b>我的网页标题</b> </span>
正确：<h1>我的页面标题</ H1>
4.正确使用标题
标题也经常使用不正确。标题使用混乱，跳级使用标题。将你的文档想象为一份大纲，以下是一些指导原则：
- 每个页面只给一个H1元素（除非你使用HTML5）。
- H1的内容与网页标题相似。
- 按顺序使用标题。例如，H1应该是第一个，H4应该在H3之后。
- 不要跳级使用标题。举例来说，不要从H2跳至H4。
关于标题和文档结构的更多信息，请查看WebAIM的文章创建语义结构 。
5.跳过链接
锚链接将光标从页面的一个区域移动到另一个区域，“跳过”链接是一种特殊类型的锚链接。它对键盘用户非常有益，允许键盘用户跳过大块的内容和链接，特别是导航菜单。跳过链接通常放置在页面顶部并指向主要内容，用户访问新页面时不必每次都浏览banner和导航。鉴于现在的导航条链接数目较多，这样可以节省一点时间。
千万不要使用display:none属性隐藏跳过链接，因为屏幕阅读器也无法读取这些内容。让它可见，但如果你非要把它藏起来，可以用CSS给它一个负边距（或类似的东西），当链接获取焦点时将它显式。Web Standards Project在其网站上很好的使用了该方法。
ARIA和HTML5提供了导航方法，跳过链接就过时了。但是，在这些新技术得到更广泛的支持（和标题更好地执行）之前，在页面顶部加上一个或两个跳转链接仍然是良好的做法。
ARIA和HTML5提供了导航方法，跳过链接就过时了。但是，在这些新技术得到更广泛的支持（和标题更好地执行）之前，在页面顶部加上一个或两个跳转链接仍然是良好的做法。
1 <body>
2 <a href="#mainContent">Skip to main content</a>
3 <div>[banner]</div>
4 <div>[navigation]</div>
5 <div id="mainContent">[page content here]</div>
6 </body>
6.链接内容
由于一些辅助技术会在一个单独的网页展示链接，链接文本的内容是非常重要的。这听起来简单，但有时可能具有挑战性。下面的规则不仅有利于增强可访问性，同样对可用性和搜索引擎优化也是有意的：
- 一个链接在脱离语境时仍然有意义；
- 链接文本在它出现的页面上应该是唯一的（即不同资源不要使用相同的链接文本）；
- 链接文本千万不要使用“点击此处”或“更多”；
- 不要使用一个长URL作为链接文本（屏幕阅读器会全部读出来，用户会很烦躁的）。
下面的文字，用户必须折回来去理解链接的去向。
不好： To learn more about the bat species, click here.
下面的更加简洁，即使脱离上下文也有意义。
好多了：If you’re interested, learn more about thebat species. 。
7.链接感知
如果一个链接不是以默认方式打开时，应告知用户，即在同一浏览器窗口的网页之外打开。包括链接在新窗口打开，链接至非HTML文件，如PDF和视频文件。
告知用户的方式有多种，根据残疾类型和浏览器支持程度使用一种或多种方式。
你可以使用下面的代码在链接至PDF文件的链接旁边显示一个图标。注意的是，除了作为一种视觉提示，图标包含一个alt属性，链接拥有一个title属性，两者可提供补充信息：
<a href="about_bats.pdf" title="open PDF document"> <img src="icon_pdf.png" alt="PDF document" />learn about bats</a>
8.谨慎使用title属性
title属性用于添加补充信息很方便，但它仍只是补充。当书写标题文本时，即“tooltip”，假设前提是用户不会总是看它。
