12.26日报

12.26日报

你知道网页的无障碍是干嘛的吗?不,你不知道,你不会关心残障人士是怎么浏览网页的,你只关心你自己!

WAI-ARIA无障碍
ARIA:Accessible Rich Internet Applications,它是W3C的 Web无障碍推进组织 (WAI) 在2014年3月20日发布的 可访问富互联网应用 实现指南。

WAI:Web Accessibility Initiative (由 W3C 在1997年发起)是一系列计划供 web 开发者、创作者以及设计者使用的指导方针 - 关于如何使内容对残障人士更易用。

这些指导方针的目标是易用性(accessibility),但是也有助于使 web 内容可用于更多的浏览器(语音浏览器、移动电话、手持设备),以及更多工作于困难环境的用户(非手持式的、强光、黑暗、弱视、噪音等)。

为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范

ARIA 是对 HTML 语义化的补充。它具备比现有的 HTML 元素和属性更完善的表达能力,并让你页面中元素的关系和含义更明确

WAI 对您的网站来说很重要吗?
是的。

每天都有百万计的残障人士在网上冲浪,并且甚至超过百万计的人们正在使用着不良的浏览器设备。

假如您的网站缺乏诸如可调节字体尺寸、带有文本描述的图形以及便捷的导航,那些人们就无法访问您的信息。

事实上:您的网站剥夺了这些人的权利。

增强网站易用性的理由还有:
可提升网站的美誉度和形象
可提升用户满意度
可增加访问者的数量
可增加访问者在站点的停留时间
可增加访问者的回访数量
可同样为无残疾人士增加可用性
可为关闭图形功能的访问者增加可用性
可为使用老式设备的人群增加可用性
可使您的网站为增长速度最快的人群提供服务:老年人群

如何使用ARIA
应用于HTML的ARIA有两部分组成: role (角色)和带 aria- 前缀的属性,其作用:

role (角色)标识了一个元素的作用
aria- 属性描述了与之有关的事物(特征)及其是什么样的(状态)
ARIA 的角色 role
role 属性值 含义
alert 表示警告
dialog 表示Modal弹出窗
presentation 表示描述
application 表示应用
button 表示按钮
raido 表示单选框
checkbox 表示复选框
combobox 表示表单控件
grid 表示网格
gridcell 表示单元格
group 表示组合并
heading 表示标题、h1
listbox 表示列表框、select
option 表示选项
menu 表示菜单
menubar 表示菜单栏
menuitem 表示菜单项
menuitemradio 只能单选的菜单项
menuitemcheckbox 可复选的菜单项
上表中并没有列出所有ARIA的角色,当然并不是所有的HTML元素都具有对应的ARIA的 role

ARIA的属性
下表介绍了ARIA相关属性的使用方法。

猜你喜欢

转载自blog.csdn.net/zzxin1216/article/details/111879243