搜索
WEB可访问性设计Accessibility2提纲1.Web可访问性概念2.Web可访问性原理3.Web可访问性工具3提纲1.Web可访问性概念1.什么是可访问性？2.为什么要考虑？3.定义？2.Web可访问性原理3.Web可访问性工具41.1什么是可访问性？5/102网站第一印象与可用性几乎没关系，主要是可访问性在主导。6/102如果网站访问不顺利，所有设计将等于零！7问题：网址的是否必须加？89/102当当网dangdang.com问题：新开窗口还是本窗口打开？12/102target=_blank13•中国普遍网速慢，用户需要多打开页面减少等待时间•中国网页内容有效性普遍较差，用户需要多打开相关页面做比较•中国网站导航做的比较差，用户容易迷失方向，所以干脆粗暴解决•多窗口将消耗更多系统资源•将会使前进、后退按钮无效•对某些残障人士终端支持不友好•不便用户关闭所有窗口target=_blank14/102新窗口打开应该交给用户自己选择，而不是设计师强制默认。GoogleSearch15google.cngoogle.comtarget=_blank161.2为什么要考虑？ColorBlindness17/102红绿色盲看到的效果18NonCSS为什么要考虑？•跨终端跨平台兼容支撑；•应付极端环境下的正常浏览需求；–网速慢–I/O设备故障–客户端限制•保障残障人士无障碍信息获取。–视障–全盲–弱视–红绿色盲–肢体残疾–老年人20TheRehabilitationActAmendments(Section508)21高齢者・障害者等配慮設計指針－情報通信における機器22視障人士使用輔助工具瀏覽香港政府一站通231.3定义24可访问性是对所有用户一视同仁，不仅仅是为残障人士构建“平等、参与、共享”平台。25可访问性应该无论用户使用何种软硬配置、网络基础设施、语言文化背景、地理位置，以及他们的身体条件和智力经验水平。26主要解决的问题•应付极端环境下的正常浏览需求；•结构、表现、行为跨终端跨平台兼容支撑；•保障残障人士无障碍信息获取；•强化搜索引擎友好。27提纲1.Web可访问性概念2.Web可访问性原理1.站点可访问性2.服务可访问性3.功能可访问性4.内容可访问性3.Web可访问性工具站点可访问性WebsiteAccessibility1.网站无法访问2.假链接网址不够友好3.首页无法有效浏览4.页面兼容性太差2829站点可访问性指用户能够正常链接到该站点，访问该站点页面。站点可访问性WebsiteAccessibility1.网站无法访问2.假链接网址不够友好3.首页无法有效浏览4.页面兼容性太差30网站不存在31未备案被关闭32因病毒危险被浏览器屏蔽33需要访问新域名34站点可访问性WebsiteAccessibility1.网站无法访问2.假链接网址不够友好3.首页无法有效浏览4.页面兼容性太差3536查询结果URLBJS_CTU2012_01_2037REST设计准则针对Web应用而设计，可以降低开发复杂性，提高系统可伸缩性。设计准则如下：•网络上的所有事物都被抽象为资源；•每个资源对应一个唯一的资源标识符；•通过通用的连接器接口对资源进行操作；•对资源的各种操作不会改变资源标识符；•所有的操作都是无状态的。站点可访问性WebsiteAccessibility1.网站无法访问2.假链接网址不够友好3.首页无法有效浏览4.页面兼容性太差38无意义的过渡首页39强行要求设为主页40挡住页面或过多的弹出式窗口41window.open(‘=yes,location=no,directories=no,status=yes,menubar=no,scrollbars=no,resizable=yes,copyhistory=yes,width=400,height=300,left=0,top=0')弹窗被浏览器阻止过多的浮动层窗口42首页脚本错误43不合理布局造成的重要内容无法显示44站点可访问性WebsiteAccessibility1.网站无法访问2.假链接网址不够友好3.首页无法有效浏览4.页面兼容性太差45无法加载CSS46各浏览器的兼容不统一47不支持flash的兼容处理48屏蔽JS默认首页展开折叠FLASHIMG预留退路49=T45&s=42#J_FilterTabBarjavascript:go('currentPage=2')JS翻页50noJSdefaultJS显示图片51雅虎首页noJS52noJSdefault服务可访问性ServiceAccessibility1.链接的页面不存在2.正在建设中的项目3.需要用户成为会员4.需要下载或升级软件5.专用软件的阅读方式5354服务可访问性指用户能够正常体验站点提供服务，享受服务方式。服务可访问性ServiceAccessibility1.链接的页面不存在2.正在建设中的项目3.需要用户成为会员4.需要下载或升级软件5.专用软件的阅读方式55链接的网页不存在57找不到…•没有必要使用“404错误”专业术语，其实就是“找不到网页”意思。•不要责备访客，措辞尽量充满歉意、幽默并提供有益帮助。•提示访客检查他们的拼写错误，如果是用户敲错URL的情况。•让页面标题返回一个404错误代码•明确表明页面无法被找到，不要与正常内容页类似。•帮助访客找到他们需要的，确保错误页中包含一个选项来协助用户寻找他们想要的页面。•放置网站主页的链接，至少应该有一个链接链回你的网站主页。•让访客方便地反馈信息，提示访客他们来自哪个页面及哪个链接。•保持品牌的统一风格和感觉，不要使页面设计与网站的其他页面相差太大。•翻译成访客所使用的语言，注意不同语言提示、版本的引导。•让访客搜索他们想要的，如果页面内容都已经移动。•修复你的无效链接，如果数据显示有大量访客访问404页面。•不要重定向到主页，访客也许不知道他们已经链接到了错误页面。58Google59FailWhale606162服务可访问性ServiceAccessibility1.链接的页面不存在2.正在建设中的项目3.需要用户成为会员4.需要下载或升级软件5.专用软件的阅读方式6364MicrosoftBing65预告…•当网站正在培植中的时候，一样平常会给出一个提示页面，这个提示页面的计划实际上是很有讲求的，计划得好的话可以让拜候者精密亲密关注网站的上线侍旧锁而在正式推出的时候获得很多的回访流量。•在网站没有完全开发完之前，很多人喜欢做一个正在建设中的页面放到网站上去，以便让人们可以临时访问，那么今天分享25个最佳的正在建设中网页设计，希望其中有你喜欢的。服务可访问性ServiceAccessibility1.链接的页面不存在2.正在建设中的项目3.需要用户成为会员4.需要下载或升级软件5.专用软件的阅读方式6667万方数据服务可访问性ServiceAccessibility1.链接的页面不存在2.正在建设中的项目3.需要用户成为会员4.需要下载或升级软件5.专用软件的阅读方式68美嘉电影院线上订座69如果下方窗口未显示Loading...或座位图，你将需要安装Java软件。请至下载免费的Java软件，或者手动下载安装Java软件。美嘉电影院线上订座70服务可访问性ServiceAccessibility1.链接的页面不存在2.正在建设中的项目3.需要用户成为会员4.需要下载或升级软件5.专用软件的阅读方式71功能可访问性FunctionalAccessibility1.没有站内搜索2.过多的搜索入口3.关键内容信息缺失4.表单功能性缺失5.过多的下载地址7273功能可访问性指用户能够正常使用网站功能模块，顺利完成任务。功能可访问性FunctionalAccessibility1.没有站内搜索2.过多的搜索入口3.关键内容信息缺失4.表单功能性缺失5.过多的下载地址7475UCDChinaBlog功能可访问性FunctionalAccessibility1.没有站内搜索2.过多的搜索入口3.关键内容信息缺失4.表单功能性缺失5.过多的下载地址7677淘宝合并店铺搜索78功能可访问性FunctionalAccessibility1.没有站内搜索2.过多的搜索入口3.关键内容信息缺失4.表单功能性缺失5.过多的下载地址7980没有价格的客房介绍功能可访问性FunctionalAccessibility1.没有站内搜索2.过多的搜索入口3.关键内容信息缺失4.表单功能性缺失5.过多的下载地址8182必须带小孩的客房预订表单功能可访问性FunctionalAccessibility1.没有站内搜索2.过多的搜索入口3.关键内容信息缺失4.表单功能性缺失5.过多的下载地址8384天极下载内容可访问性ContentAccessibility1.为视听内容提供同等的文字替代2.不要仅依靠色彩来提供信息3.适当使用标记语言和样式表4.阐明自然语言的使用5.创建编排良好的表格6.确保页面能够在新技术下良好呈现7.确保使用者能处理时间敏感内容的改变8.确保嵌入式用户界面能被直接访问9.确保设备无关的设计10.使用过渡的解决方案11.使用W3C推荐的技术和规范12.提供内容引导信息13.提供清晰的内容导航机制14.确保文档内容的清晰与简单8586内容可访问性指用户能够正常获取网站内容信息，理解图片和多媒体等。内容可访问性ContentAccessibility1.为视听内容提供同等的文字替代2.不要仅依靠色彩来提供信息3.适当使用标记语言和样式表4.阐明自然语言的使用5.创建编排良好的表格6.确保页面能够在新技术下良好呈现7.确保使用者能处理时间敏感内容的改变8.确保嵌入式用户界面能被直接访问9.确保设备无关的设计10.使用过渡的解决方案11.使用W3C推荐的技术和规范12.提供内容引导信息13.提供清晰的内容导航机制14.确保文档内容的清晰与简单87img+altalt=textspeakerspeakerimg+text881.为视听内容提供同等的文字替代•对于所有非文本元素，提供具有相同意义的同等的替代文字。imgsrc=alt=longdesc=*.html/•能自动地将视频信息的同等替代文字朗读出来，否则就应该提供听觉上的描述内容，以表达视频或多媒体呈现的重点信息。•对于任何时间性的多媒体内容（如电影或动画），都应该将等价的替代对象（如字幕或视频的听觉性描述）与媒体播放同步化。•能绘制出客户端图像映射链接的等义文字，否则应该为每个客户端图像映射的有效区域提供额外的文字链接。内容可访问性ContentAccessibility1.为视听内容提供同等的文字替代2.不要仅依靠色彩来提供信息3.适当使用标记语言和样式表4.阐明自然语言的使用5.创建编排良好的表格6.确保页面能够在新技术下良好呈现7.确保使用者能处理时间敏感内容的改变8.确保嵌入式用户界面能被直接访问9.确保设备无关的设计10.使用过渡的解决方案11.使用W3C推荐的技术和规范12.提供内容引导信息13.提供清晰的内容导航机制14.确保文档内容的清晰与简单89Non-colorh2h3pli902.不要仅依靠色彩来提供信息•确保所有通过颜色传递的信息在无色情况下也可用。•确保前景色与背景色的搭配组合有足够的对比度，即使在色盲患者的眼中，或在黑白屏幕里，都能清晰显示。内容可访问性ContentAccessibility1.为视听内容提供同等的文字替代2.不要仅依靠色彩来提供信息3.适当使用标记语言和样式表4.阐明自然语言的使用5.创