WCAG2.0总结

2019独角兽企业重金招聘Python工程师标准>>>

 

Aria属性列表

Label            常用在input输入框要关联对应的说明时，用for属性的id值关联对应的说明

Aria-label,   要给元素加简短说明时使用

aria-labelledby,   一般关联两或者多个个元素时，或者用在描述说明比较长时（可以关联多个id）

aria-describedby,   关联描述内容

aria-checked,  描述复选框的选中状态

aria-expanded,   描述展开收起状态

aria-haspopup,   表示点击时出现菜单或者是浮动的选项

aria-selected,表示选择状态，undefined未知，true已选择，false未选择

aria-busy   使读屏工具在模块没有更新完成之前不要告诉用户

aria-live和aria-atomic配合使用

网页某个某块有更新，通知用户  常用值为：aria-live=“assertive” 不打断用户使用

 aria-atomic=”true/false”  是否把整个更改的内容通知用户

aria-readonly  设置是否为只读状态

aria-required  设置是否为必填项

aria-hidden  设置隐藏

role属性列表

role=”alert”    当要表现弹出框内容或者提示input输入框输入内容不为空

 

role=”button”   模拟button ， 当元素为div或者a标签，起到button的作用时

role=”tab”   一般和menulist连用，   模拟tab，当元素为div或者a标签，起到tab的作用时

role=“radio”和role=“radiogroup”   常用在一组单选按钮

role=”option”和role=“combox”  连用  表示下拉选项

role=“checkbox”和role=“group”  连用    常用在一组复选框

role=“menu”  常用在菜单

role=“listbox”     常用在列表框

role=”heading”   常用在应用标题头，日历标题头

role=“ application”  表示应用程序或者某个功能模块，例如：日历

 

tabindex：最常用的值0和-1；0表示让其获得焦点，-1表示不要使其获得焦点

1.非装饰性图片无替代文本

 利用alt 属性

 <img alt='jdlogo' src='1.jpg'>

2. 图片链接缺少目的文本

  在 alt 属性中描述目的

  <a href='2.html'><img src='2.jpg'  alt='回家的路线'></a>

 利用文案链接

 <a href='3.html'><br/>

 <img src='3.jpg' alt=' '>去到无障碍主页

</a>

alt和文案链接配合使用

<a href='23.html'>

  <img src='response.gif' alt='收到响应的图标'>

</a>

3. 图片按钮缺少目的文本

  利用tittle属性

<button type='tutton' tittle='信息产业联盟'><img src='logo.jpg'  alt=''></button>

  利用alt属性

<button type='tutton' ><img src='logo.jpg'  alt='信息产业联盟'></button>

4. 图片按钮/链接不能响应回车键----->添加键盘响应事件

<img src='图片按钮' onkeyup='handle()'>

5. 图片按钮控件类型朗读不正确  利用role属性

<img src='图片按钮' onkeyup='handle()' role='button'>

6.图片按钮无法获得键盘焦点  利用tabindex属性

  网页元素中,只有表单元素和超链接是默认支持获取焦点的,其他元素要被focus到,要用tabindex属性

   //去掉 onfocus='this.blur()'

   <img src='图片按钮' onkeyup='handle()' role='button'   tabindex='0'>

 

 

 

 

转载于:https://my.oschina.net/u/3150996/blog/818555