Web无障碍化实践专题课件.ppt

Web无障碍化实践 现实中的无障碍 Web无障碍 - 用户 使用者 使用困难原因 视觉障碍 无法接收图片等视觉信息 听觉障碍 无法接收视频文件的声音 肢体障碍 不能很好的操作键盘和鼠标 老人 老花眼等 Web无障碍化 - 介绍 视力有障碍的人士，无法像正常人一样用眼睛浏览网页。此时的解决办法就是 用读屏软件将网页上的内容转成声音以帮助用户了解屏幕的内容。 由此带来的需要我们开发人员提供的就包括： 1. 鼠标变得毫无用处，因此必须提供键盘支持； 2. 对于图片必须提供文字的描述信息； 3. 方便的链接指导用户到自己需要了解的内容； Web无障碍 - 键盘操作 按键 操作 方向键 选择radio, select控件的选项 Tab键 切换到下一个焦点 Shift+Tab键 回到上一个焦点 Enter键 打开链接、提交表单等 Space键 选中或取消复选框, 点击按钮 Web无障碍 - HTML元素 DEMO 只有可操作的元素可以focus, 包括但不止: a, input, select, button 假如按钮有disabled的属性, 就不能focus Web无障碍 - TabIndex TabIndex的访问顺序: 1. 从1开始，然后是2依次增大 2. 当页面没有再大的元素后，则访问tabindex为0的元素 3. 然后是无TabIndex但可以默认访问的元素。 假如有多个元素是相同的TabIndex，则按照DOM的顺序访问。 TabIndex为负数的元素不能访问，约定俗成这部分设为-1。 Web无障碍-典型HTML元素的键盘操作 元素 操作 a 使用Enter键打开链接 input type=button/和button 使用Space键响应 input type=checkbox/ 使用Space键响应 input type=file/ 使用Space键响应 input type=radio/ Tab键: 当没按钮选中时, 聚焦在组内的第一个单选按钮上, 但不选中; 假如shift+tab, 则聚焦在最后一个单选按钮上, 依然不选中; 当有按钮选中时, 聚焦在选中的按钮上 Space键: 选中当前聚焦的按钮(常用于tab键但没有按钮选中的情况下) 下键: 如果没有按钮选中, 则选中第一个按钮; 如果当前是最后一个按钮选中, 则选中第一个按钮; 否则, 选中下一个按钮 上键: 与下键相反 select 上下键直接选择, 不展开列表. Alt键+方向键展开列表. Web无障碍 - 键盘事件(Keyup, Keydown, Keypress) 触发顺序: keydown - keypress - keyup keyCode: keypress是真实输入的字母, keydown和keyup不能区分大小写(使用大写字母的keyCode) 特殊的键: 对于Ctrl, Shift, Tab, Win和方向键, keypress监听无效 对于键盘右键, 只能使用keydown监听, keyup时已唤起右键菜单, 焦点不在页面上了 对于方向键, 如果想要阻止页面滚动, 需要监听keydown事件, 因为keyup时页面已经滚动 Web无障碍-读屏软件 国外: NVDA screen reader 国内: 争渡读屏 永德读屏 阳光读屏 晨光读屏 Web无障碍 - Role和Aria属性 Role属性, 用于指定当前元素的角色. 例如一个div, 加上role属性后, div role=checkbox/div, 在读屏软件眼里就变成了复选框(当然你还要自己完成复选框的键盘操作) Aria属性, 用于标识当前元素的状态. aria里面有一大堆属性用来描述当前元素的状态, 但是最重要的是aria-label, 这个属性读屏软件必然能够读出来. 写法是 div aria-label=“aria label” tabindex=“0”/div Web无障碍-隐藏元素 display: none visibility: hidden height: 0 Web无障碍 - 自定义控件 DEMO - Checkbox 手机上的无障碍 - voiceover talkback 开启: Voiceover: 设置 - 辅助功能 - voiceover Talkback: 设置 - 辅助功能 - 话语提示(一定要开启web支持) 动作 操作 单击 选择元素 双击 激活选中的元素 三指滑动 滚动 左(右)滑动 上一个(下一个)元素 长按并滑动 读出当前被选中的元素 旋转 改变阅读模式 当输入的时候上(下)滑动 上一个(下一个)字符 手机上的无障碍 - 总结 1. 不支持TabIndex 2. 依赖元素自身的属性 3. 仍