J Med Syst (2006) 30:83–89 DOI 10.1007/s10916-005-8373-5
R E S E A R C H A RT I C L E
A Tool for Improving the Web Accessibility of Visually Handicapped Persons Tadayoshi Fujiki · Eisuke Hanada · Tomomi Yamada · Yoshihiro Noda · Yasuaki Antoku · Naoki Nakashima · Yoshiaki Nose
Received: 7 July 2005 / Accepted: 7 September 2005 C Springer Science+Business Media, Inc. 2006
Abstract Much has been written concerning the difficulties faced by visually handicapped persons when they access the internet. To solve some of the problems and to make web pages more accessible, we developed a tool we call the “Easy Bar,” which works as a toolbar on the web browser. The functions of the Easy Bar are to change the size of web texts and images, to adjust the color, and to clear cached data that is automatically saved by the web browser. These functions are executed with ease by clicking buttons and operating a pull-down list. Since the icons built into Easy Bar are quite large, it is not necessary for the user to deal with delicate operations. The functions of Easy Bar run on any web page without increasing the processing time. For the visually handicapped, Easy Bar would contribute greatly to improved web accessibility to medical information. Keywords Web accessibility . Toolbar . Web page appearance . Visually handicapped person
Introduction The number of internet users with visual handicaps, such as aged and visually impaired persons, is increasing. In T. Fujiki () · T. Yamada · Y. Noda · Y. Antoku · N. Nakashima · Y. Nose Department of Medical Informatics, Graduate School of Medical Sciences, Kyushu University, Maidashi 3-1-1, Higashi-ku, Fukuoka, 812-8582 Japan. e-mail:
[email protected] Tel.: +81-92-642-5881 Fax: +81-92-642-5889 E. Hanada Division of Medical Informatics, Shimane University Hospital, Izumo, Japan.
Japan, the percentage of users over 60 years-of-age grew from 16.2% in 2002 to 21.6% in 2003, higher than for all other age group [1]. With the rapid increase in the aged population, services that provide medical information to aged persons can be expected to increase in the future. However, it has been reported that, because of the small text, small images and bad color contrasts of web pages, it is difficult for the members of this age group to access information services on the web [2, 3]. Falsification and leakage of personal information are also of great concern to users [2, 3]. To deal with this situation, the World Wide Web Consortium (W3C) has, since 1999, formulated Web Content Accessibility Guidelines (WCAG), with WCAG 2.0 the latest [4]. However, because WCAG covers a wide range of specifications, it is very difficult to create web pages that comply completely. Moreover, creators seldom know the content of the WCAG. This creates a limit to the ability of programmers to solve the difficulties faced by visually handicapped persons. It would be beneficial if something could be done to make the process less onerous for the creator and the user. The Internet Explorer has a cache function that automatically saves the history of visited addresses, images, and information input into web forms on web pages. Data saved in this cache makes access to web pages fast and efficient. Unfortunately, there is the danger that failure to delete cached data might lead to the falsification and leakage of personal information [5]. In Japan, public internet services, which are often available to users in public places near residential areas, such as governmental offices, libraries and welfare institutions, are increasing. The number of visually handicapped persons who use such public internet services is showing a corresponding increase [1, 2]. Clearing cached data is necessary for the protection of personal information.
Springer
84
J Med Syst (2006) 30:83–89
Fig. 1 Architecture of Easy Bar. A double line indicates online communication
To solve such problems, a few systems that change the text and image size of web pages through the application server have been developed [6–8]. However, these systems are often difficult to introduce because of the cost and the advanced network systems required achieving high throughput and security level. In addition, the users cannot change the size of texts and images by themselves because the size range is fixed by the system. Also, personal information leakage or falsification may occur because these systems have no way to clear cached data on the web browser. To replace such systems, a toolbar on the web browser that can change the appearance of web pages as the user wishes and that can clear cached data is desirable. It should not be a large-scale system, even if a creator designed web page does not comply with WCAG. Therefore, we developed a toolbar on the web browser that changes the size of text and images, adjusts the color of web pages, clears cached data, and is easy for visually handicapped persons to operate. Methods Easy Bar “Easy Bar,” developed by the Department of Medical Informatics of Kyushu University, is an application that works as a toolbar in the Microsoft Internet Explorer for use with Microsoft Windows. Easy Bar has the following functions:
Fig. 2 Easy Bar interface
Springer
r Enlarges and reduces the text and image size of web pages.
r Changes the color of web pages. r Clears cached data, including cache files, cookies and address history. The architecture of Easy Bar is shown in Fig. 1. Easy Bar can control web pages with a HTML object acquired from the requested web page. The functions of Easy Bar are fully functional after the web page has been completely downloaded, so no communication between the browser and the web server is required. Easy Bar was developed with C# language and the Microsoft.NET Framework v1.0.3705. Easy Bar applied the Band Object control [9] and the MSHTML component [10]. The BandObject control enables an application to be mounted as a toolbar for use with Internet Explorer. The MSHTML component acquires the HTML object from a web page and controls it with the Document Object Model [11]. The interface of Easy Bar is very simple, as shown in Fig. 2.
r Three buttons to enlarge, reduce, or reset the text and image size.
r One pull-down list for changing the background and foreground color.
r One button to clear the cached data.
J Med Syst (2006) 30:83–89 Table I
85
List of preset colors by RGB hex
Color name White-blue Skyblue-blue Lightgreen-blue Pink-blue Gray-black Black-white
Background color
Foreground color
#FFFFFF #DDFFFF #DDFFDD #FFDDFF #DDDDDD #000000
#000099 #000099 #000099 #000099 #000000 #FFFFFF
The labeling text size of the buttons and the pull-down list is set at 18 or 20 points and the area/icon on which the user must click has been enlarged. Therefore, Easy Bar requires no delicate operations for the user. In addition, Easy Bar has a function that adjusts the size and position of the buttons and the pull-down list automatically by changing in the width of the web browser downward to 800 pixels.
Size and color changing function With Easy Bar, the user can freely enlarge and reduce the text and image size of web pages at intervals of 10% by simply clicking a button. Text enlargement is unlimited, but reduction is possible only down to the original size of the web page. Changing the color of a web page is possible by selecting a color from a pull-down list on the Easy Bar. We carefully chose the color selection to include pastels for background colors and deep text colors. The color list is shown in Table I. However, in some cases the listed colors may not allow web page access because of the setting of the display or the status of the user. To deal with this problem, Easy Bar has a function that enables the user to select other background and foreground colors. If a user selects the item labeled “custom” from the pull-down list, a Color Select Window opens (Fig. 3). The user can select background and foreground colors by clicking color blocks on the color areas. For changing the text size, background color and foreground color, Easy Bar controls the Cascading Style Sheets (CSS) of a web page. An HTML object, which is acquired from a web page by the MSHTML component, has the ability to control CSS. In changing the text size and the background and foreground colors of the web page, Easy Bar adds a new CSS that defines “font-size,” “color” and “backgroundcolor” attributes and controls these values through the HTML object. For changing the image size, Easy Bar uses the HTMLImgClass object. In changing the image size, Easy Bar runs the application found in the HTMLImgClass acquired from the HTML object, because it is difficult to control the
image size by CSS. The HTMLImgClass object has various methods and properties for controlling the image of the web page. On the user command to change the size, Easy Bar executes the process that controls the width and the height of the image, along with changing the text size.
The cache clearing function Easy Bar can clear cached data, including cache files, cookies and address history, by simply clicking the “clear cache” button. Clearing the cache is executed through the structure and function defined at wininet.dll. Details are given in the source program of Easy Bar, which can be downloaded from the aforementioned URL.
Evaluation and results To evaluate the functions of Easy Bar, it was installed on four personal computers (PC). The specifications of the target PCs are shown in Table II. Easy Bar ran normally and executed every function change without problems (Figs. 4 and 5). The processing time of the functions of Easy Bar were measured. The processing time was the difference between the times from the start to the end of each function. The targeted web pages were five in which the page size and number of images varied. The text and image size of each web page was enlarged and reduced ten times, and the color changed to all available colors, as shown in Table I. Clearing the cache was done before and after accessing these web pages.
Fig. 3 Color selection window
Springer
86
J Med Syst (2006) 30:83–89
Table II
Specifications of PCs used in the experiment
PC 1 2 3 4
OS
CPU
RAM (MB)
Windows XP professional
Intel Pentium 4 2.4-GHz Intel Celeron 2.0-GHz Intel Pentium III 650-MHz Intel Pentium II 300-MHz
512 128 256 128
Windows 2000 Professional
The processing time of each function of Easy Bar is shown in Table III. The enlarging and reducing times were about 0.48 s, maximum. The color change time was about 0.7 s, maximum. The time required for clearing the cache was about 0.3 s, maximum. To obtain user evaluation, Easy Bar was installed on a PC in a hospital ward and 33 patients were surveyed as to its usefulness. Their answers are shown in Table IV. About 55% of the patients answered that the appearance of web pages improved. Also, about 70% answered that the operation of Easy Bar was easy and over 80% answered that it was necessary for use with the internet.
Discussion Easy Bar is a toolbar constructed for use on the Microsoft Internet Explorer. The purpose is to improve the accessibility to visually handicapped persons of the medical information contained in web pages. As the functions are simple, the Fig. 4 Examples of text and image enlargement. Left is original size and right is enlarged to 150%. (a) Kyushu University Hospital Homepage. (http://www.med.kyushuu.ac.jp/hosp/index-e.html) (b) BBC Homepage. (http://www.bbc.co.uk/)
Springer
user can control changes in the appearance of web pages. Easy Bar dramatically improves web accessibility. From the answers shown in Table IV, the Easy Bar was shown to enable web pages to be more accessible and to be easy to operate. Most of the patients who answered the questionnaire desired to install Easy Bar for use with the internet. Easy Bar was shown to be a useful tool for improving web accessibility. As in our Easy Bar, Microsoft Internet Explorer contains toolbars that aim to improve web accessibility [12, 13]. However, the usefulness of these toolbars is limited in that they require delicate operations and a number of clicks on a small interface that is difficult to see. The range of changes is also limited. Easy Bar enables control with only a few necessary clicks and does not require delicate operations because of the large icons for user interface. Through these simple operations, Easy Bar enables changes to be made to the text and image size of web pages at intervals of 10%, and changing the color is simple. Therefore, Easy Bar is simple for aged and visually impaired persons to control, even if they are not experienced PC operators.
J Med Syst (2006) 30:83–89
87
Fig. 5 Examples of color change. (a) Original color. (b) Changed to pink–blue. (c) Changed to black–white
Public internet services have the danger of cache data being misused, which could lead to the falsification and leakage of personal information. Although it is possible to clear cached data automatically by configuring the web browser to do so, the function for clearing cached data might not be invoked as the user quits the web browser. Therefore, a mechanism for clearing cached data easily, whenever a client wishes, would be beneficial. Since Easy Bar clears cached data, including cache files, cookies and address history, with one click, Easy Bar would help insure data protection. As can be seen in Table III, the time required for enlarging and reducing text is less than 0.5 s. The time for changing color is about 0.7 s, maximum. The functions of Easy Bar take no extra time for communication, as mentioned before. The time required for drawing the web page on the display would be much less than the processing time of each function. Therefore, the response time necessary for enlarging and reducing the text and image size and to change the color would be within 1.0 s. The processing time for clearing the cache varies with the size of the cached data. The best way for shortening the processing time is for the user to diligently, routinely clear the cached data. Especially when using public internet services, it is necessary to clear the cached data each time a computer is used, not only to improve the processing time but also for security. In view of reports that users feel comfortable within 0.1 s and smooth within 1.0 s response time [14, 15]. Easy Bar was
able to execute each function within a reasonable processing time. The processing time of Easy Bar will vary not only by the specifications of the PC used, but also by the number of images and the page size of the web page. If the web page consists of a large number of images or tables or a complex CSS, the page size becomes large requiring more processing time for Easy Bar to construct HTMLImgClass objects and to analyze the HTML source codes. The size of characters in such web pages tends to be small, because the designer wants to embed a large amount of information, making it difficult for visually handicapped persons to gain information. Therefore, in the designing of web pages accessed by visually handicapped persons and to reduce the processing time of Easy Bar, it is important to limit use of images and tables and to use simple CSS.
Conclusions We developed an “Easy Bar” for the purpose of making web pages more accessible to visually handicapped persons. The user can easily change the text and image size and the background and foreground color of web pages by use of the easy operations of Easy Bar. When used at public facilities such as welfare institutions, Easy Bar enables cached data, including cache files, cookies and address history, to be cleared with only one click.
Springer
88
J Med Syst (2006) 30:83–89
Table III
Processing time of the functions
a) Page size, number of images and total image size of sample web pages Sample web page A B Page size (kB) Number of Images Total image size (kB)
81.8 224 180.4
30.5 85 180.2
C
D
E
30.3 32 28.5
2.0 2 6.6
41.8 76 33.5
Average of processing time for a sample web page(s) b-1) Enlarging text and image size PC 1 2 3 4
0.072 0.252 0.191 0.466
0.036 0.019 0.113 0.067 0.070 0.050 0.176 0.135 b-2) Reducing text and image size
0.004 0.005 0.004 0.009
0.044 0.103 0.084 0.200
1 2 3 4
0.070 0.250 0.197 0.487
0.042 0.023 0.117 0.073 0.073 0.051 0.177 0.140 b-3) Changing colors
0.002 0.003 0.003 0.009
0.041 0.105 0.087 0.216
1 2 3 4
0.125 0.245 0.257 0.636
0.141 0.249 0.186 0.539
0.028 0.052 0.052 0.176
0.104 0.219 0.209 0.545
0.109 0.240 0.184 0.532
c) Clearing the cache 1 2 3 4
0.094 0.188 0.120 0.290
The source program and the binary data of Easy Bar can be downloaded as freeware under a BSD license at the following URL: http://tsurugi.med.kyushu-u.ac.jp/asybar/. As communication technology evolves, increases in online medical services and an increase in the amount of Table IV
medical information accessed online by visually handicapped persons can be expected to greatly increase. Easy Bar will contribute greatly because of its effectiveness in improving the web accessibility of medical information.
Answers to questionnaires. (By 33 inpatients at Kyushu University Hospital) a) Q: How was the appearance of the web pages when using Easy Bar?
Answer Number (Percentage)
Improved 18 (55)
Unchanged
Impaired
No answer
9 (27)
3 (9)
3 (9)
b) Q: How was the operation of Easy Bar? Answer Number (percentage)
Very easy
Easy
Normal
Difficult
Very difficult
No answer
16 (49)
6 (18)
9 (27)
1 (3)
0 (0)
1 (3)
c) Q: What do you think of Easy Bar for use with the internet? Answer Number (percentage)
Springer
Very desirable
Desirable
Undesirable
No need
8 (24)
19 (58)
4 (12)
2 (6)
J Med Syst (2006) 30:83–89
89
References 1. Ministry of Internal Affairs and Communications, Information and Communications in Japan. White Paper, Chap. 1:12–38, 2004. 2. Institute for Information and Communications Policy, “Shogai no aru katagata no Internet toh no riyo ni kansuru tyosa hokokusyokokumin zenpan no joho kankyo tono hikaku wo tsujite” (in English, Survey Report on the Actual Situation of the Use of Internet for the Handicapped Person). http://www.soumu.go.jp/iicp/seika/ data/research/survey/ telecom/2003/0306-all.pdf, Chap. 2:52–99, 2003 (in Japanese). 3. Ministry of Internal Affairs and Communications, Communications Usage Trend Survey. http://www.soumu.go.jp/snews/2004/pdf/040414 1 a.pdf, 2004. 4. World Wide Web Consortium (W3C), Web Content Accessibility Guideline 2.0. http://www.w3.org/TR/WCAG20/. 5. Edward, W. F., and Michael, A. S., Timing attacks on Web privacy. Proceedints of the 7th ACM Conferrence on Computer and Communications Security, 25–32, 2000. 6. Takagi, H., Asakawa, C., Fukuda, K., and Maeda, J., Site-wide Annotaion: Reconstructing Existing Pages to be Accessible. Proceedings of The Fifth International ACM Conference on Assistive Technologies (ASSETS 2002), 81–88, 2002. 7. Takagi, H., and Asakawa, C., Transcoding Proxy for Nonvisual Web Access. Proceedings of The Fifth International ACM Con-
8.
9.
10.
11. 12.
13.
14. 15.
ferrence on Assistive Technologies (ASSETS 2000), pp. 164–171, 2000. Kottapally, K., Ngo, C., Reddy, R., Pontelli, E., Son, T. C., and Gillan, D., Towards the Creation of Accessibility Agents for Nonvisual Navigation of the Web. Proceedings of The 2003 Conference on Universal Usability, pp. 134–141, 2002. Pavel Zolnikov, Extending Explorer with Band Objects using.NET and Windows Forms. http://www.codeproject.com/ csharp/dotnetbandobjects.asp, 2002. Microsoft, MSHTML Reference. http://msdn.microsoft.com/ library/default.asp?url=/workshop/browser/mshtml/reference/ reference.asp. World Wide Web Consortium (W3C), Document Object Model (DOM). http://www.w3.org/DOM/. Tibbitts, B. R., Crayne, S., Hanson, V., Brezin, J., Swart, C., and Richards, J. T., HTML Parsing in Java for Accessibility Transformations. XML 2002 Proc., 2002. The Accessibility Information Solutions (AIS) at the National Information and Library Service (NILS), Web Accessibility Toolbar. http://www.nils.org.au/ais/web/resources/toolbar/. Miller, R. B., Response time in man-computer conversational transactions. Proc. AFIPS Fall Joint Computer Conf. 33:267–277, 1968. Card, S. K., Robertson, G. G., and Mackinlay, J. D., The information visualizer: An information workspace. Proc. ACM CHI’91 Conf. 181–188, 1991.
Springer
