H5无障碍开发记录

• 页面主标题使用h1，页面模块级标题，根据重要程度依次使用h2~h6
• 标题（header）、主内容区（main）、补充内容（侧边栏）（aside）、地址（address）使用对应标签，识别为“标志性内容”
• 列表结构使用ul、ol、dl来组织内容
• 菜单型使用menu、导航型使用nav，虽然读屏软件目前还未识别，可为后期做好准备
• 单选按钮、复选框和select使用原生结构而不是模拟结构
• input、button要标注type=”类型”，使读屏软件识别
• input标签和textarea内使用placeholder作为提示语
• img要添加title属性和值，会读取title值+图像提示
• 链接使用a标签，设置title值
• 表单内容可使用fieldset/legend进行包裹，读屏软件虽对form不识别，但是会识别legend内容
• 需要读到的内容不能使用display:none或者position:absolute将之移至屏幕以外
• 使用click事件时对应读屏模式下的单指双次点击，使用touchStart和touchEnd组合则为双指双击
• 为读屏模式下不可选中的父元素加上tabIndex=”0”，则变为可选中且读屏内容为子元素的文本组合
• role属性定义了对象的通用类型，若要使用非语意对应标签，则要加上该属性避免误导

知识引申： WAI-ARIA无障碍网页应用属性完全展示