杨永全组障碍访问一个盲人眼中的网页内容无障碍体验与设计-大纲.docxVIP

《一个盲人眼中的网页内容无障碍体验与设计》 主要内容： 自我介绍 读屏软件介绍 读屏软件基本功能概述 读屏软件就是朗读屏幕上的信息，屏幕上显示什么，读屏就应该朗读什么。 如何朗读，朗读多少是人控制的，就好像我们用眼睛看，看哪里，怎么看都是我们说了算。键盘操作是读屏软件的核心操作方式。 键盘操作并非读屏软件专有，而是 windows 系统默认功能，是天生的功能，是所有人都可以享受到的功能。 一个软件能否用键盘操作应该是衡量软件是否完善的重要指标，不支持键盘操作的软件是个瘸腿的软件是个残疾人。 读屏软件操作网页 具有 tab 焦点的网页元素 表单元素 innertext ， title ， alt ， value 等是读屏软件获取的主要信息。 上下左右方向键是控制操作网页的主要热键。 信息无障碍内容介绍信息无障碍 网页内容无障碍 信息无障碍的两个重要元素：方便、平等 无障碍的适应人群（老年人、儿童、视障人、智力障碍、肢体残障等） 信息无障碍并不是什么高难的课题，也不需要额外的成本 无障碍不会影响美观，也不影响交互 遵循无障碍有什么好处 遵循无障碍会给公司带来什么 什么时候应该考虑无障碍？ 就 web 无障碍而言，需要标准制定者，浏览器开发商，屏幕阅读器开发商， web 开发者，视 障用户的共同努力，很多特性需要浏览器和读屏软件的共同支持。 关于给特定人群开发专用版网页的讨论 信息无障碍国内外发展情况 1998 年 wcag1.0 2008 年 wcag2.0 2008 年工信部发布《身体机能差异人群网页内容无障碍标准》 WAI-ARIA 淘宝网和腾讯朋友是国内实践 aria 的典型范例。 常见的网页内容无障碍问题 4.1 web 标准相关的无障碍问题 确保 dom顺序与视觉顺序一致 表单元素要使用 lable 关联提示文本 img ： 要有 alt 属性，这是对读屏软件、搜索引擎、图片地址失效等都有好处的。 如果文本嵌入在图像中，将文本添加到 alt 属性。 1 装饰性图片应该由 CSS处理。 如果一个链接只包含图像内容，那么 alt 文本应描述链接的功能，而不是图像本身。 a 元素： 一个链接在脱离语境时仍然有意义； 链接文本在它出现的页面上应该是唯一的（即不同资源不要使用相同的链接文本） ； 要有 href 属性 span 等没有 tab 焦点的元素如果绑定 onclick ，要增加 tabindex 属性 验证 HTML和 CSS对可访问性是有益的。 虽然不一定要非常完美， 但通过验证是终极目标。 无 效的 HTML或 CSS会给辅助技术带来问题， 即使在浏览器中的表现是好的。 健壮的网页更容易 在各种浏览器和设备中工作。易于维护一致编码的页面更容易创建、维护和解决问题。可靠 的网页渲染和执行更可信。通过验证的代码更容易支持浏览器和设备的未来版本。技术上的 通过验证的文档并不能保证其可访问性。一个完全通过验证的文档，如果它的语义完全是错 误的话，将损害文档的可访问性。例如：标题结构不合理，使用 blockquote 来缩进文字，在 布局表格中使用 summary 属性。为了验证您的代码，你可以使用 W3C的 相关 web标准检测工具和网址 .edu 4.2 onfocus=this.blur() 的滥用 典型反例： 4.3 弹出层的焦点处理（包括弹出之后的默认焦点以及层消失后的焦点处理） 层弹出之后，把焦点给到新弹出层的一个元素上。 层消失后，把焦点还给触发他的那个元素。 结语 谢谢大家给我这次分享的机会， 最后我想引用今天一位嘉宾曾说过的一段话作为今天的结语： 让每个网站都可以很方便的被所有人访问，每个软件都可以很方便被所有人使用，让每个信 息都可以让所有人很方便的获得，不歧视任何一个特定的人群，是每个 IT 公司和 IT 工程师共同的社会责任，也是一个社会文明的体现。如果到今天，我们的设计师还在做象 onfocus=blur 这样的有障碍设计，那是这个设计师的耻辱，这个产品的污点，社会文明的倒退。 信息无障碍在国内还是刚刚起步，网页内容的无障碍也还有很长很长的路要走，这需要我们大家一起努力。 今天我能来到这里，能与大家分享这些内容，我觉得非常高兴，虽然我说了很多与盲人有关的障碍，但我想这会是一块敲门砖，希望可以打开迈向信息无障碍的大门。我相信我们的 d2forum 将会在推动无障碍道路上卖出更大的步伐。 我相信未来我们的信息之路会变得越来越通畅。 最后谢谢大家。 相关网址推荐： 开发和测试访问无障碍的 Web 应用 /cn/web/1003_sunqy_access/ 盲人站长深恶痛绝的 onfocus= “this 。 blur （）” /2011/04/15/onfocus-this-blur/