杨永全:【组障碍访问】一个盲人眼中的网页内容无障碍体验与设计 大纲
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 1,553 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,553
On Slideshare
1,553
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
43
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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