Use dojo to develop Web applications that support accessibility

Brief introduction

accessibility, often abbreviated as a11y, refers to accessibility and ease of use of software products, especially to the accessibility of people with disabilities such as poor eyesight. Web applications, more and more as a software PRODUCT release form. And with the rapid development of Internet applications, the ease of use of WEB applications (accessibility) appears particularly prominent.

A good web application is bound to support accessibility (a11y). This is mainly to take into account that the world's disabled people with disabilities, the proportion is not small, they can not like normal people to identify, read, operate Web pages, thus creating an unfair barrier. At present, many developed countries, such as the United States, Europe, Japan and other countries are against a11y legislation, not in line with the A11Y software programs are not in the procurement scope of government agencies. Therefore, WEB application support for a11y is a basic and indispensable function.

More and more developers are joining a11y to focus on people with disabilities, adding accessibility support to their WEB programs. Dojo, as a Javascript/ajax class library, comes with some UI widgets that contain a11y support, and provides some easy ways to help developers make it easier for them to upgrade their web pages one level and support a11y.

Page styles and font selection

Generally speaking, for people with disabilities, especially those with poor eyesight, large fonts and spaced layout systems can help them to read Web pages. They also usually use the browser's own zoom in to reduce the font to set themselves the most appropriate font. Different browsers do not have the same way to indent fonts, you can use the "CTRL +" shortcut key to enlarge the font in the Firefox browser, "Ctrl-" shortcut keys to zoom out, while IE browser can be adjusted using the font scaling on the menu.

Font use, you should try to use a more standardized typographic font rather than some uncommon handwriting. The size of the font can be defined as a percentage in cascading style sheet CSS, or a font size, such as EM, to support dynamic scaling. Such font units belong to the relative units, various browsers can be better support. Similarly, you can use Dojo in JavaScript to dynamically set the font size for certain nodes on a page, mainly for AJAX applications:

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

It is not uncommon to use JavaScript to define font size without using CSS, but for some visually impaired users who are unfamiliar with the browser, we can set the button to enlarge and narrow the text in a conspicuous position on the page, and the user clicks the two buttons, Instead of having to master the browser's retractable font, you can zoom in and out on the page, and obviously, behind this button is the JavaScript that uses the dojo example.

And more humane, complete solution is the provision of multiple stylesheets, for example, specifically for the visually weak people to provide a11y form of CSS, users can choose this style for the entire Web page, and, the browser through cookies record the user's preference style, Later, whenever the user accesses the page again, it renders using the a11y CSS previously selected by the user, following is an example of using Dojo to dynamically replace a style sheet:

Default CSS style file specified in HTML file

<link id= "Theme" type= "Text/css" rel= "stylesheet" href= "Default.css"/>

Users click Changethemebutton Switch to a11y CSS, using Dojo can be very convenient to do:

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);