无障碍前端规范.docx

无障碍前端规范编码1.必须有DOCTYPE2.必须指定字符编码，如utf-8，gb23123.每个页面的html标签要指定lang属性，html xml:lang=zh lang=zh4.页面中必须包含一个title元素，内容少于60字，包含网站名字和页面主题框架标签（强制使用所列出的命名）5.页面至少且只能有一个h1，h1一般用在网站logo，h1 id=logo/h1从h2开始，每个hn前面至少有一个h(n-1)6.Skip跳转到主要内容区div id=skipa href=#content title=跳转到主要内容区域skip to main/a/div7.除skip外，所有内容放在container页面容器中div id=container /div8.页头header，页面主体main，页底footerdiv id=containerdiv id=header/divdiv id=main/divdiv id=footer/div/div9.页面主体左列leftSidebar，内容区content，页面主体右列rightSidebardiv id=maindiv id=leftSidebar/divdiv id=content/divdiv id=rightSidebar/div/div10.面包屑breadCrumbNav，div id=breadCrumbNav/div11.quickLink快速链接，用来快速到达某一位置的链接列表。div id=quickLink/div12.mainNav网站主导航，subNav网站子导航。div id=mainNavdiv id=subNav/div/div13.search搜索区块。form id=search/form14.稿件页面只有稿件文章时，内容区域contentdiv id=containerdiv id=header/divdiv id=maindiv id= content 稿件内容/div/divdiv id=footer/div/divcopyright版权信息。div id=copyright/divsitemap网站地图。div id=sitemap/div17.friendLink友情链接。div id=friendLink /div18.loginBar登录口。 form id=loginBar /form19changePage分页码ul id=changePagelia href=# title=首页首页a/lilia href=# title=上一页上一页a/lilia href=# title=第 1 页1a/lilia href=# title=第 2 页2a/lilia href=# title=下一页下一页a/lilia href=# title=尾页尾页a/li/ul20.其他标签广告：banner 菜单：menu 子菜单：subMenu 下拉菜单：dropMenu 工具条：toolbar 表单：form栏目：column 箭头：arrow 滚动：scroll 注释：note标签页：tab 文章列表：list 提示信息：msg小技巧：tips 栏目标题：title 加入：joinus 指南：guild服务：service 热点：hot 新闻：news 下载：download注册：regsiter 状态：status 按钮：btn 投票：vote合作伙伴：partner 外套：wrap 商　标：label代码规范20.h1-h6必须有文字内容，内容少于65个字，h2-h6除了img的alt属性外，还应该包含文字内容列表21.内容一行行有序排列，使用有序列表ol22.内容一行行排列，使用无序列表ul23.列表嵌套不超过5层图片24.装饰性图片归类到背景图层，功能性图片放在html中，且要有alt属性，用以描述图片内容。25.图片alt属性不应包含冗长的信息，说明内容过长可使用longdesc属性img longdesc=很长很长的内容很长很长的内容 /26.banner、头图上的文字信息必须在代码中有所体现表单27.每一个lable必须有文字内容28.在表单控制项中，使用fieldset及legend标签作群组间的区隔。每一个fieldset应该有一个legend元素，每一个legend必须有文字内容form fieldset legendhealth information/legend height: input type=text / weight: input type=text / /fieldset/form29.文本域，密码，下拉框，按钮最好设置相对字体30.type等于button、reset、