浅析HTML的无障碍标签和元素幻灯片.pptx

浅析HTML的无障碍标签和元素 信息无障碍 -- Accessibility 任何人在任何情况下都能平等、便利、无障碍地获取信息、利用信息。 关键词： 可及性 - 通用性 - 易用性 Web 可能面对 视障人士 听障人士 老年人 读写障碍人士 受环境影响，不能正常使用信息的人士 是否考虑了如下的因素 读屏软件 屏幕放大器 语音控制 键盘用户 点击目标较小 小按键 了解 WCAG （Web Content Accessibility Guidelines）2.0 Web内容无障碍指南 2.0 W3C推荐标准，同时也是ISO标准; 广泛运用在Web内容、应用与及网站运营; 前瞻性的设计思路; 可运用在软件、移动设备等； WAI-ARIA（Accessible Rich Internet Applications） 1.0 可及性富互联网应用 1.0 让动态Web内容更无障碍 定义了可以描述widget和网页结构的角色 拖拽类的资源、目标的属性界定 为Web对象和事件提供键盘导航 基本工作原理 常见的Accessibility API Microsoft Active Accessibility [MSAA] Microsoft User Interface Automation MSAA with UIA Express [UIA-EXPRESS] the Mac OS X Accessibility Protocol [AXAPI] the Linux/Unix Accessibility Toolkit [ATK] Assistive Technology Service Provider Interface [AT-SPI] IAccessible2 [IAccessible2] 工作原理 - 案例 img 元素 – role 通过 alt 命名 – name 包含长文本描述 img alt=天安门 src=1.jpg longdesc=”2.html” 辅助技术 + IE对上述控件的表述： 图形：天安门 包含长描述 HTML的无障碍 大多数 HTML 元素隐含有自己的 role，可被辅助技术使用 ul ol - 列表 a - 链接 body - 文档 辅助技术也会探索HTML元素中的其它内容 Name State input type=radio id=“1 name=drinks checked label for=“1”可口可乐/label Aria-* 对HTML的语义的补充 HTML并不能充分的表达自已的role、name、state WAI-ARIA 定义四个类别的role，用于加强HTML的语义 Abstract Roles Widget Roles Document Structure Roles Landmark Roles Aria-* 用于描述元素的属性和状态 案例 div id=header role=banner1/div div id=sitelookup role=search2/div div id=nav role=navigation3/div div id=content role=main4/div div id=rightsideadvert role=complementary5/div div id=footer role=contentinfo6/div div id=form role=form7/div 添加 landmark 类型的role，帮助辅助技术确定内容区域 span role=“button” tabindex=“0” onclick=“handleBtnClick()” onKeyUp=“handleBtnKeyUp()”保存/span 添加 role，告知辅助技术该元素的真实功能 HTML5中的新元素 资料来源： 键盘焦点及导航 某此元素不能通过Tab键获取焦点，例如，div、p 通过 tabindex 帮助键盘获取焦点 tabindex = “0” 将元素加入默认的导航键序 tabindex “0” 将元素加入的相应的导航键序 tabindex “0” 元素不加入键盘序列，但可被脚本激活并正常导航 p tabindex=2tabindex = 2/p p tabindex=1tabindex = 1/p p tabindex=0tabindex = 0/p p tabindex=-1tabindex = -1/p 为元素添加标签或替代文本 button aria-label=“关闭 onclick=myDialog.close()X/button form