您的位置:首页> 日志> 前端技术 正文
DTOP

无障碍版输出规范

liotc | 2016年11月04日 |

>>收藏本文 已有 0条评论

无障碍前端规范;
1、必须有DOCTYPE;
2、必须指定字符编码,如utf-8,gb2312;
3、每个页面的html标签要指定lang属性;
4、页面中必须包含一个title元素,内容少于60字,包含网站名字和页面主题;
5、除非使用者知道会打开新窗口,否则不要随便打开新窗口
6、禁止使用font、center、b、u、I 、color等标签
7、页面至少有且只能有一个h1,h1一般用在网站logo,<h1 id="logo"></h1> 
8、除skip外,所有内容都要放在container页面容器中, skip 也可以放在container中
  页面布局结构:
  <div id="container">
      <div id="header"></div>
      <div id="main"></div>
      <div id="footer"></div>
  </div>
  skip:
  <div id="skip">
        <a id="accesshelp" title="新窗口打开无障碍操作说明页面" href="链接地址" title="_blank">无障碍操作说明</a>
        <a href="javascript:createNodeDiv('mainNav', '已定位到网站导航');" title="跳转到网站导航区">跳转到网站导航区</a>
        <a href="javascript:createNodeDiv('main', '已定位到主要内容区域');" title="跳转到主要内容区域">跳转到主要内容区域</a>
  </div> 
9、网站主导航需要 id="mainNav"网站主导航对应skip的网站导航区
  <div id="mainNav"></div>
10、对具有图像、或是任何非文本的内容及信息提供相关的文字叙述。使用文字来叙述该对象的内容或功能。
   主要使用:
   1、链接  a标记需要标明title值,可输入等同标题的title="*"
   2、图片 img标签需要注明alt值。输入图片的文字叙述。图片alt属性不应包含冗长的信息,说明内容过长可使用longdesc属性。<img longdesc="很长很长的内容很长很长的内容" />
   知识点:如果一个链接包含一个图片和文字,且alt中内容和文字相同,则alt的属性应该为空
11、指向不同地址的链接,不可使用相同的链接说明
12、页面模块布局,要遵循上下左右顺序排列。
   主要体现:
   左右浮动的盒子,有些习惯会把右盒子写在左盒子的上面再进行浮动,在无障碍版下,这种布局会导致他们切换的顺序不对。
13、搜索标签提交按钮是用a标记的时候,需要给a标记加上href="#",才会有语音提示。
14、一级导航菜单中不要出现h4标记。我们的导航标签子栏目基本都是使用h4,在无障碍版下需要换成h5、h6或者不用。
15、在盒子模型下面,我们熟知hd里面的more,需要放置在盒子的最后。
   使用结构:
   <div class="hd">
        <h2>栏目名称</h2>
   </div>
   <div class="bd">
        <ul>栏目名称</ul>
   </div>
   <a class="more" title="查看更多">查看更多</a>