无障碍版输出规范_前端技术_日志_DTOP

无障碍版输出规范

来源：本站原创发布时间：2016-11-04 10:10:23 浏览次数：次【字体：小大】

无障碍前端规范；

1、必须有DOCTYPE；

2、必须指定字符编码，如utf-8，gb2312；

3、每个页面的html标签要指定lang属性；

4、页面中必须包含一个title元素，内容少于60字，包含网站名字和页面主题；

5、除非使用者知道会打开新窗口，否则不要随便打开新窗口

6、禁止使用font、center、b、u、I 、color等标签

7、页面至少有且只能有一个h1，h1一般用在网站logo，

8、除skip外，所有内容都要放在container页面容器中, skip 也可以放在container中

页面布局结构：

skip：

无障碍操作说明

跳转到网站导航区

跳转到主要内容区域

9、网站主导航需要 id="mainNav"网站主导航对应skip的网站导航区

10、对具有图像、或是任何非文本的内容及信息提供相关的文字叙述。使用文字来叙述该对象的内容或功能。

主要使用：

1、链接 a标记需要标明title值，可输入等同标题的title="*"

2、图片 img标签需要注明alt值。输入图片的文字叙述。图片alt属性不应包含冗长的信息，说明内容过长可使用longdesc属性。

知识点：如果一个链接包含一个图片和文字，且alt中内容和文字相同，则alt的属性应该为空

11、指向不同地址的链接，不可使用相同的链接说明

12、页面模块布局，要遵循上下左右顺序排列。

主要体现：

左右浮动的盒子，有些习惯会把右盒子写在左盒子的上面再进行浮动，在无障碍版下，这种布局会导致他们切换的顺序不对。

13、搜索标签提交按钮是用a标记的时候，需要给a标记加上href="#",才会有语音提示。

14、一级导航菜单中不要出现h4标记。我们的导航标签子栏目基本都是使用h4，在无障碍版下需要换成h5、h6或者不用。

15、在盒子模型下面，我们熟知hd里面的more，需要放置在盒子的最后。

使用结构：