使用Dojo开发支持Accessibility的Web应用

简介

Accessibility,又经常被缩写为 a11y,指的是软件产品的可访问性、易用性,特别是指对于诸如视 力低下等残障人士的使用上的无障碍性。Web 应用,越来越多的作为软件产品的发布形式。而且随着互联 网应用的飞速发展,Web 程序的易用性(Accessibility)显得尤为突出。

一个好的Web 应用程序,必然需要支持 accessibility(a11y)。这主要是要考虑到世界各地的具有伤 残障碍的残障人士比例都不小,他们不能像正常人一样进行识别、阅读、操作 Web 网页,从而形成不公 平的障碍。目前,很多发达国家,比如美国、欧洲、日本等国家都针对 a11y 立法,不符合 a11y的软件 程序很多都不在政府机关等的采购范围内。所以说 Web 应用程序对于 a11y的支持是一个基本上不可或缺 的功能。

目前越来越多的开发者加入 a11y的阵营,来关注残障人士,为其 Web 程序增加 accessibility的支 持。Dojo 作为一个 JavaScript/Ajax 类库,附带了一些含有 a11y 支持的UI 小组件,并且提供了一些 简便的方法来帮助开发者更容易便捷的将自己的Web 网页提升一个层次,支持 a11y。

页面样式和字体选择

一般而言,对于残障人士,尤其是视力不好的用户,大的字体,间隔分明的布局体系有利于他们阅读 Web 网页。他们也通常会利用浏览器自带的放大缩小字体的功能来为自己设置最为合适的字体。不同的浏 览器放缩字体的方法不尽相同,在 Firefox 浏览器中可以使用“Ctrl +”快捷键来放大字体,“Ctrl - ”快捷键来缩小,而 IE 浏览器则而可以使用菜单上的字体缩放来调整。

字体的使用,应该尽量使用比较规范的印刷体字体,而不要使用一些不常见的手写体形式。字体的大 小可以在层叠样式表 CSS 中定义以百分比,或者以 em 等为单位设置字体大小,从而支持动态缩放。这 样的字体单位属于相对单位,各种浏览器都能较好的支持。同样,也可以在 JavaScript 中使用 Dojo 为 页面上的某些节点动态方便的设置字体大小,这主要用于一些 Ajax的应用程序中:

dojo.query(".big").style("fontSize","150%");
// 将页面上所有具有 big 这种 css 类的节点的字体大小设置成 150%;

当然不使用 CSS 而去使用 JavaScript 定义字体大小是不常见的,但是对于某些对浏览器应用不熟悉 的视力有问题的用户来说,我们可以在网页的显眼位置设置增大、缩小文字的按钮,用户通过点击这两个 按钮,而不需要掌握浏览器伸缩字体的方式,就能够放大、缩小网页上的字,很显然,这种按钮的背后就 是上面使用 Dojo的例子那样的JavaScript 在起作用。

而更加人性化,完备的解决方案则是多样式表的提供,比如说专门为视力弱小的人群提供 a11y 形式 的CSS, 用户可以自主的选择这种样式为整个网页换肤,并且,浏览器通过 cookies 记录下来用户的偏 好样式,以后每当该用户重新访问该网页的时候,就使用之前用户选择的a11y的CSS 进行呈现,下面是一 个使用 Dojo 动态替换样式表的例子:

在 HTML 文件中指定了默认的CSS 样式文件

<link id="theme" type="text/css"  rel="stylesheet" href="default.css"/>

用户点击 changeThemeButton 切换到 a11y的CSS, 使用 Dojo 可以很方便的做到:

dojo.require("dojo.cookie");
var changeThemeButton = dojo.byId("changeThemeButton");
function changeTheme(){
     var styleObj = dojo.byId("theme");
     var src= "a11y.css";
     dojo.attr(styleObj, "href", src); //设置新的样式
     dojo.cookie("style", src); //设置cookies
}
//使用dojo的event connect机制,用户点击changeThemeButton,将触发changeTheme方法
dojo.connect(changeThemeButton, "onclick", changeTheme);

时间: 2025-01-26 19:21:06

使用Dojo开发支持Accessibility的Web应用的相关文章

Dojo特性支持对一个Web应用程序或网站执行本地化或国际化

Dojo Toolkit 是一个强大的 http://www.aliyun.com/zixun/aggregation/33906.html">JavaScript 库,支持 Web 开发人员使用面向对象的窗口小部件,以极少的开发时间和精力创建富互联网应用程序 (Rich Internet Applications, RIA).这个库中包含 4 个程序包,分别为 Dojo(核心).Dijit(UI 框架).dojox(dojo 扩展)和 util.可按原样使用该工具包提供的功能,也可扩展该

使用Flex和Dojo开发交互式Web应用程序

简介:本文分为四个部分,首先简单介绍交互式 Web 应用程序的体系结构,分析 Dojo 技术和 Flex 技术的用途:然后通过一个具体实例来讲述 Flex 应用程序的开发及与传统 Web 项目的结合:其次同样 通过实例介绍如何在 Web 客户端中使用 Dojo 技术,及如何和后台服务进行交互,最后分析 Flex 技术 和 Dojo 技术结合使用这种模式在交互式 Web 应用程序中的可行性和所具有的优势.通过本文的讲解, 一方面读者能够清楚的了解到同时使用 Flex 和 Dojo 的必要性.可行性

在WebSphere sMash中使用Dojo开发Ajax的Web应用程序

开始之前 本文假设您已经下载了 WebSphere sMash 并且完成了简明教程的学习,或者曾经写过简单的应用程序.您应该熟悉 Ajax 的基本原理和 Dojo 的相关使用方式. 你还需要具备以下先决条件来完成本文的示例应用程序: JDK 5.0 或更高版本. WebSphere sMash 1.0.0.4 或更高版本的命令行环境. 通畅的网络连接来连接 SMTP 邮件服务器. Firefox 3.0 用于启动 AppBuilder AppBuilder 现在是 WebSphere sMash

使用Dojo开发定制Business Space小部件,第3部分

使用Dojo开发定制Business Space小部件,第3部分: 在iWidget中使用多个模板和从基本小部件继承 简介 我们为本系列开发的定制小部件是基于 WebSphere V7.0 支持的 Business Space(以下简称 Business Space)中附带的 Dojo 版本,已经在 Mozilla Firefox 3.0.11 中测试过了.只是,我们开发的通用框架概念甚至可以应用到使用 Dojo 的应用程序中,但却不能用于 Business Space.学习本系列需要具备 DO

基于J2EE架构的企业应用开发新思维:Web应用以谁为中心

基于J2EE架构的企业应用开发新思维:Web应用以谁为中心?浏览器?服务器 企业Web应用,指的是企业内部使用B/S架构搭建的企业信息系统,用户一般局限在企业内部,为了适应企业某个业务流程而设计开发使用的系统. 出于跨地域部署升级的考虑,一般采用B/S模式进行开发,避免在每个客户端安装配置的麻烦. 一般情况下,前台浏览器特指IE浏览器,前台操作系统选择Windows操作系统. 非Windows操作系统的客户机与非IE的浏览器不在本文讨论范围之内. 本文主要讨论以J2ee架构为基础的Web应用,其

开发和部署JAX-WS Web服务

在WebSphere Application Server Community Edition V2.0中开发和部署JAX-WS Web服务 引言 IBM WebSphere Application Server Community Edition V2.0(以下简称为 Community Edition)是构建于 Apache Geronimo 2.0 之上的应用服务器,而 Apache Geronimo 2.0 是由 Apache 软件基金会创建的开放源代码应用服务器.Community E

web开发设计必备 在线web工具网站和应用

  开发设计必备 在线web工具网站和应用-web前端开发必备软件"> 大家可能还记得在过去的文章我们我们曾经介绍我们收集的前端开发人员必备的工具,脚本和资源,在今天的这篇文章中,我们将继续推荐给大家一组我们精挑细选的web开发设计必备的在线工具应用.相信会在web开发和设计的过程中给你带来方便和快捷! 前端开发相关 jsfiddle jsfiddle是老牌的在线调试和分享代码的网站,它可以帮助你在线调试javascript/css/html代码, 并且方便的发布到社区,论坛或者社交媒体上

最锋利的Visual Studio Web开发工具扩展:Web Essentials详解

原文:最锋利的Visual Studio Web开发工具扩展:Web Essentials详解  Web Essentials是目前为止见过的最好用的VS扩展工具了,具体功能请待我一一道来.   首先,从Extension Manager里安装:最新版本是19号发布的2.5版 然后重启你的VS开发环境,就可以使用它提供的方便功能了. Web Essentials对CSS.JavaScript和HTML都提供了很多快捷的功能支持,具体列表如下: CSS 即时预览Live Web Preview每次

开发手记之实现web.config的快速配置

web 问题简述:        在Web开发中,对web.cofig进行配置是非技术人员无法胜任的工作,但是常常需要由客户自己来进行简单配置的时候,需要提供一个有效的工具来指导客户完成这项操作,并且防止无效或错误的更改. 解决方案:       首先,必须了解对系统的配置主要包括machine.config和web.config两个部分,这两个文件本质上是Xml文件,包含了ASP.NET的所有配置信息.因此,对系统的配置,实际上是对Xml文件的操作,因此,我们可以采取对Xml文件的读写操作,来